直接进入正题(我这儿是属于cube-ui普通编译)
1,在你的vue项目中找到package.json文件安装cube-ui
终端输入命令 npm install cube-ui --save
2,接着继续再package.json文件中安装两个依赖项
两种方法安装,一种在终端输入命令行安装
另一种可以在图下(如红框内容)输入要安装依赖项和版本信息,然后再终端输入 yarn 命令 安装
3,继续在package.json文件文件中添加如下代码
"transformModules": {"cube-ui": {"transform": "cube-ui/lib/${member}","kebabCase": true,"style": {"ignore": ["create-api", "better-scroll", "locale"]}}},
4,(注意重点)
因为使用Vue-cli 4.x的vue create ProjectName创建的项目和之前创建的不同,没有了build文件夹,要自己在根目录下(即直接在项目下创建)新建一个vue.config.js文件来进行webpack相关的配置。如下图
代码如下,可以复制
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'}}},}
5,在你的vue项目中找到main.js文件,把你的cube-ui组件import进来并使用
6,在你的vue项目找一个页面进行测试,如下图(我这儿是Home.vue)
代码如下
<cube-button @click="showDialog">show dialog</cube-button>showDialog() {this.$createDialog({type: 'alert',title: 'Alert',content: 'dialog content'}).show()},
7,运行你的项目到浏览器,查看结果
到此为止,vue项目中半途引入cube-ui组件库的使用已经成功解决。我弄这个的时候遇到太多坑,花费时间特别长,希望能够帮助到大家,如果这篇博文帮助了您,希望您可以鼓励一下我,帮我点个赞。您小小的点击将是我继续学习下去的强大动力,谢谢。