搭建 vue 项目步骤详情

当我们需要对项目进行改造或者二次开发的过程中 避免不了要部署前端应用 下文介绍了当我们拿到项目地址后 从搭建到运行的详细过程。

目录

1. 拉取项目到本地 

2. 部署项目

2.1 nvm 的下载 及安装

---

企业级开发绝大多数都会将项目放到 gitlab 等 项目管理工具上 如上图 拿到项目 URL

1. 拉取项目到本地 

根据项目地址路径 通过项目管理工具 [ git 、svn .... ] 将项目数据加载到本地

以 git 为例 下载、解压并正确安装完后，在电脑任意位置 鼠标右键都会出现  git bash here 、git gui here 选项 。

git下载地址 :   https://git-scm.com/download

​

 进入 git bash 中就可以根据项目路径将数据拉取到本地 ，运用 git 命令 git clone + url 回车后 会让你指定保存项目的路径 自己指定即可 ，等待项目下载完毕 。

​

除了通过 git bash 拉取项目数据外 还可以借助开发工具拉取项目 如 Idea VSCode HBuilderX 但是也得需要我们提前安装好 git  。

2. 部署项目

以 VSCode 为例 ，下载 VSCode 正常是英文的界面 需要我们下载中文插件 应用并重启后会变成中文界面 ，其他插件按需自行配置即可。

通过 文件 --> 打开文件夹 的方式指定我们下载好的项目文件夹 通过 VSCode 加载项目 ... 导入成功后 如果 之前下载过 nodejs 可直接 运行 npm install 命令 加载资源文件 然后 到 package.json 文件下 查看运行项目的指令 ，启动即可 。

通过 node -v 查看当前 node 版本

如果之前没有下载过 node.js 则需要我们去下载

注意：根据项目要求下载 相应的 nodejs 版本 否则可能导致 出现一系列问题 。如下图就是我们当前 node 版本不匹配 ，版本过高 引起的问题 则需要我们去降低 node 版本 。

当我们管理多个项目的时候 会出现多个 nodejs 版本的情况 建议我们 下载 nvm 来实现多版本 node 的管理 

nvm（ node.js version management ），是一个 nodejs 的版本管理工具。nvm 是 node.js版本管理工具，为了解决 node.js 各种版本存在不兼容现象 可以通过它可以安装和切换不同版本的 node.js 。【可同时在一个环境中安装多个 node.js 版本（和配套的 npm ）】

2.1 nvm 的下载 及安装

下载地址：https://github.com/coreybutler/nvm-windows/releases

下载完后解压并安装 。

安装完成后 正常系统会自动配置好环境变量 如下图 。

正确安装后 可通过 【cmd-管理员权限或者 VSCode 终端】 nvm -v 查看当前 nvm 版本 

安装完 nvm 后 不要急着 安装 nodejs  找到 nvm 安装路径 找到 settings 文件 配置 npm 下载所需的镜像 此处 还可以指定 node  下载所需的镜像 我这里不需要 按需配置即可 。

node_mirror: https://npm.taobao.org/mirrors/node/

npm_mirror: https://npm.taobao.org/mirrors/npm/

注意：当 npm install 出现 报错 排除 了 nodejs 安装失败的问题 或者 卡在一个加载项不动 则需要检查 settings 中的 镜像路径 有的时候可能会改变 出现了及时更新镜像路径即可 - 官网查看

配置完成之后 我们就可以在 vscode 终端 、cmd 窗口 或 git bash here 中 下载我们所需要的node版本文件

查看当前所有能够安装的 nodejs 版本 nvm list available

安装指定版本的 nodejs 我这里是 v12.14.0 nvm install 12.14.0  等待安装成功 注意如果该 nvm 版本能够安装的 nodejs  没有我们项目需要的版本 可以自行下载 所需要的版本 放在 nvm 文件夹中 新建自定义所属版本的文件夹下 并解压 然后 nvm 会 主动去管理 该版本的 node

通过 nvm ls 查看当前 nvm 所管理的 所有 nodejs 带 * 号 为当前使用的 nodejs 版本 

切换使用指定版本的 nodejs nvm use 16.20.1  即可切换对应版本的 node 最后 npm install 下载项目运行 所需要的资源 ，这样一步一步来 是不会出错的 。

正常 启动 项目 ：npm run dev  根据实际情况而定 启动成功后 可根据路径 正常访问页面资源