前提

已安装 Vue 脚手架

1

npm install -g @vue/cli

现象

找不到 vue-cli-service 命令

1

'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.

经过搜索，发现这个问题只在 Windows 下存在。

装了脚手架应该会在 node 目录产生 vue-cli-service.cmd 的文件，实际没有产生，不过在全局 node_modules 下是有的。

有说清理 node_modules 重新安装可以解决的，试了不管用，全局卸载脚手架重新安装也不管用，就算管用也比较麻烦，于是我找到了几个间接使用方法——

对一个有国际化的 Vue 组件写单元测试，mount这个组件时，会遇到找不到 $t 的报错。

1

<p>{{ $t('message.hello' }}</p>

1

TypeError: _vm.$t is not a function

添加一个参数

当前 URL：http://localhost/home?keyword=example

1

this.$router.replace({ query: { ...this.$route.query, code: '1' } })

最终 URL：http://localhost/home?keyword=example&code=1

删除一个参数

我所使用的 Vue Router 版本为 3.0.3，删除参数比较麻烦。

当前 URL：http://localhost/home?keyword=example&code=1

1
2

delete this.$route.query.code
this.$router.replace({ query: this.$route.query }) // 地址栏无反应

1
2
3
4

let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝
delete newQuery.code
// 如果有引入 lodash, 可以写成: let newQuery = _.omit(this.$route.query, 'code')
this.$router.replace({ query: newQuery })

最终 URL：http://localhost/home?keyword=example

在 Github 上面搜索 “lottery”，发现类似的项目挺多的，有 Electron 实现的，可以打包成 exe，也有原生 js 实现的，浏览器打开。

这次是用 Vue 做了一个编号抽奖，一个转盘抽奖，放在一起，练手。

预览：http://lottery.imaegoo.com/

在 Visual Studio 中可以使用 Alt + Shift + F10 来自动导包，在 VS Code 中怎么操作呢？

快捷键是 Ctrl + .（句点）。

坑：必须在英文状态下按快捷键才能起作用。