VSCode配置启动Vue项目

安装node.js

• 直接官网首页下载安装，根据默认选项，一路下一步即可

• 运行 node -v 和 npm -v ，如果都正常，表示node.js安装成

安装cnpm （摘自此处）

• npm install -g cnpm --registry=https://registry.npm.taobao.org
  （部分Mac或者Linux系统提示文件夹没权限，在命令前加sudo）
• 安装完成后运行cnpm -v，正常输出则表示安装成功
• 重启电脑，保证环境变量生效（可选）

安装vue-cli

cnpm install -g @vue/cli

VSCode 安装

官方下载地址,根据默认选项，一路下一步即可

VSCode Vue插件安装 （摘自此处）

VSCode安装好后，点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展，搜索以下插件并根据具体使用选择安装（建议至少安装Vetur）

插件名称	插件描述
Vetur	语法高亮、智能感知、Emmet等。包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
EsLint	- 语法纠错
Debugger for Chrome	映射vscode上的断点到chrome上，方便调试
Auto Close Tag	自动闭合HTML/XML标签
Auto Rename Tag	自动完成另一侧标签的同步修改
JavaScript(ES6) code snippets	ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间
Path Intellisense	自动路径补全
HTML CSS Support	让 html 标签上写class 智能提示当前项目所支持的样式
Beautify	格式化代码，值得注意的是，beautify插件支持自定义格式化代码规则
Bracket Pair Colorizer	给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
open in browser	直接右键项目单击启动

启动Vue项目

• 打开vsCode，点击 ‘Open folder…’，打开mycat-web-front目录
• 使用快捷键打开Terminal, ‘Ctrl+单引号’
• 执行安装打包命令：cnpm install
• 执行启动命令：cnpm run dev

调试Vue项目(摘自此处)

需通过 vscode 安装调试插件：Debugger for Chrome

• 安装完成并重新加载 vscode 后，可以直接点击调试按钮并创建新的启动配置。如果你之前已经创建过启动配置了，就可以直接打开 .vscode/launch.json 进行修改
  

• 其中调试 Chrome 页面的配置如下所示：

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
	//url 为 cnpm run dev 之后提示的地址
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8081",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

注：涉及到快捷键的操作mac系统需将Ctrl改成Command