创建Vue项目部署

感谢Vue + Spring Boot 项目实战（一）：项目简介这位博主的详细介绍，本文内容主要参考其博客！

1、安装Node

因为Vue安装需要使用npm，使用npm需要安装node，上node官网下载即可.

使用左侧的推荐版本更佳。
下载完成后运行安装包，一路下一步就行。然后在 cmd 中输入 node -v，检查是否安装成功。

如图，出现了版本号（根据下载时候的版本确定），说明已经安装成功了。同时，npm 包也已经安装成功，可以输入 npm -v 查看版本号

输入 npm -g install npm ，将 npm 更新至最新版本。

安装 cnpm 的命令为 ：
npm install -g cnpm --registry=https://registry.npm.taobao.org

若你的系统为Ubuntu，则安装npm可以参考在Ubuntu 18.04上，如何安装Node.js & NPM
Ubuntu更新npm时需要 sudo npm -g install npm
之后可以选择安装 cnpm，即 npm 的国内镜像。使用 cnmp 的好处是在日后下载内容时会比较快，但是下载的包可能不是最新的。

Ubuntu安装 cnpm 的命令为 ：
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

完成后就可以使用 cnpm 替代 npm 了，我不太喜欢用 cnpm，喜欢用的小伙伴注意一点，cnpm 不要与 npm 混合使用，一个项目用 cnpm 就从头用到底，不要中途敲错命令，否则就会出现混乱。不过万一遇到这种情况也不用慌，把项目的 node_modules 文件夹删了重新执行 npm/cnpm install 就行了，只是比较浪费时间。

2、安装Vue脚手架

npm install -g vue-cli

注意此种方式安装的是 2.x 版本的 Vue CLI，最新版本需要通过 npm install -g @vue/cli 安装。新版本可以使用图形化界面初始化项目，并加入了项目健康监控的内容，推荐大家使用。不过新版本创建出项目的结构跟旧版本略有不同，阅读这个教程时可能会有一些困惑的地方。

3、构建脚手架

然后执行命令 vue init webpack myproject，这里 webpack 是以 webpack 为模板指生成项目，myproject为我的项目名，你可以换成自己的项目名称。建议使用下面的配置：

这里会问是否安装 vue-router，一定要选是，也就是回车或按 Y，vue-router 是我们构建单页面应用的关键。

项目文件夹目录如下：

接下来进入项目文件夹，运行cnpm run dev

访问http://localhost:8080/后显示：

到此，Vue项目初始化完成。

4、部署Vue

运行cnpm run build在dist文件夹下生成static文件夹和index.html，随后将static文件夹和index.html放入/usr/share/nginx/html中即可，可在/etc/nginx/nginx.conf文件中更改nginx的配置项。