elememt-ui 和iview都是基于vue.js的组件库，在github上都有不错的星值表现，我个人更喜欢iview组件的引用风格，内置icon比element-ui多，同时也更加的漂亮，自4.0版本以后，iview正式更名为View UI。
安装View UI
由于我这里采用模块化方式开发项目，所以采用npm方式进行安装，进入vscode终端，执行下面代码进行插件安装
// 进入项目目录
cd hello
// 安装viewUI
npm i view-design --save
引入View UI
使用vue/cli4创建项目时,会在项目树中生成一个main.js文件，它是vue项目的入口文件，可在此文件中引入View UI,引入的方式分为2种：全部引入和按需引入。
全部引入
全部引入会一次性引入view UI的所有组件，这种引入方式比较简单，但是会增加最终项目的尺寸。
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ViewUI from "view-design"
import 'view-design/dist/styles/iview.css'
Vue.config.productionTip = false;
Vue.use(ViewUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
按需引入
借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先执行下面命令进行插件安装
// 安装babel-plugin-import
npm install babel-plugin-import --save-dev
然后在babel.cofing.js文件中添加babel-plugin-import的配置字段
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
"plugins": [["import", {
"libraryName": "view-design",
"libraryDirectory": "src/components"
}]]
};
最后在main.js中按需全局引入组件:
import { Button, Table } from 'view-design';
import 'view-design/dist/styles/iview.css'
Vue.component('Button', Button)
Vue.component('Table', Table)
注意事项
- 在按需注册组件时要注意，不要使用Vue.use(Button)这种方式，这会导致样式加载异常。
- 在一次性引入所有组件时，必须屏蔽添加到babel.cofing.js文件中的babel-plugin-import配置字段，否则组件将无法使用。
