指南真简单教程 —— Vue项目及开发环境快速搭建

本文不涉及内容

Vue CLI是什么？

Webpack如何配置？

Node.js基础

ES6语法

搭建环境

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账户选择

至此，开发前准备工作告一段落，启动服务即可看到默认页面

启动服务