第02讲 前端项目工具安装及环境搭建
1.1、开发工具:visual studio code
1.1、visual studio code 官网下载地址
https://code.visualstudio.com/
1.2、打开官网,如下所示,根据自己电脑的系统,下载对应的vs code版本
![a1a67c0601fa922ec651507b9257b284.png](https://img-blog.csdnimg.cn/img_convert/a1a67c0601fa922ec651507b9257b284.png)
1.3、下载完成后,点击安装,一直 next,到最后安装完成即可;
1.2、依赖环境
1.2.1、Node.js 安装
中文官网下载地址 https://nodejs.org/zh-cn/download/
1.2.2、到官网下载对应系统下的node.js安装,要求至少8.0以上的版本
1.2.3、https://nodejs.org/download/release/v10.16.0/ 下载 node-v10.16.0-x64.msi 版本,下载后一直next,直到安装完成
![10576f845d23e28943c27c0c0ff88558.png](https://img-blog.csdnimg.cn/img_convert/10576f845d23e28943c27c0c0ff88558.png)
![18b5dcd8ac9d4cdde176b6b7f236641e.png](https://img-blog.csdnimg.cn/img_convert/18b5dcd8ac9d4cdde176b6b7f236641e.png)
![ede0a1ba6f0fe63b5aa98b9e66d2772a.png](https://img-blog.csdnimg.cn/img_convert/ede0a1ba6f0fe63b5aa98b9e66d2772a.png)
![9c648e30701200cdad7d733e4cc752c2.png](https://img-blog.csdnimg.cn/img_convert/9c648e30701200cdad7d733e4cc752c2.png)
![a7ce15b60a2db5c8a331469de2e9da12.png](https://img-blog.csdnimg.cn/img_convert/a7ce15b60a2db5c8a331469de2e9da12.png)
![4be5ad34d70280ff04f37100f58f2254.png](https://img-blog.csdnimg.cn/img_convert/4be5ad34d70280ff04f37100f58f2254.png)
![1e6c3b1a2b1f35e1d5338f553f6275d6.png](https://img-blog.csdnimg.cn/img_convert/1e6c3b1a2b1f35e1d5338f553f6275d6.png)
1.2.4、 node -v 查看安装版本号,win10 系统 win+R组合键快速打开运行窗口,输入cmd,如下图
![2bd77a24ae3a41279c73dffcccc67a54.png](https://img-blog.csdnimg.cn/img_convert/2bd77a24ae3a41279c73dffcccc67a54.png)
1.2.5、确认进入命令行窗口 输入node -v
![529754c77fd5f9db2ffe87718fe8d3d7.png](https://img-blog.csdnimg.cn/img_convert/529754c77fd5f9db2ffe87718fe8d3d7.png)
1.3.、Vue CLI 脚手架
3.1安装命令 npm i -g @vue/cli, win10左下角右键,运行,输入cmd,进入命令行窗口 输入 npm i -g @vue/cli
![f726d6e742c3a28167afe801d7bfc89d.png](https://img-blog.csdnimg.cn/img_convert/f726d6e742c3a28167afe801d7bfc89d.png)
3.2 输入 vue -V查看版本号
![7aa831443c501d5be46920f3d496f389.png](https://img-blog.csdnimg.cn/img_convert/7aa831443c501d5be46920f3d496f389.png)