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);