1 开发工具

使用VS Code作为开发工具，下载地址：

https://code.visualstudio.com/Download

2 VS code 插件添加

 

Auto Close Tag 提供自动关闭html标签的功能

Auto Rename Tag 提供修改html标签时自动修改上下标签的功能

ESLint 强大的纠错插件

open in browser 可以使你在浏览器中预览界面

vscode-icons 用于美化VS Code图标

Vue-Offical 用于支持Vue语法高亮

3 Node.js 安装

下载到本地即可，同时会安装npm包管理器，安装完需要设置环境变量：

创建系统环境变量NODE_PATH，对应的值为你的Node.js的安装路径：

在用户变量的path中添加一个：

保存即可

测试是否安装成功：

打开cmd，输入npm -version，若成功输出版本号则为安装成功：

为了将npm换成国内的镜像源，需要设置如下：

npm set registry https://registry.npmmirror.com

npm install -g cnpm --registry=https://registry.npmmirror.com

以后需要用npm install的时候改用cnpm即可

4 Vue脚手架安装

在cmd中使用cnpm命令：

cnpm install -g @vue/cli

测试安装是否成功：

vue -V

若输出版本号，则安装成功：

可以在命令行中输入如下命令，打开vue的ui界面：

vue ui

在“创建”界面，点击下方的“在此创建新项目”按钮，即可开始创建Vue项目

输入项目文件夹后点击“下一步”：

第一次使用可以选择“手动配置项目”，点击“下一步”：

选择这三个功能

点击“下一步”，进入“配置”，按照下图选择，其中vue版本可以选择2.x也可以选择3.x：

点击创建项目，可以选择创建一个预设名，将此次的设置保存下来，下一次创建Vue项目时可以重复利用：

创建完项目会进入仪表盘：

点击左侧的“任务”：

点击“运行”，然后点击“启动app”：

若自动打开了此网页，则项目创建成功：

5  项目导入VS Code

在VS Code中打开创建的Vue项目

在终端输入以下命令，运行应用：

npm run serve

在浏览器打开该网址，即可启动。

若要结束运行，在终端中，按下Ctrl + C，会显示下面提示，输入y

则运行终止。