[TOC] #### Nuxt引用多個UI庫的常規操作，舉例Element + CubeUI 在項目開發中，經常需要引用到一些UI庫，恰好這次開發中，產品在h5設計上有要用到表格。而我們平時用到的cube-ui沒有表格（正常手機端都不會出現表格才對啊！但是我又不敢bb，只能自己想辦法）。于是，我便開始了element-ui 跟cube-ui的合集 首先是要完成nuxt項目的基礎搭建，這一部分查看官網最適合不過了。只不過有一個小小的要求，那就是在官網推薦的UI庫的選擇時，我們選擇None就好，為了代碼與目錄簡潔統一。 初始化nuxt項目 [https://zh.nuxtjs.org/guide/installation/](https://links.jianshu.com/go?to=https%3A%2F%2Fzh.nuxtjs.org%2Fguide%2Finstallation%2F) 當我們把項目構建好的時候，開始第一步，安裝我們需要用到的兩個ui庫，element-ui + cube-ui 安裝element： ~~~ npm i element-ui -S ~~~ 安裝cube： ~~~ npm install cube-ui --save ~~~ 接著我們要在項目中引用element的樣式，我們在plugins目錄下創建一個inits文件夾，用來初始化我們項目中用到的所有樣式庫的組件等。 先創建一個element-ui.init.js文件，把我們需要用到的一些組件按需引用，當然可以選擇全部引用: ~~~ // 以下為按需引用 import Vue from 'vue' import { Button, Select, Option, Table, TableColumn, CheckboxGroup, Checkbox, RadioGroup, Radio, Loading, Message, Input, MessageBox } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(Button) Vue.use(Select) Vue.use(Option) Vue.use(Table) Vue.use(TableColumn) Vue.use(CheckboxGroup) Vue.use(Checkbox) Vue.use(RadioGroup) Vue.use(Radio) Vue.use(Input) Vue.use(Loading.directive) Vue.prototype.$loading = Loading.service Vue.prototype.$message = Message Vue.prototype.$confirm = MessageBox.confirm ~~~ 接著把我們同樣創建一個cube-ui.init.js文件，同樣也可以全部引用 ~~~ import Vue from 'vue' import { Picker, CascadePicker, Switch, Slide, Scroll } from 'cube-ui' import 'cube-ui/lib/cube.min.css' Vue.use(Picker) Vue.use(CascadePicker) Vue.use(Switch) Vue.use(Slide) Vue.use(Scroll) ~~~ 接下來我們在vue實例化之前添加運行的 Javascript 插件，也就是在nuxt.config.js文件的plugins中修改 ~~~ plugins: [ '~/plugins/inits/element-ui.init.js', '~/plugins/inits/cube-ui.init.js' ] ~~~ 在運營的時候，發現報了好多cube-ui的錯誤，然后在檢查文檔的時候看到自己漏掉了一小部分，那就是需要修改webpack  因此我們需要在nuxt.config.js的build中加入一行 ~~~ build: { /* ** You can extend webpack config here */ extend(config, ctx) { // 新增 config.resolve.alias['cube-ui'] = 'cube-ui/lib' } } ~~~ 這時候就可以完美運行了 回頭想想為什么在初始化nuxt項目的時候，我建議不選擇任何ui庫。差別就在于如果你當時選擇了element庫，看似你少了一部分操作，實際上他相當于把element-ui完整引入，并把初始化文件直接放在plugins下，此時你的plugins下直接就是一個element-ui.js文件，在實際項目開發中，很忌諱的就是文件結構混亂，你的plugins目錄下如果是平鋪的若干個不同效果的js文件，在代碼可讀性上就已經被大打折扣。