Vue工程项目环境安装、项目构建运行、打包部署详解

落日映苍穹つ 2023-01-11 08:58 170阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 背景
 *  2. 整体步骤
 *  3. 详细过程
 *   *  3.1 安装Node.js
     *  3.2 安装Vue
     *  3.3 安装Vue CLI
     *  3.4 创建Vue工程
     *  3.5 运行项目
     *  3.6 打包部署项目
 *  4. 总结

# 1. 背景 #

Vue工程化项目环境配置还是比较麻烦的，本篇来详细的记录下从0开始的安装、构建、打包、运行全过程。

# 2. 整体步骤 #

第一，安装Node.js，这个是前端工程化项目运行的基础环境。

第二，安装Vue，使我们前端开发环境可以支持Vue开发。

第三，安装Vue CLI,这是Vue提供的交互时的项目脚手架，有点难理解是吧，其实就是一个快速构建Vue工程的小工具，通过Vue CLI，开发人员可以使用命令行或者可视化界面快速构建Vue工程项目。

第四，我们通过Vue CLI提供的可视化工具来构建一个Vue工程。

第五，我们运行构建的Vue工程。

第六，我们将Vue项目打包，并部署到web服务器上运行。

# 3. 详细过程 #

## 3.1 安装Node.js ##

官网下载.msi格式安装包，[下载链接][Link 2]，此处由于是64位计算机，所以选择如下。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]  
下载完成后双击安装文件，开始安装，大部分直接点击下一步即可，需要注意的此处我给出提示。

首先是安装位置，最好安装到D盘，避免C盘占满了。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]  
选择安装的特性，此处保持默认，全部选择即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 2]  
然后其余的全部点击下一步，等待安装完成。

安装node.js完成后，可以打开命令行，输入`node -v`验证node.js安装成功。

![在这里插入图片描述][20210126142948157.png_pic_center]

## 3.2 安装Vue ##

打开命令行，输入`npm install vue -g`全局安装Vue，由于Vue使用频率很高，所以直接全局安装。

此时耐心等待安装完成即可，出现如下图提示，则安装完成：  
![在这里插入图片描述][20210126143402420.png_pic_center]

## 3.3 安装Vue CLI ##

由于Vue CLI安装时间比较长，此处建议先安装cnpm，输入命令`npm install -g cnpm --registry=http://registry.npm.taobao.org`后回车。此处cnpm可以被认为是npm的国内镜像，后续执行命令时可以将npm替换为cnpm加速安装。出现如下图所示，则安装cnpm完成。  
![在这里插入图片描述][20210126145134357.png_pic_center]

此时可以安装Vue脚手架Vue CLI了，使用命令行输入`cnpm install -g @vue/cli`后回车运行，等待安装完成即可。出现如下图所示安装完成。  
![在这里插入图片描述][2021012614545383.png_pic_center]

## 3.4 创建Vue工程 ##

打开命令行，输入vue ui打开图形化界面，如下图即为用于创建、管理Vue项目的可视化界面。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 3]  
点击创建按钮开始创建，如下图依次设置项目文件夹，项目路径，包管理器(使用npm即可)，然后点击下一步。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 4]  
预设部分，我们选择手动配置。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 5]  
功能部分，我们一般选择Router路由、Vuex状态管理、CSS Pre-processor预处理几项即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 6]  
在配置部分，选择启用history mode，然后预处理器选择Sass即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 7]  
此时点击创建项目，即可安装我们的配置创建一个Vue工程项目了，注意后面还有一个预设部分，我们此处点击`创建项目不保存预设`即可。

等待出现如下界面，项目创建完成：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 8]

## 3.5 运行项目 ##

此时我们可以通过可视化界面运行工程，依次点击任务-serve-运行-启动app即可运行项目了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 9]  
这种方式比较麻烦，一般我们使用vue ui命令打开可视化界面并创建项目后，就可以关掉可视化界面并退出命令行了。然后我们通过cmd切换到项目路径下，运行’npm run serve’即可启动项目，如下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 10]  
当项目启动后，命令行会显示访问地址，通过地址直接访问项目即可。  
![在这里插入图片描述][202101261518482.png_pic_center]

## 3.6 打包部署项目 ##

在命令行中切换到vue-demo项目路径下，运行`npm run build`即可将项目打包。

注意打包的意义，在打包前，项目只能在node.js环境下调试运行，打包后，可以部署到tomcat或者iis或者niginx等web服务器运行。

打包完成后，在vue-demo路径下的dist文件夹即为打包结果，将dist文件夹拷贝到web服务器相应目录下运行即可。

# 4. 总结 #

node.js vue vue cli这3个安装一次即可。

vue ui可视化界面，每次新建项目时使用一次即可。

后续可以直接使用命令行`npm run serve`进行启动调试。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[Link 2]: https://nodejs.org/zh-cn/download/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/1f4e67a6c3404246af9437977ff261c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221119/ffd4bcaa3f2149b1a9c44d6b65bd5ad1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221119/d276f3c3c051429283d4e7ee37dcb95f.png
[20210126142948157.png_pic_center]: /images/20221119/f708e23f45d347198bd5895322ac7f6b.png
[20210126143402420.png_pic_center]: /images/20221119/6c2641a4890c429381c06d48fd3e92e1.png
[20210126145134357.png_pic_center]: /images/20221119/5e45ebc8d2264918a7846d3247de1489.png
[2021012614545383.png_pic_center]: /images/20221119/7d931b09b0374cb68cbe64d39cdee019.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221119/9329ac2cc1564e2e9d92339f9f534444.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221119/a6e0ca7764e546af8f0630ee0639970a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221119/2391bcd77e28441c8f99bda549a536a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221119/6254c6c396dd4c6ab90ec37c01b49316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221119/19c38924a7454b55862807510cd783a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221119/960b019300ee4ceba1bd84a8060ef712.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221119/328bcfb10fb24946b25a7502140ff00d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvc2hpc2FuZ3Nhbmc_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221119/1dd66ff8dac34954bbb891e84f191aad.png
[202101261518482.png_pic_center]: /images/20221119/ef1902e20667465785ae4d4b800df41e.png