vue单个组件测试

我们每次使用一个组件的时候如果要对其效果进行测试，需要每次都在入口文件中导入模块，而且每换一个组件都需要将原来的代码删除，会极其的不方便，因此vue/cli脚手架工具提供给了我们一个非常好用的原型开发工具命令vue serve

官方网站 : https://cli.vuejs.org/zh/guide/prototyping.html

通过官知道，可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展

npm install -g @vue/cli-service-global

vue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。接下来就可以使用vue serve ./path命令进行单个组件的测试效果

第一次安装的时候，安装失败了，在网上搜了一些资料，发现是我的vue/cli版本太高了，需要将vue/cli的版本控制在4.5.13这一段的范围，于是可以采用命令

npm uninstall -g @vue/cli

卸载原先安装的高版本vue/cli，然后运行命令

npm install -g @vue/cli@4.5

安装该版本的脚手架工具，接下来使用命令

vue serve ./src/components/Pager/test.vue

本以为已经可以对组件Pager进行测试开发了，结果没想到竟然给我报了一个语法的错误：

ERROR Failed to compile with 1 error 17:52:19
error in ./src/components/Pager/index.vuevue&type=style&index=0&id=63726af4&scoped=true&lang=less&
Syntax Error: TypeError: this.getOptions is not a function

属实是没想到，然后我就去它说的文件中寻找错误，结果翻过来覆过去说什么也没找到能报语法错误的地方，毕竟这个代码我在之前的入口文件中已经测试过没有问题了，这就奇怪了，搜集了一些文章博客，发现npm、less和它的less-loader编译器之间还有一些版本依赖的关系

于是查看了一下我的版本

npm list

确实这两个版本差别很大，于是先卸载两个包

 npm uninstall less less-loader

再重新安装版本依赖强烈的包

npm install less@3.11.1 less-loader@5

这样就匹配很多啦

vue serve ./src/components/Pager/test.vue

接着就报出了下列错误

Invalid options in vue.config.js: child “transpileDependencies” fails because
[“transpileDependencies” must be an array]

原先vue.config.js文件中的代码如下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true
})

但是这里产生了上述错误，具体原因可能是因为，在使用vue时，node_modules里面的文件不会经过babel再编译一遍，所有有些库里使用了const之类的es6属性，而且这些库在打包的是也没有考虑兼容ie，比如常用的swiper。所以最后导致项目在ie中会报错，产生transpileDependencies无效的错误。

在网上查了一番以后发现，可以指定一个库在打包的时候需要编译，使用transpileDependencies这个属性
在vue.config.js中配置

但是我这个工程配置中并没有swiper，仅仅是一个bool值，因此报错只是需要一个数组，是什么其实无所谓，于是将代码修改为

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: [true]  // 或者['swiper']
})

即可解决该问题

最终便可以运行单个组件了，这样以后在测试组件的时候就不用麻烦入口文件啦

可是每次还要输入一长串测试路径命令，岂不还是很麻烦？于是我们可以配置一下package.josn脚本

{
  "name": "my-codes",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:Pager": "vue serve ./src/components/Pager/test.vue",
    "test:Avatar": "vue serve ./src/components/Avatar/test.vue",
    "test:Icon": "vue serve ./src/components/Icon/test.vue"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

下面只需要运行命令

npm run test:Pager

npm run test:Avatar

npm run test:Icon

即可测试不同的组件效果啦