vscode下载安装及项目运行环境部署

vs code下载安装

https://code.visualstudio.com.

上述链接下载后，点击安装，一路下一步即可，记得最后一步的‘添加到PATH’一定要钩上（默认是钩上的，不要取消掉就行了）

安装必要插件

打开vscode,点击如图所示位置，打开拓展商店。
首先个人觉得比较必要的几个插件（只运行不开发，安装这两个插件就够了）：
1、Chinese （汉化插件）
2、live server (调试插件，可以理解为独立运行前端文件的一个服务器)
vue相关基础插件
1、Vetur
2、vue-helper
其他开发插件
1、git history (查询git历史的插件）
2、html css support ( css智能提示插件）
3、html snippets(html 标签智能提示插件）
4、Debugger for Chrome（映射vscode断点到chrome上）

安装项目环境

创建工作区

1、在本地创建文件夹，并用vs打开该文件夹（文件->打开文件夹）

2、将文件夹另存为工作区（文件->将工作区另存为）

3、保存成功后会发现多了‘工作区’ 三个字

之后的项目都可以创建在工作区下（通过工作区可以方便的管理项目）

安装node.js（附带安装npm)

0、简介
node.js是javascript的运行环境，用于执行js代码环境，不需要浏览器，直接使用node.js运行js代码。模拟服务器效果，一定程度上类似tomcat

npm是node.js包管理工具，用于统一管理各种插件包。相当于前端中的maven

1、下载地址：http://nodejs.cn/download/

2、下载后一路下一步安装

3、测试安装是否成功
右键任意项目文件夹，点击‘在集成终端（/CMD）中打开’

在终端中输入命令
查看node.js版本号

node --version

查看npm版本号

npm -v

正常显示版本号即安装成功，如未显示版本则安装失败

安装git

mac安装git

1、如果是mac电脑并且安装了homebrew可通过homebrew快捷安装git
在终端中使用以下命令即可

brew install git

如果没有安装homebrew，可先安装homeberw
可参考我另外一篇博客：
https://blog.csdn.net/qq_24950043/article/details/110677255

2、直接从AppStore安装Xcode，Xcode集成了Git，不过默认没有安装，你需要运行Xcode，选择菜单“Xcode”->“Preferences”，在弹出窗口中找到“Downloads”，选择“Command Line Tools”，点“Install”就可以完成安装了。

window安装git

下载
https://git-scm.com/download/win
下载后直接点击安装即可

官网安装方法参考

https://git-scm.com/book/zh/v2/起步-安装-Git

测试安装

在终端输入：git
弹出命令提示说明安装成功

从github上拉取项目到vscode

1、在工作区下新建一个项目文件夹
2、在该文件夹下右键打开终端
3、在打开的终端中输入命令

git clone 项目github地址

注意这里的地址是指下载地址而不是访问地址，即后缀是.git的地址，可在github如下页面中获取

4、下载完成后，在项目文件夹下会发现多了一些项目文件

5、在最底层文件夹中打开终端
比如我这里是三层文件夹结构（一般就1层）：icdc_web/xxxproject/project，项目是在project下的，所以就要在project下右键打开终端，鼠标挪到文件夹名上，右键打开终端，如图所示

6、启动项目
一般项目的readme.md中会说明启动命令，如有特殊的配置，参照自己项目中开发者书写的readme.md。如无特殊配置可参考以下命令启动

（1）下载安装项目依赖包

npm install

安装成功提示如下

（2）运行服务

npm run serve

服务运行如果有报错，根据报错提示信息解决即可，比如我这里运行报错
根据提示是空格多余导致的，位置在about.vue文件的第4行。点击进入该文件（mac是cmd+左键，window是ctrl+左键）

进入看到第四行前有多个空格，直接将其删除即可，如图光标已删除到最左侧

删除后按下cmd+s保存修改（window是ctrl+s)，项目会自动识别并继续运行
如下所示，项目运行成功，在浏览器输入http://localhost:8080/ 即可访问项目

图中提示的nom run build是打包命令，如果只是运行，无需执行该命令