在項目開發(fā)中，經(jīng)常需要引用到一些UI庫，恰好這次開發(fā)中，產(chǎn)品在h5設(shè)計上有要用到表格。而我們平時用到的cube-ui沒有表格（正常手機端都不會出現(xiàn)表格才對??！但是我又不敢bb，只能自己想辦法）。于是，我便開始了element-ui 跟cube-ui的合集

首先是要完成nuxt項目的基礎(chǔ)搭建，這一部分查看官網(wǎng)最適合不過了。只不過有一個小小的要求，那就是在官網(wǎng)推薦的UI庫的選擇時，我們選擇None就好，為了代碼與目錄簡潔統(tǒng)一。

初始化nuxt項目
https://zh.nuxtjs.org/guide/installation/

當(dāng)我們把項目構(gòu)建好的時候，開始第一步，安裝我們需要用到的兩個ui庫，element-ui + cube-ui
安裝element：

npm i element-ui -S

安裝cube：

npm install cube-ui --save

接著我們要在項目中引用element的樣式，我們在plugins目錄下創(chuàng)建一個inits文件夾，用來初始化我們項目中用到的所有樣式庫的組件等。

先創(chuàng)建一個element-ui.init.js文件，把我們需要用到的一些組件按需引用，當(dāng)然可以選擇全部引用

// 以下為按需引用
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

接著把我們同樣創(chuàng)建一個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'
  ]

在運營的時候，發(fā)現(xiàn)報了好多cube-ui的錯誤，然后在檢查文檔的時候看到自己漏掉了一小部分，那就是需要修改webpack

image.png

因此我們需要在nuxt.config.js的build中加入一行

build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // 新增
      config.resolve.alias['cube-ui'] = 'cube-ui/lib'
    }
  }

這時候就可以完美運行了

回頭想想為什么在初始化nuxt項目的時候，我建議不選擇任何ui庫。差別就在于如果你當(dāng)時選擇了element庫，看似你少了一部分操作，實際上他相當(dāng)于把element-ui完整引入，并把初始化文件直接放在plugins下，此時你的plugins下直接就是一個element-ui.js文件，在實際項目開發(fā)中，很忌諱的就是文件結(jié)構(gòu)混亂，你的plugins目錄下如果是平鋪的若干個不同效果的js文件，在代碼可讀性上就已經(jīng)被大打折扣。

最后大功告成：

image.png