vue项目实战03-引入View UI组件库

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)

注意事项

1. 在按需注册组件时要注意，不要使用Vue.use(Button)这种方式，这会导致样式加载异常。
2. 在一次性引入所有组件时，必须屏蔽添加到babel.cofing.js文件中的babel-plugin-import配置字段，否则组件将无法使用。