elememt-ui 和iview都是基于vue.js的組件庫，在github上都有不錯的星值表現(xiàn)，我個人更喜歡iview組件的引用風格，內(nèi)置icon比element-ui多，同時也更加的漂亮，自4.0版本以后，iview正式更名為View UI。
安裝View UI
由于我這里采用模塊化方式開發(fā)項目，所以采用npm方式進行安裝，進入vscode終端，執(zhí)行下面代碼進行插件安裝
// 進入項目目錄
cd hello
// 安裝viewUI
npm i view-design --save
引入View UI
使用vue/cli4創(chuàng)建項目時,會在項目樹中生成一個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可以實現(xiàn)按需加載組件，減少文件體積。首先執(zhí)行下面命令進行插件安裝
// 安裝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配置字段，否則組件將無法使用。
