vue单组件测试执行安装命令npm install -g @vue/cli-service-global中遇到的问题

vue单个组件测试

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

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

通过官知道,可以使用 vue servevue 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

属实是没想到,然后我就去它说的文件中寻找错误,结果翻过来覆过去说什么也没找到能报语法错误的地方,毕竟这个代码我在之前的入口文件中已经测试过没有问题了,这就奇怪了,搜集了一些文章博客,发现npmless和它的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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习编程?其实不难,不过在学习编程之前你得先了解你的目的是什么?这个很重要,因为目的决定你的发展方向、决定你的发展速度。
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等,根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生学习Java开发,但要结合自身的情况,先了解自己适不适合去学习Java,不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研,多看、多想、多练
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服务器有时候会断掉,所以写个shell脚本每五分钟去判断是否连接,于是就有下面的shell脚本。
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
假如你已经使用过苹果开发者中心上架app,你肯定知道在苹果开发者中心的web界面,无法直接提交ipa文件,而是需要使用第三方工具,将ipa文件上传到构建版本,开...
下面的 SQL 语句指定了两个别名,一个是 name 列的别名,一个是 country 列的别名。**提示:**如果列名称包含空格,要求使用双引号或方括号:
在使用H5混合开发的app打包后,需要将ipa文件上传到appstore进行发布,就需要去苹果开发者中心进行发布。​
+----+--------------+---------------------------+-------+---------+
数组的声明并不是声明一个个单独的变量,比如 number0、number1、...、number99,而是声明一个数组变量,比如 numbers,然后使用 nu...
第一步:到appuploader官网下载辅助工具和iCloud驱动,使用前面创建的AppID登录。
如需删除表中的列,请使用下面的语法(请注意,某些数据库系统不允许这种在数据库表中删除列的方式):
前不久在制作win11pe,制作了一版,1.26GB,太大了,不满意,想再裁剪下,发现这次dism mount正常,commit或discard巨慢,以前都很快...
赛门铁克各个版本概览:https://knowledge.broadcom.com/external/article?legacyId=tech163829
实测Python 3.6.6用pip 21.3.1,再高就报错了,Python 3.10.7用pip 22.3.1是可以的
Broadcom Corporation (博通公司,股票代号AVGO)是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
发现个问题,server2016上安装了c4d这些版本,低版本的正常显示窗格,但红色圈出的高版本c4d打开后不显示窗格,
TAT:https://cloud.tencent.com/document/product/1340