Vue学习01：开发环境搭建

Vue学习01：开发环境搭建

• 前言
• 操作步骤
• STEP 1. 下载安装Node.js
• 下载安装包
• 安装程序包
• 配置Node
• STEP 2. 下载安装 Visual Studio Code（VSCode）
• 下载安装包
• 安装程序包
• STEP 3. 配置 Visual Studio Code（VSCode）
• 语言包：安装简体中文语言包
• SVN客户端：下载安装SVN客户端小乌龟TortoiseSVN
• 下载安装包
• 安装程序包
• SVN插件：安装SVN扩展程序

---

Node + VSCode + Vue + WebPack + SVN

---

前言

作者 | 老衲也想有个后

作者虽是主攻JAVA开发，奈何本（领）人（导）太（逼）优（的）秀（紧），强行学习了一下Vue。其实对于Vue本身来说，作者本身有一定前端H5的经验，所以上手还是蛮快的。但是对于一个习惯于Eclipse和IDEA开发且没有接触过Node和Webpack的我来说，其开发环境的搭建，这也是我之前虽然看过Vue却没有上手Vue的一个最重要的原因。这一次是领导压下来必须得学了，所以在看了一遍前端同事帮我搭建好环境之后，作者回到家用周日半天时间在自己的本子上从头到尾重新搭建了一遍Vue的开发环境，并且呕心沥血写成了教程文章，以供小伙伴们跨界学习，共同交流。

操作步骤

STEP 1. 下载安装Node.js

下载安装包

下载地址：node.js中文网    http://nodejs.cn/download/根据操作系统选择安装包，本文以Windows为例，下载后得到安装文件：node-v12.16.2-x64.msi，如下图

---

安装程序包

1. 双击运行node-v12.16.2-x64.msi文件安装
   
2. 点击Next进入下一步
   
3. 同意协议，点击Next进入下一步
   
4. 修改安装目录，点击Next进入下一步
   
5. 选择好安装选项（图中为全部选中）后，点击Next进入下一步
   
6. 选择是否按照编译本机（原生）模块所需的工具，点击Next进入下一步，此处可暂不勾选。
   
7. 点击Install执行安装操作
   
8. 安装完成后，点击完成，安装结束。
   
9. 按下 Windows + R 输入 cmd 后回车，进入 cmd 。
   执行命令 node -v 查看 node 版本，如图表示 node 安装成功。
   执行命令 npm -v 查看 npm 版本，如图表示 npm 安装成功。
   

配置Node

设置node_global（全局文件夹）和node_cache（缓存文件夹） 如果没有设置全局目录node_global，那么全局安装的文件将会保存到 C:\Users\Administrator\AppData\Roaming\npm 文件夹内。所以，安装好node后，要设置一下node_global和node_cache两个文件夹。

1. 在node安装目录创建node_global和node_cache文件夹
   

2. 设置系统环境变量

   NODE_PATH=D:\Program Files\nodejs\node_modules
   
   在系统环境变量中追加一条nodejs安装目录 D:\Program Files\nodejs ，如果安装node时勾选了添加到Path则这一条在Node安装完成后就有了。
   

3. 按下 Windows + R 输入 cmd 后回车，进入 cmd。执行以下命令，设置全局文件夹和缓存文件夹。
   npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
   

4. 安装cnpm指向淘宝镜像
   npm install -g cnpm --registry=https://registry.npm.taobao.org
   
   或者直接修改 npm 的 registry 地址
   查看 npm 的 registry 地址： npm config get registry
   修改 npm 的 registry 地址： npm config set registry https://registry.npm.taobao.org
   还原 npm 的 registry 地址： npm config set registry https://registry.npmjs.org
   淘宝镜像地址：https://registry.npm.taobao.org
   原有镜像地址：https://registry.npmjs.org

5. 使用 cnpm 安装 webpack，webpack-cli，vue，vue-cli

   cnpm install webpack -g
cnpm install webpack-cli -g

cnpm install -g vue

cnpm install -g vue-cli

vue init webpack study

npm install

npm run dev
   
   按住Ctrl点击该链接或者在浏览器中打开该链接，就能访问了
   

STEP 2. 下载安装 Visual Studio Code（VSCode）

官网地址：https://code.visualstudio.com
下载地址：https://code.visualstudio.com/Download

下载安装包

进入 Visual Studio Code 官网，根据需求下载相应的安装包，本文以Windows 64位 为例，下载得到 VSCodeUserSetup-x64-1.44.2.exe 安装包文件。

---

安装程序包

1. 双击安装文件 VSCodeUserSetup-x64-1.44.2.exe
   
2. 勾选接受协议，进入下一步
   
3. 选择安装目录，进入下一步
   
4. 进入下一步
   
5. 勾选添加到PATH（环境变量），进入下一步
   
6. 执行安装
   
7. 安装完成
   

STEP 3. 配置 Visual Studio Code（VSCode）

语言包：安装简体中文语言包

1. 在扩展程序中搜索` language `，点击选择第一条如图中所示的中文简体语言包，查看插件详情，点击install确认安装插件。
   
2. 中文简体语言包安装完成后，显示如下图状态，且有提示需要重启编辑器Visual Studio Code才能启用该插件，点击Restart Now立即重启。
   
3. 重启完成后，可以发现，语言包插件已经启用。，如下图所示：
   

---

SVN客户端：下载安装SVN客户端小乌龟TortoiseSVN

下载地址：https://tortoisesvn.net/downloads.html

下载安装包

进入小乌龟官方下载页面，根据系统和需求下载相应的安装包，其下方还有提供各种语言包，根据需要下载对应得语言包。如图，下载完成后将会得到以下安装包文件 TortoiseSVN-1.13.1.28686-x64-svn-1.13.0.msi 以及 语言包文件 LanguagePack_1.13.1.28686-x64-zh_CN.msi

---

安装程序包

1. 双击TortoiseSVN-1.13.1.28686-x64-svn-1.13.0.msi进入安装程序；
   
2. 点击Next进入下一步；如果之前已经安装但未选择command line client tools时进入下图所示页面，选择Modify进入下一步；
   
3. 新装和重装（Modify）都进入到这个页面，选择安装选项（注意需要选择command line client tools），新装时可以选择安装目录，点击Next进入下一步；
   
   
4. 点击install，执行安装；
   
5. 如下图所示，安装成功。
   

---

SVN插件：安装SVN扩展程序

1. 选择扩展程序，搜索SVN，选择第一个SVN插件，注意看详情别选错了，点击安装。
   
2. 安装完成后，点击小齿轮，选择设置，在设置页搜索SVN，找到且点击“在settings.json中编辑”链接。
   
3. 在settings.json添加 “svn.path” 配置，值为事先安装好的SVN客户端工具小乌龟 TortoiseSVN 的 bin 目录，如果尚未安装小乌龟请看下一段小乌龟安装步骤，或者用其他客户端替代。
   
4. 打开有SVN元信息的文件夹，显示文件变更及其数量，安装且配置成功。
   
5. 点击图标进入源代码管理后，发现有变更文件及其修改状态和数量，具体操作与其他IDE或者小乌龟类似，不再赘述。