一.移动端常用的UI组件库
- cube-ui :https://didi.github.io/cube-ui
- Mint UI: https://mint-ui.github.io/
现在大多数使用vant 4(推荐使用)
npm i element-ui
- Element UI: https://element.eleme.cn/
- IView UI: iView / View Design 一套企业级 UI 组件库和前端解决方案
- Ant: Ant Design Vue
推荐使用Ant或Element
三.Element UI的使用:
1.安装:
npm i element-ui
2.完整引入element(在main.js里面引入)
/*
该文件是整个项目的入口文件
*/
import Vue from 'vue'//引入Vue
//引用的是残缺版的vue的原因: 用了这个不包含模板解析器的vue,可以减小打包之后的体积,还有就是这个模板解析器不应该出现在打包之后的文件里面
import App from './App.vue'//引入APP组件,它是所有组件的父组件
// 引入element组件库
import ElementUI from 'element-ui';
// 引入element全部样式
import 'element-ui/lib/theme-chalk/index.css';
// 使用element组件库
Vue.use(ElementUI);
Vue.config.productionTip = false//关闭vue生产提示
/*
vue创建实例
注:Vue 的$mount()为手动挂载,在项目中可用于延时挂载(例如在挂载之前要进行一些其他操作、
判断等),之后要手动挂载上。new Vue时,el和$mount并没有本质上的不同。
*/
new Vue({
// 这行代码将APP组件放入容器中
render: h => h(App),
}).$mount('#app')
如此引入发现js文件很大
是因为这个js里面混入了element的全部样式
2.按需引入:
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的
是ant-desgin做的一个专门用于按需引入的组件
首先要安装: https://didi.github.io/cube-ui
npm install babel-plugin-component -D
在babel.config.js的文件修改配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["es2015", { "modules": false }]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
在main.js里面
import Vue from 'vue'//引入Vue
import App from './App.vue'//引入APP组件,它是所有组件的父组件
// 按需引入
import { Button, Select } from 'element-ui';
Vue.component('el-button', Button);
Vue.component('el-select', Select);
// 样式会自动分析
Vue.config.productionTip = false//关闭vue生产提示
new Vue({
// 这行代码将APP组件放入容器中
render: h => h(App),
}).$mount('#app')
有时候启动会报错:
UI组件库在进行按需引入的时候,需要和脚手架打一次配合,有时候会存在一些问题、
就是脚手架以及更新了,但是UI组件库没有更新,或者有时候报错某个模块‘abc’not found
npm i abc 少包了就下载
那么针对最新的UI组件库没有更新,可以去看看文档