（一）SpringBoot + Vue 前后端分离项目之前端项目

先看效果，能运行到此界面说明前端项目是成功的：

开始搭建：

1.安装Node.js:

• 进入Node.js官网:https://nodejs.org/en/,选择下载并安装Node.js。安装的具体步骤就省略啦，基本上就是一直下一步。
• 验证Node.js是否安装好,在windows下,win r召唤出运行窗口,输入cmd打开命令行窗口。输入node -v即可得到对应的        Node.js版本。

npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm,输入npm -v可得到npm的版本。

输入以下命令npm -g install npm,更新npm至最新版本。 

2.安装cnpm

执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org ,使用npm的国内镜像 （npm 国内镜像 https://npm.taobao.org/）cnpm 命令代替默认的npm命令，增加依赖包加载速度 且避免资源限制。 

 

3.cnpm安装脚手架vue-cli

在命令行中运行命令 cnpm install -g vue-cli 安装脚手架。

4.构建项目

将vue项目建在D盘的vue-workspace文件夹下，利用命令进入此目录。 在cmd中输入盘符D:回车即可进入D盘， 然后执行命令进入D:\workspace路径目录下， 再输入新建项目命令 vue init webpack java-vue，执行后会自动生成vue项目。

 

5.运行项目

注意，此时你所在的路径并没有在你生成的项目中 。切换路径至你生成的项目中cd java-vue ，然后再输入命令npm run dev 来运行项目。

PS:也可以修改端口，D:\workspace\java-vue\config\index.js 找到port进行修改

至此，前端vue项目已经构建并启动成功了。

6.建议使用工具Visual Studio Code

这个就看个人喜好了，我感觉这个还蛮好用的，开发工具下载官网地址:https://code.visualstudio.com/。

具体安装步骤就不详细介绍了，也基本就是下一步 下一步 完成...

打开项目的文件夹就好了，也可以在工具里面运行，

在Terminer中回车就可以输入num run dev 

不过可能会出一点小问题，没有则忽略。

解决报错：
（1）以管理员身份运行vs code

（2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）

（3）在终端执行：set-ExecutionPolicy RemoteSigned

（4）在终端执行：get-ExecutionPolicy，显示RemoteSigned

再进行num run dev 就不报错了。