Vue UI组件库

一.移动端常用的UI组件库

1. vant 4：https://vant-ui.github.io/vant/ 

2. cube-ui :https://didi.github.io/cube-ui
3. Mint UI: https://mint-ui.github.io/

 现在大多数使用vant 4(推荐使用)

npm i element-ui

1.  Element UI: https://element.eleme.cn/
2.  IView UI:  iView / View Design 一套企业级 UI 组件库和前端解决方案
3.   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组件库没有更新，可以去看看文档