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