【前端vue+nginx快速开发笔记】

快速开发步骤*****

1.如何启动项目

1.1 准备拉取远程项目的工具

目前使用svn相关工具。
①tortoiseSVN小乌龟可视化工具、
②vscode下载svn相关插件，可自行了解。
TortoiseSVN安装使用教程：https://blog.youkuaiyun.com/weixin_52799373/article/details/127536617

1.2 下载安装node

目的： 使用node中的npm包管理器（若有其他具体需求，再下载相应的模块）
下载安装： https://nodejs.org/en/download

1.2.1. 下载

需要避坑：

• 如果直接下载windows Binary(.zip**) 对应的 64 - bit， 后续操作会报错**

下载下来的会是最新版的node。最新版的在测试中，很多性能不稳定，而且大部分项目是不会支持最新版的node的，大部分项目支持8.9以上，10+,
到14.17.0左右的

• 一般直接官网下载，会包含npm包

如果是使用nvm（node版本控制）下载的，可能需要检查下不同版本下的node_modules是否含有npm文件夹(nvm下载安装参考网址)，nvm官网

• vue项目中有版本限制

比如项目中的package.json文件 或 package-lock.json文件（若同时存在，依照package-lock.json）：
使用的node是需要大于等于8.9版本的，npm包管理器需要大于等于 3.0.0版本

就需要按照要求下载符合要求的node 和 npm版本

下载得到一个zip压缩文件：

然后解压， 放在一个纯英文路径下

1.2.2. 安装

确定好nodejs的路径后，将nodejs完整的路径存在环境变量里

然后一直确定
之后检查一下nodejs\node_modules\下是否有npm文件夹
在电脑搜索栏输入cmd，弹出终端，

// 在终端内输入命令
node -v 回车得到 当前node版本
npm -v 回车得到当前npm版本

1.3 准备好代码编辑器

1. 选用vscode 下载地址： https://code.visualstudio.com/
   根据自己电脑型号选择
   
   下载得到：
   

2. 安装。双击该exe文件，逐步安装。
   参考：https://blog.youkuaiyun.com/weixin_49851451/article/details/128373316

3. vscode切换语言
   切换为中文：【注意】安装好中文插件，如果vscode仍然显示英文，重启。
   

4. 安装项目所需依赖：
   

5. 在vscode中使用命令行（终端）：
   4.1.拉出终端
   
   得到：

   在vscode终端中 执行：

   npm install 
   

6. 配置nginx：nginx包里 conf 文件夹下 nginx.conf文件中找到前端地址，用自己的本地ip更换其ip，保存

7. 启动nginx：进入nginx目录，在目录栏中，全选所有地址，输入cmd进入小黑框，执行命令

start nginx  // 启动
nginx -s reload // 重载（每次修改完nginx的配置，都需要重新执行该命令 才能生效）

// 另外
tasklist /fi “imagename eq nginx.exe // 查看nginx 启动了哪些端口
nginx -s stop // 快速停止或关闭
nginx -s quit // 正常停止或关闭
taskkill /fi “imagename eq nginx.exe" /f // 结束所有进程

6. 启动项目：在vscode终端内，（cd到项目文件夹下），执行命令

npm run dev

7. 打开浏览器，访问http://[你的ip地址]:8888/#/login
8. 以上，项目启动完成。

2 nvm管理node工具

如果使用nvm管理node

2.1 卸载现有的node

2.2下载nvm

下载地址：
[https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm)
https://github.com/coreybutler/nvm-windows/releases