在项目开发中，经常需要引用到一些UI库，恰好这次开发中，产品在h5设计上有要用到表格。而我们平时用到的cube-ui没有表格（正常手机端都不会出现表格才对啊！但是我又不敢bb，只能自己想办法）。于是，我便开始了element-ui 跟cube-ui的合集
首先是要完成nuxt项目的基础搭建，这一部分查看官网最适合不过了。只不过有一个小小的要求，那就是在官网推荐的UI库的选择时，我们选择None就好，为了代码与目录简洁统一。
初始化nuxt项目
https://zh.nuxtjs.org/guide/installation/
当我们把项目构建好的时候，开始第一步，安装我们需要用到的两个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文件，在代码可读性上就已经被大打折扣。
最后大功告成：
