之前一直采用 VS 进行各种前端后端的开发，随着项目的需要，正逐步融合纯前端的开发模式，开始主要选型为 Vue + Element 进行 BS 前端的开发，后续会进一步整合 Vue + AntDesign 的界面套件，作为两种不同界面框架的展现方式。采用 Vue + Element 的前端开发和之前的开发模式需要有较大的转变，以及需要接触更多的相关知识，本系列随笔基于循序渐进的学习研究方式，对使用 Vue + Element 这种前端开发的各个方面进行一个完整的介绍，并结合我对 BS 前端已有的框架功能，进行两者的融合。本篇随笔主要介绍开发环境的准备工作，包括需要准备好相关的开发工具，插件辅助等，以及对开发保存的自动修正处理，调试的配置的内容等。

1、开发所需的软件环境

有别于之前的 Asp.net 的开发，纯前端的开发，一般不会再采用笨重的 VS 进行前端的开发，而改用 VS Code 或者 WebStorm 等轻型的开发工具来进行前端代码的开发和维护，虽然是轻型开发工具，不过功能也是非常强大的，而且开发环境可以在 Windows 系统，也可以在 Mac 系统等，实现多平台的开发环境。

1）VS code 的安装

VS Code（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器。几乎完美的编辑器。

官网：https://code.visualstudio.com

文档：https://code.visualstudio.com/docs

源码：https://github.com/Microsoft/vscode

VS Code 的界面大概如下所示，一般安装后，如果为英文界面，则安装它的中文包即可。

VS Code 安装后，我们一般还需要搜索安装一些所需要的插件辅助开发。安装插件很简单，在搜索面板中查找到后，直接安装即可。

 一般我们需要安装这些 vs code 插件:

Vetur  

Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode 官方钦定 Vue 插件，Vue 开发者必备。

ESLint 

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

而 VSCode 中的 ESLint 插件就直接将 ESLint 的功能集成好，安装后即可使用，对于代码格式与规范的细节还可以自定义，并且一个团队可以共享同一个配置文件，这样一个团队所有人写出的代码就可以使用同一个代码规范，在代码签入前每个人可以完成自己的代码规范检查。

VS Code - Debugger for Chrome  结合 Chrome 进行调试的插件

此工具简直就是前端开发必备，将大大地改变你的开发与调试模式。

以往的前端调试，主要是 JavaScript 调试，你需要在 Chrome 的控制台中找到对应代码的部分，添加上断点，然后在 Chrome 的控制台中单步调试并在其中查看值的变化。

而在使用了 Debugger for Chrome 后，当代码在 Chrome 中运行后，你可以直接在 VSCode 中加上断点，点击运行后，Chrome 中的页面继续运行，执行到你在 VSCode 中添加的断点后，你可以直接在 VSCode 中进行单步调试。

Beautify

Beautify 插件可以快速格式化你的代码格式，让你在编写代码时杂乱的代码结构瞬间变得非常规整，代码强迫症必备，较好的代码格式在后期维护以及他人阅读时都会有很多的便利。

2) 安装 node 开发环境

利用 VS Code 开发，我们很多时候，需要使用命令行 npm 进行相关模块的安装，这些需要 node 环境的支持，安装好 node 后，npm 也就一起安装好了。

node 下载：https://nodejs.org/en/

安装后，我们可以通过命令行或者 VS Code 里面的 Shell 进行查看 node 和 npm 的版本号了

node -v

npm -v

3）vue 脚手架的安装

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

全局安装：npm install vue-cli -g （全局卸载：npm uninstall vue-cli -g）

4）Vue DevTool Chrome 插件的安装

这个插件也是开发 Vue 必备的 Chrome 插件，一般没有外网，不能直接在 Chrome 的插件官网上进行安装，而通过 GitHub 下载进行编译在安装又显得太过麻烦，后来在一个网站上下载安装成功。

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

2、开发环境的配置使用

对于 Vetur 等代码自动修正处理，我们需要在 VS Code 里面进行设置好，在【文件】【首选项】【设置】中，然后单击 Settings.json 进行编辑即可。

我这里主要设置保存代码后能够对代码进行缩进排版的常规的处理

调试环境的处理，为了结合 Chrome 调试 VScode，我们需要安装插件 Debugger for Chrome ，然后进行 Vue 项目代码的设置处理即可。

打开项目根目录的 Vue.Config.js 文件，在合适的位置，加入 productionSourceMap: true 以及 devtool: 'source-map'  如下所示

然后再在运行面板里面，进行调试参数设置的处理，如下所示 

 指定这些设置后，我们就可以以调试模式进行调试 VS Code 里面的代码了，代码只需要设置对应的断点即可跟踪对象的数据。

