VSCode 安装、配置vue工程

链接：https://pan.baidu.com/s/11DCDDPQcYlafzl75Eugu5Q
提取码：ijd0

一键式傻瓜安装后配置中文

1. 按照下图中红色箭头指示位置点击步骤1指向，然后在弹出的搜索框中输入Chinese，然后选择【Chinese （Simplified）Language Pack for Visual Studio Code】，然后点击右侧的【Install】，如下图：

   将VSCode设置成中文语言环境

2. 安装好中文语言包之后软件会提示重启VSCode，点击【Yes】重启VSCode软件，如下图：

   将VSCode设置成中文语言环境

3. 重启VSCode软件之后就会看到我们熟悉的中文语言环境界面了，如下图：

   将VSCode设置成中文语言环境

配置并创建vue工程

1. 打开菜单栏中的文件->选择文件夹，浏览到本地磁盘中某个vue项目的空白目录，如下图所示：

   图解使用Visual Studio Code创建和运行Vue项目

2. 在资源管理器空白处右键选择“在终端中打开”，如下图所示：

   图解使用Visual Studio Code创建和运行Vue项目

3. 我们在终端中输入以下命令
   npm install vue -g
   如下图所示：

   图解使用Visual Studio Code创建和运行Vue项目

4. 继续在终端中输入以下命令
   npm install vue-cli -g
   如下图所示：

   图解使用Visual Studio Code创建和运行Vue项目

5. 继续在终端中输入以下命令
   npm install webpack -g
   如下图所示：

   图解使用Visual Studio Code创建和运行Vue项目

6. 我们输入以下命令来创建一个项目
   vue init webpack my-first-vue-project
   如下图所示：

   图解使用Visual Studio Code创建和运行Vue项目

7. 通过cd命令进入到创建的项目目录下，然后输入命令
   npm install
   如下图所示：

   图解使用Visual Studio Code创建和运行Vue项目

8. 项目创建完成后的目录结构如下图所示：

   图解使用Visual Studio Code创建和运行Vue项目

9. 输入命令
   npm run dev
   来运行vue项目，成功之后会提示应用程序访问的路径，如下图所示：

   图解使用Visual Studio Code创建和运行Vue项目

10. 我们在浏览器中输入地址，即可访问vue的项目了，如下图所示：

图解使用Visual Studio Code创建和运行Vue项目