在nuxt中使用cube-ui

直接通过普通编译使用 cube-ui 是没有问题的。但如果你想自定义主题，那必须通过后编译的方式。

首先安装好后编译和按需引入的相关依赖：

npm i stylus stylus-loader webpack-post-compile-plugin webpack-transform-modules-plugin -D

然后按照NUXT的文档，我们需要在 plugins 下新建 cube-ui.js，并在其中按需引入要使用的组件（全部引入见 cube-ui 文档）

这里我们引入 Button 组件

// plugins/cube-ui.js

import Vue from 'vue'
import {
  /* eslint-disable no-unused-vars */
  Style,
  Button
} from 'cube-ui'

Vue.use(Button)

现在让我们加入 后编译 和 按需引入 的配置

// nuxt.config.js
build: {
  loaders: {
    stylus: {
      'resolve url': true,
      import: [path.resolve(__dirname, './assets/theme')]
    }
  },
  plugins: [
    new PostCompilePlugin(),
    new TransformModulesPlugin()
  ]
}

nuxt 为我们提供了修改 webpack 配置的入口。为 stylus-loader 添加 options，并添加我们后编译 和 按需引入的插件。theme.styl 就是自定义主题的文件。

此时，server 阶段不编译node_modules，也就不编译cube-ui，有两种解决方式：

• 解决一：（推荐）

  nuxt 为我们提供了 transpile 使用Babel转换特定依赖项

• 解决二：（不推荐）

  研究 @nuxt/webpack/dist/webpack.js 发现，node_modules 被加入了 externals 中，所以不走编译。从代码中发现，可通过变量 standalone: true 进行配置，但文档中并没有相关的说明，并且由于会编译整个 node_modules，所以会慢，不推荐。

所以最终推荐的配置如下：

// nuxt.config.js
build: {
  // standalone: true,
  transpile: ['cube-ui'],
  loaders: {
    stylus: {
      'resolve url': true,
      import: [path.resolve(__dirname, './assets/theme')]
    }
  },
  plugins: [
    new PostCompilePlugin(),
    new TransformModulesPlugin()
  ]
}

现在项目就可以正常跑起来了，并且我们在 theme.styl 中将按钮的背景色，从蓝色修改为橙色。

备注：用 NUXT 脚手架初始化的的项目，nuxt 被放在了 dependencies 下，需要手动移动到 devDependencies 下，否则 windows 下有坑。本示例项目已经做了修改。

Build Setup

# install dependencies
$ npm run install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, checkout Nuxt.js docs.