一、安装
1.1 npm安装
npm i element-ui -S
1.2 CDN安装
<script src="https://unpkg.com/element-ui/lib/index.js"></script>二、引入
2.1 完整引入
在 main.js 中写入以下内容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
注意:完整引入所占内存较大,引入了全部的样式和组件。
2.1.1 使用:在网站组件中提取所需组件,复制相关代码即可。
例——引入导航菜单
(1)复制代码
(2)效果展示
2.1.2 修改
参考Attribute(属性)——同样以导航菜单为例
(1)属性类型与值参考
(2)代码修改(样式)——模式改为:垂直;激活时菜单文字颜色改为红色
(3)效果展示
2.2 按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
2.2.1 需要安装 —— babel-plugin-component
(1) npm install babel-plugin-component -D
(2)然后,修改 babel.config.js(或 .babelrc),代码如何(可在element网站复制:https://element.eleme.cn/#/zh-CN/component/quickstart)
2.2.2 使用——将需要使用的组件在 main.js 中以如下方式引入即可
例——以Button(按钮)为例
(1)复制代码
(2)效果展示
2.2.3 修改——参考 Attributes
(1)指定修改的样式
(2)效果展示
三、其他 VUE UI 组件库
3.1 移动端UI组件库
(1) Vant: https://youzan.github.io/vant
(2) Cube UI: https://didi.github.io/cube-ui
(3) Mint UI: http://mint-ui.github.io/#!/zh-cn
3.2 PC端UI组件库
(1) Element UI: https://element.eleme.cn/#/zh-CN
(2) IView UI: https://www.iviewui.com/