【vue】滴滴cube-ui 簡化安裝
cube-ui 是滴滴公司的技術團隊基於 Vue.js 實現的精緻移動端元件庫。我主要是想使用它的upload和recyclelist！
（1）首先建立一個vue專案
vue init webpack my-project
cd my-project
npm install
（2） 安裝cube-ui
npm install cube-ui -S
（3）官方推薦使用外掛babel-plugin-transform-modules，因為有時候需要對ES6新的物件，對舊有專案轉義相容，需要babel-polyfill，recycleList就需要
npm install babel-plugin-transform-modules -D
（4）然後配置下這個外掛，修改 .babelrc：(新增到plugins中去)
{
"plugins": [
["transform-modules", {
"cube-ui": {
"transform": "cube-ui/lib/${member}",
"kebabCase": true,
"style": {
"ignore": ["create-api", "better-scroll"]
}
}
}]
]
}
//插入配置後全部內容展示：
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
["transform-modules", {
"cube-ui": {
"transform": "cube-ui/lib/${member}",
"kebabCase": true,
"style": {
"ignore": ["create-api", "better-scroll"]
}
}
}]
],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "istanbul"]
}
}
}
（5）引入：建議全部引入
如果想要區域性引入，見下方官網：
一般在入口檔案main.js中，如果要按需引入可以檢視官網：
import Vue from 'vue'
import Cube from 'cube-ui' // 一般直接放在這個位置
Vue.use(Cube)
全部引入了後就相當於全域性註冊了，直接用就可以了。不需要在每個.vue檔案中import { … }（區域性引用），以及components{ … }區域性註冊了。
（6）不使用後編譯的情況
後編譯概念：後編譯指的是應用依賴的 NPM 包並不需要在釋出前編譯，而是隨著應用編譯打包的時候一塊編譯。
注意： cube-ui 搭配 webpack 2+ 預設就會使用後編譯，但是後編譯需要有一些依賴以及配置（參見本頁最後）；如果不想使用後編譯的話，可以直接修改 webpack 配置即可：
// webpack.config.js
module.exports = {
// ...
resolve: {
// ...
alias: {
// ...
'cube-ui': 'cube-ui/lib'
// ...
}
// ...
}
// ...
}
使用後編譯見下方官網：
POST：https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start
現在可以使用cube-ui了