1、常用的组件推荐
移动端常用 UI组件库
- Vant https://youzan.github.io/vante
- Cube Ul https://didi.github.io/cube-uie
- Mint Ul http://mint-ui.github.io
PC端常用UI组件库
- Element Ul https://element.eleme.cn (国产 饿了吗打造)
- IView Ul https://www.iviewui.com
2、Element UI 引入流程
1-全部引入
//1-引入emUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
2-按需引入
1-借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
2-然后修改配置文件: babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
["@babel/preset-env", { "modules": false }]
],
plugins: [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
3-引入依赖组件
import Vue from 'vue'
import App from './App.vue'
//接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import { Button, Select } from 'element-ui';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')