vue使用cube-ui（滴滴ui組件）

官方文檔：https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start

根據文檔我們要下載並按裝相關的依賴，我們一步一步來

 

1.打開終端運行：

npm install cube-ui --save

2.在package.json中的devDependencies下輸入要安裝依賴項和版本信息，執行npm i就可以自動下載相關的依賴文件

3.然后在package.json中的輸入以下代碼

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

4.我們要在build/utils.js里添加相關的配置，但因為我們現在大多使用的腳手架版本是4.0（Vue-cli）版本，沒有這個文件，所以我們直接在項目的根目錄(自己的項目下)下創建一個vue.config.js的文件

 

 然后在這個js里直接配置相關代碼

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

module.exports = {
    configureWebpack: {
        plugins: [
            new PostCompilePlugin(),
            new TransformModulesPlugin()
        ],
        resolve: {
            alias: {
                'cube-ui': 'cube-ui/lib'
            }
        }
    },
}

 

 隨便我們先運行看有沒有報錯，如果報這個錯誤

 

 如果有請轉跳這篇文章
https://www.cnblogs.com/whenwei123/p/15897518.html

如果沒有報錯這里我們就可以直接在main.js里引用了，這里我使用全部引用

 

注意這個css一定要引用 ，不知道為什么我引入了組件，不引用這個樣式，組件沒有樣式

import "cube-ui/lib/cube.min.css";
import Cube from "cube-ui";

Vue.use(Cube);