cube-ui普通编译实践

实践场景(在老的项目添加cube-ui)

1. 查看vue-cli版本

  npm info vue-cli // version: '2.9.6',

2. 添加cube-ui依赖

  npm install cube-ui -S

3. 修改 package.json 并安装依赖

  // package.json
  {
    // webpack-transform-modules-plugin 依赖 transformModules
    "transformModules": {
      "cube-ui": {
        "transform": "cube-ui/src/modules/${member}",
        "kebabCase": true,
        "style": {
        "ignore": ["create-api", "better-scroll","locale"]
        }  // style的可选值 style index
      }
    },
    "devDependencies": {
      // 新增 stylus 相关依赖
      "stylus": "^0.54.5",
      "stylus-loader": "^2.1.1",
      "webpack-transform-modules-plugin": "^0.4.3"
    }
  }

  //.babelrc  transformModules 另一种修改方案
  ["transform-modules", {"cube-ui": {
      "transform": "cube-ui/lib/${member}",
      "kebabCase": true,
      "style": { // style的可选值 style index
      "ignore": ["create-api", "better-scroll","locale"]
      }
    }
   }
  ]

4. 修改 webpack 配置

    // webpack.base.conf.js
    const TransformModulesPlugin = require('webpack-transform-modules-plugin')
    // ...
    plugins: [
      // ...
      new TransformModulesPlugin()
    ]

5. 按需加载

  import {
  /* eslint-disable no-unused-vars */
  Style, // Style 导入即可
  DatePicker } from 'cube-ui';

  Vue.use(DatePicker) // 全局注册

6. 常见报错及解决办法

   //  error  in ./node_modules/cube-ui/lib/fonts/cubeic.dcc2b6f.ttf

    {
      test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
      loader: 'url-loader',
      exclude: /node_modules/,    // 注释此处
      options: {
        limit: 10000,
        name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
      }
    }