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