调试前，记得先使用 npm run dev 启动项目，项目完全启动后会在 Chrome 浏览器打开项目地址，再使用 F5 进行项目代码的调试。

Vue DevTools 也是用来跟踪 Vue 项目路由、状态等信息的，可以信息很好的跟踪处理。

为了点亮 Chrome 浏览器上面 Vue DevTools 图标，我们可以在 Vue 项目的 main.js 里面加入一行代码。

 

 

 这篇随笔作为一个简单的开篇，主要介绍 VS Code 环境的安装，以及对应插件的配置，并联合 Chrome 如何实现项目代码的调试处理。

为了方便读者理解，我列出一下前面几篇随笔的连接，供参考：

循序渐进 VUE+Element 前端应用开发 (1）--- 开发环境的准备工作

循序渐进 VUE+Element 前端应用开发 (2）--- Vuex 中的 API、Store 和 View 的使用

循序渐进 VUE+Element 前端应用开发 (3）--- 动态菜单和路由的关联处理

循序渐进 VUE+Element 前端应用开发 (4）--- 获取后端数据及产品信息页面的处理

循序渐进 VUE+Element 前端应用开发 (5）--- 表格列表页面的查询，列表展示和字段转义处理

循序渐进 VUE+Element 前端应用开发 (6）--- 常规 Element 界面组件的使用

循序渐进 VUE+Element 前端应用开发 (7）--- 介绍一些常规的 JS 处理函数

循序渐进 VUE+Element 前端应用开发 (8）--- 树列表组件的使用

循序渐进 VUE+Element 前端应用开发 (9）--- 界面语言国际化的处理

循序渐进 VUE+Element 前端应用开发 (10）--- 基于 vue-echarts 处理各种图表展示 

循序渐进 VUE+Element 前端应用开发 (11）--- 图标的维护和使用

循序渐进 VUE+Element 前端应用开发 (12）--- 整合 ABP 框架的前端登录处理

循序渐进 VUE+Element 前端应用开发 (13）--- 前端 API 接口的封装处理

循序渐进 VUE+Element 前端应用开发 (14）--- 根据 ABP 后端接口实现前端界面展示

循序渐进 VUE+Element 前端应用开发 (15）--- 用户管理模块的处理

循序渐进 VUE+Element 前端应用开发 (16）--- 组织机构和角色管理模块的处理 

循序渐进 VUE+Element 前端应用开发 (17）--- 菜单管理

循序渐进 VUE+Element 前端应用开发 (18）--- 功能点管理及权限控制  

VUE+Element 前端应用开发框架功能介绍 

循序渐进 VUE+Element 前端应用开发 (19）--- 后端查询接口和 Vue 前端的整合

使用代码生成工具快速生成基于 ABP 框架的 Vue+Element 的前端界面

循序渐进 VUE+Element 前端应用开发 (20）--- 使用组件封装简化界面代码

循序渐进 VUE+Element 前端应用开发 (21）--- 省市区县联动处理的组件使用

循序渐进 VUE+Element 前端应用开发 (22）--- 简化 main.js 处理代码，抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中

循序渐进 VUE+Element 前端应用开发 (23）--- 基于 ABP 实现前后端的附件上传，图片或者附件展示管理 

循序渐进 VUE+Element 前端应用开发 (24）--- 修改密码的前端界面和 ABP 后端设置处理

循序渐进 VUE+Element 前端应用开发 (25）--- 各种界面组件的使用（1）

循序渐进 VUE+Element 前端应用开发 (26）--- 各种界面组件的使用（2）

电商商品数据库的设计和功能界面的处理 

循序渐进 VUE+Element 前端应用开发 (27）--- 数据表的动态表单设计和数据存储

循序渐进 VUE+Element 前端应用开发 (28）--- 附件内容的管理 

循序渐进 VUE+Element 前端应用开发 (29）--- 高级查询条件的界面设计

部署基于.netcore5.0 的 ABP 框架后台 Api 服务端，以及使用 Nginx 部署 Vue+Element 前端应用

循序渐进 VUE+Element 前端应用开发 (30）--- ABP 后端和 Vue+Element 前端结合的分页排序处理 

循序渐进 VUE+Element 前端应用开发 (31）--- 系统的日志管理，包括登录日志、接口访问日志、实体变化历史日志

循序渐进 VUE+Element 前端应用开发 (32）--- 手机短信动态码登陆处理 

循序渐进 VUE+Element 前端应用开发 (33）--- 邮件参数配置和模板邮件发送处理 

使用代码生成工具快速开发 ABP 框架项目 

使用 Vue-TreeSelect 组件实现公司 - 部门 - 人员级联下拉列表的处理 

使用 Vue-TreeSelect 组件的时候，用 watch 变量方式解决弹出编辑对话框界面无法触发更新的问题