1、基本概念

1.1 VSCode

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux。

1.2 Vue

2、Node.js安装

Node.js下载地址： 安装完成之后，打开控制台，输入node -v和npm -v测试下是否安装成功！

3、环境配置

首先配置npm全局模块的存放路径以及cache的路径，例如我希望将以上两个文件夹放在Node.js的主目录下，便在Node.js下新建"node_global"及"node_cache"两个文件夹。 打开控制台，输入以下所示命令：

npm config set prefix “E:JavaNode odejs ode_global” npm config set cache “E:JavaNode odejs ode_cache”

最后配置环境变量即可！

4、使用淘宝镜像（可选）

npm因为网络原因，下载是会很慢，所以更换为淘宝源，cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。

npm config set registry https://registry.npm.taobao.org

5、安装vue-cli脚手架

用于自动生成Vue.js + webpack的项目模板

npm install --global vue-cli

6、VScode软件安装

VScode下载地址： 下载完成之后一直next就行，注意这里需要勾选掉不要！ 汉化中文：（官方下载默认为英文，英文好的小伙伴可直接跳过这步） 点击插件按钮搜索Chinese, 在弹出的选项中选择第一个中文简体。 然后右边会弹出如下图安装界面，接着点击 Install 安装！ 安装完毕后会有如下提示（主要提醒你安装完中文简体汉化包后一定要重启方可生效） 另外还需要安装Vetur插件，主要是针对Vue的语法支持。

7、使用VScode并搭建Vue项目

打开VScode终端控制台输入以下命令创建项目

vue init webpack demo-project（项目名自定义）

如果出现下图所示报错 解决方案：本机搜索PowerShell后以管理员身份运行，输入下图所示命令再重新创建项目就ok了 接下来依次选择回车构建 再使用命令下载配置资源并启动

npm install npm run dev

最后浏览器访问：http://localhost:8080（完结告辞~）