Vue UI组件库
- 1 移动端常用UI组件库
- 2 PC端常用UI组件库
- 2.1 Element UI
1 移动端常用UI组件库
- Vant:https://youzan.github.io/vant
- Cube UI:https://didi.github.io/cube-ui
- Mint UI:http://mint-ui.github.io
2 PC端常用UI组件库
- Element UI:https://element.eleme.cn
- IView UI:https://www.iviewui.com
2.1 Element UI
- npm安装:
npm i element-ui -S
- 引入ElementUI:
1> 完整引入:在 main.js 中写入以下内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2> 按需引入:借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
① 首先,安装 babel-plugin-component:npm install babel-plugin-component -D
② 然后,将 babel.config.js 文件修改为:
③ 接下来,如果你只希望引入部分组件,比如 Button、Row、DatePicker,那么需要在 main.js 中写入以下内容:
// 按需引入
import { Button, Row, DatePicker } from 'element-ui';
// 使用
Vue.component(Button.name, Button);
Vue.component(Row.name, Row);
Vue.component(DatePicker.name, DatePicker);
// 或写为
Vue.use(Button)
Vue.use(Row)
Vue.use(DatePicker)
④ 报错Error: Cannot find module ‘babel-preset-es2015’
解决方法:把 babel.config.js 文件中的 es2015 改为 @babel/preset-env 即可。( 原因是旧版本的脚手架用的是 es2015,新版本不再适用,而官网没有及时更新。)
- 使用ElementUI: