前端开发环境的搭建

一.Nodejs安装

1.1 常规安装

常规安装没有太多要说的地方，访问官网 Nodejs官网 下载安装或者对应使用命令安装即可。

1.2 个人推荐

由于小组内，有最新的Vue3项目，也有部分前端项目框架较老。使用Vue2做开发的项目，项目中使用了低版本node-sass这个包，导致Nodejs版本>16安装、启动项目都会出现问题，升级高版本node-sass也会有各种兼容性问题，所以需要使用低版本Node运行项目（12、14）。所以这时候需要一个node版本管理工具来对Node版本做切换。这里推荐用 nvm 来管理node版本。

注意： windows下安装nvm与linux和macos中不同

windows环境下载（nvm-windows）release中的.exe文件执行安装。

macos以及linux参考github中（nvm - github）中的方法安装。

安装完成后在cmd/终端中输入

nvm -v  

查看是否输出版本号，确定是否安装成功。

正确输出版本号之后，这时候只需要执行几个简单命令，就可以配置好nodejs环境了。

nvm install xx

安装对应node版本号 （这里的版本号可以写具体的版本号，比如 20.13.1 ,但是实际上这里输入大版本号即可，如：12、18、20）；

执行install命令下载完毕后，执行

nvm use 18

使用指定版本的Nodejs

此时nvm管理的node环境就已经搭建完毕了。

二、npm源的切换、包管理工具的安装。

2.1 npm源的切换

由于众所周知的原因，国内下载国外服务器资源都很慢，这时我们需要使用其他源来解决这个下载慢的问题。

首先全局安装一个nodejs包 nrm

npm i -g nrm --registry=https://registry.npmmirror.com/

-g 全局安装

安装成功之后，可以使用下面命令来查看所有推荐的可用源。

nrm ls

然后使用对应源执行

nrm use xxx 

xxx 对应上面的源名称 npm、yarn、taobao等。

2.2 包管理工具的安装

nodejs在安装完成之后，会同时默认安装一个npm（Node Package Manager）的包管理工具。正常来说，已经够用了，但是这里如果是在vue3 或者其他更新一点的项目创建的时候，更推荐使用pnpm来管理项目中的包。

三、项目的创建、运行、打包（拓展）

公司的前端项目一般不会由后端来创建，这里只作为拓展了解即可。

3.1 项目创建

公司前端整体使用vue作为技术栈，由于vue2官方已经停止更新，现在更推荐创建vue3项目。

所以这里以创建vue3项目为例，演示创建一个vue3的前端项目的过程。

执行 npm create vue@latest

根据提示输入、选择选项创建完项目即可

此时项目已经创建完毕了。

3.2 项目运行

接着上面项目创建完成的继续，依次执行下面的命令,等待安装完毕

安装完毕

npm run format 此步可以省略，是执行package.json中的 scripts 下 format命令对生产内容进行格式化。

执行

npm run dev

启动完成。

打开终端中输出的地址，就可以看到项目已经启动成功了。

3.3 项目打包

查看项目根目录下的package.json文件

scripts下就是所有我们可以使用 npm run 执行的脚本。

项目打包就是执行

npm run build

打包完成之后，会在项目根目录生成一个dist文件夹（默认为dist，实际需要以项目配置为准）。dist文件夹中的内容就是打包后得到的静态资源，发布到对应的服务器目录下，配置好nginx即可访问。

当然，真实项目的打包会根据不同的环境做区分，这里以机库运维项目的package.json为例

不同的命令，生成对应不同环境的打包产物。