cube-ui普通編譯實踐

實踐場景(在老的項目添加cube-ui)

1. 查看vue-cli版本

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

1. 添加cube-ui依賴

npm install cube-ui -S

1. 修改 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"]
      }
    }
   }
  ]

1. 修改 webpack 配置

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

1. 按需加載

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

  Vue.use(DatePicker) // 全局註冊

1. 常見報錯及解決辦法

//  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]')
      }
    }