❓ [[email protected]] 如何搭配使用

[dolymood]

使用插件 🌟

直接使用 https://github.com/cube-ui/vue-cli-plugin-cube-ui 插件（>=0.1.3），只需要初始化项目后执行 vue add cube-ui 即可，配置项参考 https://github.com/cube-ui/cube-template/wiki

自己配置

分为两种情况，后编译和普通编译。但是不管哪种情况都需要我们在项目下添加 vue.config.js 文件。

依赖版本说明： webpack-post-compile-plugin>=0.5.0 webpack-transform-modules-plugin>=0.3.5

后编译

按需引入

vue.config.js 文件：

const PostCompilePlugin = require('webpack-post-compile-plugin')
const TransformModulesPlugin = require('webpack-transform-modules-plugin')

module.exports = {
  chainWebpack: config => {
    const conf = config.toConfig()
    config
      .plugin('post-compile')
      .use(PostCompilePlugin, [{
        config: {
          module: {
            rules: [...conf.module.rules]
          }
        }
      }])
      .end()
      .plugin('transform-modules')
      .use(TransformModulesPlugin)
  },
  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true
        // 自定义主题场景
        // import: [path.resolve(__dirname, './src/theme')]
      }
    }
  }
}

在 package.json 中增加 transformModules 配置：

{
// ...
  "transformModules": {
    "cube-ui": {
      "transform": "cube-ui/src/modules/${member}",
      "kebabCase": true
    }
  },
// ...
}

全部引入

vue.config.js 文件：

const PostCompilePlugin = require('webpack-post-compile-plugin')

module.exports = {
  chainWebpack: config => {
    const conf = config.toConfig()
    config
      .plugin('post-compile')
      .use(PostCompilePlugin)
  },
  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true
        // 自定义主题场景
        // import: [path.resolve(__dirname, './src/theme')]
      }
    }
  }
}

普通编译

按需引入

vue.config.js 文件：

const TransformModulesPlugin = require('webpack-transform-modules-plugin')

module.exports = {
  chainWebpack: config => {
    config
      .plugin('transform-modules')
      .use(TransformModulesPlugin)
  }
}

在 package.json 中增加 transformModules 配置：

{
// ...
  "transformModules": {
    "cube-ui": {
      "transform": "cube-ui/lib/${member}",
      "kebabCase": true,
      "style": {
        "ignore": ["create-api", "better-scroll"]
      }
    }
  },
// ...
}

全部引入

vue.config.js 文件：

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('cube-ui', 'cube-ui/lib')
  }
}

[GodStream]

执行build会报错

UnhandledPromiseRejectionWarning: Error: Cyclic dependency
(node:8376) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:8376) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

运行时会报 DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

[edison0951]

按照后编译，按需引入的方式进行配置后， 执行npm run build会报错 npm run build

[email protected] build /Users/wangheyun/MyProject/HaoZe/Project/Web/Mobile/lore vue-cli-service build

⠙ Building for production...(node:35807) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead ⠴ Building for production...

ERROR Failed to compile with 3 errors 下午8:32:23

error in ./node_modules/cube-ui/src/common/helpers/instantiate-component.js

Syntax Error: Thread Loader (Worker 0) SyntaxError: Unexpected token (10:4)

