Skip to content

cube-ui/cube-nuxt-demo

Repository files navigation

在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.

About

Cube-UI demo for nuxt.js appication

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published