前端教案提交

前端项目开发/front.md

--- "a/\345\211\215\347\253\257\351\241\271\347\233\256\345\274\200\345\217\221/front.md"
+++ /dev/null

前端项目开发/前端环境搭建.md

+### 1.前端环境搭建
+### 1.前端环境搭建
+
+#### 1.Node安装
+
+​		官网：http://nodejs.cn/
+
+
+
+![Node官网](../assets/frontEndImg/Node_download.png)
+
+下载好对应的安装包后，打开安装，点击下一步即可：
+
+![Node官网](../assets/frontEndImg/Node_install_1.png)
+
+![Node官网](../assets/frontEndImg/Node_install_2.png)
+
+选择安装位置：
+
+![Node官网](../assets/frontEndImg/Node_install_3.png)
+
+![Node官网](../assets/frontEndImg/Node_install_4.png)
+
+![Node官网](../assets/frontEndImg/Node_install_5.png)
+
+![Node官网](../assets/frontEndImg/Node_install_6.png)
+
+![Node官网](../assets/frontEndImg/Node_install_7.png)
+
+安装成功，文件夹结构如下，并在上面安装过程中已自动配置了环境变量和安装好了npm包，此时可以执行 node -v 和 npm -v 分别查看node和npm的版本号：
+
+![Node官网](../assets/frontEndImg/Node_install_8.png)
+
+接下来设置npm镜像淘宝源：
+
+```shell
+全局设置
+	npm config set registry https://registry.npm.taobao.org
+检验
+	npm config get registry 
+	或
+	npm info express
+```
+
+![Node官网](../assets/frontEndImg/Node_install_9.png)
+
+#### 2.VScode安装
+
+​		官网https://code.visualstudio.com/Download下载最新版
+
+![VSCODE](../assets/frontEndImg/vscode_dev_1.png)
+
+​	注：解压到非系统盘，文件夹最好不要出现中文和空格，解压后直接运行code.exe即可
+
+![VSCODE](../assets/frontEndImg/vscode_dev_2.png)
+
+
+
+#### 3.利用GIT拉取代码
+
+在想要存放代码的文件夹中右键，选择Git Bash Here：
+
+![GIT](../assets/frontEndImg/git_pull_0.png)
+
+拉取代码：
+
+```shell
+git clone http://114.115.138.98:8900/fukai/vue-gjjs
+```
+
+![GIT](../assets/frontEndImg/git_pull_1.png)
+
+#### 4.利用VScode打开项目
+
+打开项目:
+
+![VSCODE](../assets/frontEndImg/vscode_dev_3.png)
+
+![VSCODE](../assets/frontEndImg/vscode_dev_4.png)
+
+***打开项目后切换分支：***
+
+![VSCODE](../assets/frontEndImg/vscode_dev_5.png)
+
+![VSCODE](../assets/frontEndImg/vscode_dev_6.png)
+
+打开终端：
+
+![VSCODE](../assets/frontEndImg/vscode_dev_7.png)
+
+终端执行：
+
+```shell
+npm install
+```
+
+![VSCODE](../assets/frontEndImg/vscode_dev_8.png)
+
+![VSCODE](../assets/frontEndImg/vscode_dev_9.png)
+
+终端执行：
+
+```shell
+npm start
+```
+
+![VSCODE](../assets/frontEndImg/vscode_dev_10.png)
\ No newline at end of file