使用vscode的小伙伴，先推荐几个常用的插件

vetur

这个是vuejs官方团队的一名成员写的有关vuejs语法的插件，它是用来支持vscode创建.vue文件的插件

Vue VSCode Snippets

用于快捷生成系统或自定义的代码段

ESlint

javascript代码检测工具，可以配置每次保存时格式化js

Prettier-Code formatter

只关注格式化，并不具有eslint检查语法等能力，只关心格式化文件(最大长度、混合标签和空格、引用样式等)，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown

vue-cli

安装nodejs

注意：下载前请先查看电脑系统位数为32位或64位，根据具体配置选择对应的安装版本 查看⽅法进⼊官⽹进⾏下载地址 nodejs配置教程可参考 Node.js安装及环境配置之Windows篇

用vue的cli创建项目的一些常用指令

vue-cli官方地址 vue-cli

cnpm 安装

通过npm安装模块时都是去国外的镜像下载的，有的时候由于⽹络原因会导致安装模块失败，好在阿⾥cnpm⾯有使⽤说明

安装命令：npm install -g cnpm --registry=registry.npm.taobao.org

查看版本：cnpm -v

安装vue-cli：npm install -g @vue/cli 或 npm install -g @vue/cli-services-global

创建项目：vue create 项⽬名

cd 项⽬名

查看vue使用文档:vue

运行项目：npm run serve / yarn serve

打包文件：npm run build / yarn build

代码检查：npm run lint / yarn lint

vue的可视化: vue ui

vue安装插件：vue add [pluginName] 如：vue add @vue/eslint

vue单元测试

测试插件jest

安装jest：npm i jest -D / yarn add jest --dev

测试文件均创建在/tests/目录下，文件名必须是[name].spec.js或[name].test.js

单元测试原则

jest使用文档使用文档

测试vue组件的插件vtu（vue-test-utils）

在已创建项目中安装插件指令： vue add @vue/unit-jest

运行测试指令：yarn test:unit 使用yarn test:unit --watch 可以在修改代码保存后自动重新执行测试

一个简单的jest测试脚本案例

在jest中，当我们需要测试一个组件内视图更新后的结果或一些input等dom元素内容变化后的结果时，需要用到jest的异步功能，通过asyn和await实现异步等待功能

当需要测试的组件视图中带有来自外部请求数据，如访问后端接口数据时，同样需要用到异步测试，这其中需要用到一个新的插件叫flush-promises，g作用是将所有的promise的行为设置成一个resolve

flush-promises的安装指令：npm i flush-promises