本文不涉及内容
搭建环境
Windows10 / VSCode / Vue CLI 4.x / NodeJS 14.x
准备工作
1. 安装NodeJS
https://nodejs.org/
2. cmd指令，更新npm源（可选）
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
3. cmd指令，安装vue cli （https://cli.vuejs.org/zh/guide/installation.html）
npm install -g @vue/cli
4. cmd指令，安装eslint
npm install eslint --global
创建项目
你可以选择UI或者CLI方式来创建项目
CLI
定位到准备创建项目的目录，并在cmd中输入
vue create 项目名
选择vue版本
之后根据提示直到创建完成。
UI
在cmd中输入
vue ui
即可打开项目管理界面
项目管理
相比CLI方式，UI界面可以更容易的进行额外配置，比如插件
插件管理页
此时，一个空项目已经建成。在默认配置的情况下，你的目录应该是这样
初始化目录结构
下面开始项目搭建的最后一步，也是开发前的第一步
配置开发环境
首先用VSCode打开项目folder
初次打开项目
em...惨白+提示，.vue文件无法解析，我们缺少基础插件。根据提示，安装Vetur
Vetur
切回刚才的.vue文件，我们可以看到语法高亮已经正常显示
高亮显示但格式编码混乱
代码中至少存在引号不统一，分号不统一，括号不统一以及vue模板格式不推荐等问题，作为开发基础的编码标准一定要有高效便捷的方式达成 —— ESLint
在插件市场中搜索eslint，第一个标星推荐的就是
安装eslint
切回刚才的.vue文件，可以看到eslint已经生效
eslint默认规则
但默认规则对于统一编码样式几乎是无用的，我们需要更具体的规则。定制规则可以通过vue-ui或者eslint CLI或者手动方式在项目根目录增加 .eslintrc 文件，比如使用google标准
eslint init
根据项目应用的lint级别初始化eslint，然后会得到一个eslint文件
.eslintrc文件
如果使用google代码lint，你需要额外安装一些npm依赖包，包括
package.json
可直接修改package.json文件，在依赖中加入缺少的包，然后npm install安装。
注意，默认的eslint版本较低，无法实现es2021的环境检查。
安装完成后，重启VSCode就可以看到之前的代码满目疮痍
严格检测下的问题显示
可以点击Quick Fix中的自动修复来解决大部分的问题
自动修复
但更高效的操作方式是当你Ctrl+S时，自动修复。可以通过修改VSCode中的配置来实现该特性。
选择【设置】->【插件】->【eslint】编辑settings.json
settings1
settings2
在文件中加入以下代码即可
保存时修复eslint问题
以及 "editor.formatOnSave": true,
现在你可以写出漂亮且符合规范推荐的代码了，下一步我们来看看代码管理的问题——git。
VSCode自带git管理工具，而且足够强大
集成git环境
VSCode默认使用全局git账号进行操作，如果你有超过1个git账号需要切换使用时，你需要一些额外设置。这里我使用了 “Git Config User Profiles” 插件
git账号管理插件
该工具可以为不同的项目设置不同的git账户
多git账户选择
至此，开发前准备工作告一段落，启动服务即可看到默认页面
启动服务
网友评论