[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文件，在代码可读性上就已经被大打折扣。