在已有vue项目中半途引入cube ui组件库的使用遇到的坑(血泪)

直接进入正题(我这儿是属于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组件库的使用已经成功解决。我弄这个的时候遇到太多坑，花费时间特别长，希望能够帮助到大家，如果这篇博文帮助了您，希望您可以鼓励一下我，帮我点个赞。您小小的点击将是我继续学习下去的强大动力，谢谢。