8 | 9 | const instance = new Vue({

10 | ...options, | ^ 11 | render(createElement) { 12 | let children = childrenRenderFn && childrenRenderFn(createElement) 13 | if (children && !Array.isArray(children)) {

@ ./node_modules/cube-ui/src/common/helpers/create-api-component.js 1:0-59 45:24-44 @ ./node_modules/cube-ui/src/common/helpers/create-api.js @ ./node_modules/cube-ui/src/modules/create-api/index.js @ ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-service/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib??ref--16-2!./node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/views/CreateRecord.vue?vue&type=script&lang=js @ ./src/views/CreateRecord.vue?vue&type=script&lang=js @ ./src/views/CreateRecord.vue @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js

error in ./node_modules/cube-ui/src/components/dialog/dialog.vue?vue&type=script&lang=js

Syntax Error: Thread Loader (Worker 0) SyntaxError: Unexpected token (99:10)

97 | default() { 98 | return {

99 | ...defConfirmBtn | ^ 100 | } 101 | } 102 | },

@ ./node_modules/cube-ui/src/components/dialog/dialog.vue?vue&type=script&lang=js 1:0-338 1:354-357 1:359-694 1:359-694 @ ./node_modules/cube-ui/src/components/dialog/dialog.vue @ ./node_modules/cube-ui/src/modules/dialog/index.js @ ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-service/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib??ref--16-2!./node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/views/CreateRecord.vue?vue&type=script&lang=js @ ./src/views/CreateRecord.vue?vue&type=script&lang=js @ ./src/views/CreateRecord.vue @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js

error in ./node_modules/cube-ui/src/common/helpers/parse-render-data.js

Syntax Error: Thread Loader (Worker 1) SyntaxError: Unexpected token (5:18)

3 | export default function parseRenderData(data = {}, events = {}) { 4 | events = parseEvents(events)

5 | const props = { ...data } | ^ 6 | const on = {} 7 | for (const name in events) { 8 | if (events.hasOwnProperty(name)) {

@ ./node_modules/cube-ui/src/common/helpers/create-api-component.js 2:0-50 81:25-40 @ ./node_modules/cube-ui/src/common/helpers/create-api.js @ ./node_modules/cube-ui/src/modules/create-api/index.js @ ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-service/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib??ref--16-2!./node_modules/@vue/cli-service/node_modules/vue-loader/lib??vue-loader-options!./src/views/CreateRecord.vue?vue&type=script&lang=js @ ./src/views/CreateRecord.vue?vue&type=script&lang=js @ ./src/views/CreateRecord.vue @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js

ERROR Build failed with errors. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] build: vue-cli-service build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

[Devon3818]

[[email protected]] 如何搭配使用DEMO 亲自试过可行

[dolymood]

推荐直接使用插件 https://github.com/cube-ui/vue-cli-plugin-cube-ui ，只需要初始化项目后执行 vue add cube-ui 即可，配置项参考 https://github.com/cube-ui/cube-template/wiki

[uselesstime]

加入chainWebpack配置后不能运行，不加则好用

[dolymood]

as https://github.com/didi/cube-ui/issues/281

[dolymood]

vue-cli-plugin-cube-ui<=0.1.2 的额外配置了webpack可能会不能运行， 0.1.3 版本修复了这个问题。

[fantasy525]

推荐直接使用插件 https://github.com/cube-ui/vue-cli-plugin-cube-ui ，只需要初始化项目后执行 vue add cube-ui 即可，配置项参考 https://github.com/cube-ui/cube-template/wiki

事实并不像你说的那么容易，苦苦配置好后最终没有报错了，但是还有个waring

10% building modules 1/1 modules 0 active(node:5360) DeprecationWarning: Tapable.plugin is deprecated. Use new
 API on `.hooks` instead                                              98% after emitting CopyPlugin

 WARNING  Compiled with 1 warnings                                                                     18:22:14

 warning  in ./node_modules/cube-ui/src/common/helpers/validator/index.js

"export 'findMessage' was not found in './messages'

这怎么解决 我用的typescript，跟这个有关系？

[zilan830]

我也引用的typescript，也是有问题解决不了。识别不了$create[component]。请问有解决方案吗？

[ustbhuangyi]

@zilan830 ，TS 需要自己写声明吧， 参考 https://github.com/didi/cube-ui/blob/dev/types/cube-ui.d.ts#L119-L140

[chancelee]

Vue3.0集成的方式简单来说分三步

1. vue create vue-sell-cube 创建项目
2. 进入到 项目vue-sell-cube 中 vue add cube-ui 增加cube-ui组件
3. 替换 cube-application-guide 官方demo的src目录

npm run serve 完美执行

[feichangtutu]

如果是已经生成的vue项目再想引入cube-ui应该怎样配置呢？

[reuwi]

config.resolve.alias .set('cube-ui', 'cube-ui/lib') 这一步是多余的吧?package.json里面的main字段已经有lib/index.js了

[zhangweiii]

我发现我按照这个写法弄了之后，Chrome的DevTools中显示两份样式，而我自定义的默认是无效的 下面是相关配置

chainWebpack: config => {
    config
      .plugin('post-compile')
      .use(PostCompilePlugin)
  },
  css: {
    loaderOptions: {
      stylus: {
        'resolve url': true,
        // 自定义主题场景
        import: [path.resolve(__dirname, './src/theme')]
      }
    }
  },
  pluginOptions: {
    'cube-ui': {
      postCompile: true,
      theme: true
    }
  },

终端没有报错。不清楚什么原因，我尝试过修改$btn-color := $color-orange样式文件中按钮颜色，DevTools中是显示了的，不过默认无效

使用vue cli 3和cube-ui@~1.12.1

[gh0sthx]

These relative modules were not found:

• ./cubeic.ttf in ./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib??ref--11-2!./node_modules/stylus-loader??ref--11-3!./node_modules/cube-ui/src/common/stylus/index.styl
• ./cubeic.woff in ./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib??ref--11-2!./node_modules/stylus-loader??ref--11-3!./node_modules/cube-ui/src/common/stylus/index.styl

[RysisLiang]

如果是已经生成的vue项目再想引入cube-ui应该怎样配置呢？

同问这个问题。一个已经存在的现有项目，如何引入cube-ui呢？直接npm install 后，在Vue.use(Cube)会报错：Cannot find module './cubeic.woff'

[dolymood]

vue-cli 3 生成的项目吗？还是vue 2 生成的项目

以及相关问题建议群里讨论

[Nicooo-Ni]

不用了，配置不好

[chengwb53]

📦 Installing vue-cli-plugin-cube-ui...

• [email protected] updated 1 package in 15.901s ✔ Successfully installed plugin: vue-cli-plugin-cube-ui

? Use post-compile? Yes ? Import type Partly ? Custom theme? No ? Use rem layout? No ? Use vw layout? No

🚀 Invoking generator for vue-cli-plugin-cube-ui... ERROR TypeError: Cannot read property 'type' of null TypeError: Cannot read property 'type' of null at Context.visitVariableDeclarator (C:\Users\xx\AppData\Roaming\npm\node_m odules@vue\cli\lib\util\extendJSConfig.js:34:21) at Context.invokeVisitorMethod (C:\Users\xx\AppData\Roaming\npm\node_modul es@vue\cli\[email protected]@ast-types\lib\path-visitor.js:284:51) at Visitor.PVp.visitWithoutReset (C:\Users\xx\AppData\Roaming\npm\node_mod ules@vue\cli\[email protected]@ast-types\lib\path-visitor.js:159:32) at NodePath.each (C:\Users\xx\AppData\Roaming\npm\node_modules@vue\cli\no [email protected]@ast-types\lib\path.js:89:26) at visitChildren (C:\Users\xx\AppData\Roaming\npm\node_modules@vue\cli\no [email protected]@ast-types\lib\path-visitor.js:180:18) at Visitor.PVp.visitWithoutReset (C:\Users\xx\AppData\Roaming\npm\node_mod ules@vue\cli\[email protected]@ast-types\lib\path-visitor.js:168:20) at visitChildren (C:\Users\xx\AppData\Roaming\npm\node_modules@vue\cli\no [email protected]@ast-types\lib\path-visitor.js:205:25) at Visitor.PVp.visitWithoutReset (C:\Users\xx\AppData\Roaming\npm\node_mod ules@vue\cli\[email protected]@ast-types\lib\path-visitor.js:168:20) at NodePath.each (C:\Users\xx\AppData\Roaming\npm\node_modules@vue\cli\no [email protected]@ast-types\lib\path.js:89:26) at visitChildren (C:\Users\xx\AppData\Roaming\npm\node_modules@vue\cli\no [email protected]@ast-types\lib\path-visitor.js:180:18)

安装不起，不知道什么原因，报错type为null一脸懵逼

[cuijing1031]

📦 Installing vue-cli-plugin-cube-ui...

• [email protected] updated 1 package in 15.901s ✔ Successfully installed plugin: vue-cli-plugin-cube-ui

? Use post-compile? Yes ? Import type Partly ? Custom theme? No ? Use rem layout? No ? Use vw layout? No

🚀 Invoking generator for vue-cli-plugin-cube-ui... ERROR TypeError: Cannot read property 'type' of null TypeError: Cannot read property 'type' of null at Context.visitVariableDeclarator (C:\Users\xx\AppData\Roaming\npm\node_m odules@vue\cli\lib\util\extendJSConfig.js:34:21) at Context.invokeVisitorMethod (C:\Users\xx\AppData\Roaming\npm\node_modul es@vue\cli\[email protected]@ast-types\lib\path-visitor.js:284:51) at Visitor.PVp.visitWithoutReset (C:\Users\xx\AppData\Roaming\npm\node_mod ules@vue\cli\[email protected]@ast-types\lib\path-visitor.js:159:32) at NodePath.each (C:\Users\xx\AppData\Roaming\npm\node_modules@vue\cli\no [email protected]@ast-types\lib\path.js:89:26) at visitChildren (C:\Users\xx\AppData\Roaming\npm\node_modules@vue\cli\no [email protected]@ast-types\lib\path-visitor.js:180:18) at Visitor.PVp.visitWithoutReset (C:\Users\xx\AppData\Roaming\npm\node_mod ules@vue\cli\[email protected]@ast-types\lib\path-visitor.js:168:20) at visitChildren (C:\Users\xx\AppData\Roaming\npm\node_modules@vue\cli\no [email protected]@ast-types\lib\path-visitor.js:205:25) at Visitor.PVp.visitWithoutReset (C:\Users\xx\AppData\Roaming\npm\node_mod ules@vue\cli\[email protected]@ast-types\lib\path-visitor.js:168:20) at NodePath.each (C:\Users\xx\AppData\Roaming\npm\node_modules@vue\cli\no [email protected]@ast-types\lib\path.js:89:26) at visitChildren (C:\Users\xx\AppData\Roaming\npm\node_modules@vue\cli\no [email protected]@ast-types\lib\path-visitor.js:180:18)

安装不起，不知道什么原因，报错type为null一脸懵逼

请提供一下你使用的vue-cli版本和node版本

[qishang777]

安装后 访问页面 报如下错怎么版
[HMR] Waiting for update signal from WDS... cube-ui.js?037f:4 Uncaught TypeError: Cannot read property 'use' of undefined at eval (cube-ui.js?037f:4) at Module../src/cube-ui.js (app.js:1148) at webpack_require (app.js:849) at fn (app.js:151) at eval (main.js:11) at Module../src/main.js (app.js:1160) at webpack_require (app.js:849) at fn (app.js:151) at Object.1 (app.js:1173) at webpack_require (app.js:849)

[RanD0mi2e]

• ./cubeic.ttf in ./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib??ref--11-2!./node_modules/stylus-loader??ref--11-3!./node_modules/cube-ui/src/common/stylus/index.styl
• ./cubeic.woff in ./node_modules/css-loader??ref--11-1!./node_modules/postcss-loader/lib??ref--11-2!./node_modules/stylus-loader??ref--11-3!./node_modules/cube-ui/src/common/stylus/index.styl

按照上述描写的步骤配置后还是报这种错误，应该如何解决呢？