springboot+vue+部署安装及运行指导

1 环境部署

1.1 jdk-8u111-windows-x64

环境变量 JAVA_HOME:C:\Program Files\Java\jdk1.8.0_111

Path新增一行:%JAVA_HOME%\bin

 

1.2 apache-maven-3.5.0-bin，直接解压到C:\Program Files\Java

环境变量 MAVEN_HOME:C:\Program Files\Java\apache-maven-3.5.0

Path新增一行:%MAVEN_HOME%\bin

 

1.3 Git部署

Git-2.10.2-64-bit

TortoiseGit-2.3中文版与Git安装包_手册.zip

 

1.4 idea安装lombock

（1）插件包：lombok-plugin-0.27-2017.3.zip（与IDEA版本为2017.3.3版本对应）

（2）IDEA-->Settings->Preferences-->Plugins

（3）在Plugins面板中有'install from disk'按钮，点击后选择lombok-plugin-0.16-2017.3.3.zip

（4）重启idea

 

1.5 Node.js安装

（1）双击安装node-v10.16.3-x64.msi（64位），（最新安装去Node.js官网：https://nodejs.org/en）

（2）执行命令确认nodejs是否安装成功

#node -v

#npm -v

 

（3）环境变量（安装完成默认在Path后面增加了环境变量）为了以后的本地部署项目，我们需要找到node.js的安装根目录，在当中新建“node_global”和"node_cache"两个文件夹。执行命令

#npm config set prefix "C:\Program Files\nodejs\node_global"

#npm config set cache "C:\Program Files\nodejs\node_cache"

（4）环境变量NODE_PATH:C:\Program Files\nodejs\node_global\node_modules

Path追加：C:\Program Files\nodejs\node_global

（5）安装淘宝的npm镜像（因为npm在国内下载速度是很慢，所以就用npm下载安装cnpm可以更快的下载后面的依赖等）

#npm install -g cnpm –registry=https://registry.npm.taobao.org

 

#npm config set registry https://registry.npm.taobao.org --global   换镜像  #npm config set registry  https://registry.npmmirror.com --global

#npm config set disturl https://npm.taobao.org/dist --global

 

#yarn config set registry https://registry.npm.taobao.org --global    换镜像  #yarn config set registry  https://registry.npmmirror.com --global

#yarn config set disturl https://npm.taobao.org/dist --global

 

 

（6）安装全局vue-cli脚手架、webpack

开始菜单或者小娜搜索输入powershell,管理员运行：

#npm install -g @vue/cli  //全局安装vue

#npm install -g webpack                          //全局安装webpack

#npm install -g webpack-dev-server             //安装webpack的本地webserver

#set-ExecutionPolicy RemoteSigned ，即将策略设置为RemoteSigned （远程签名）

（7）执行命令确认vue和webpack是否安装成功

#vue -V

#webpack  -v

（8）其他

创建vue项目：#vue create my-project

使用Visual Studio Code打开项目，安装常用插件->Extensions->Vue 2 Snippets、Vue Theme、Vue VS Code Extension Pack、Vue VSCode Snippets、Vuter

1.6 安装yarn

#npm i -g yarn

#yarn -v

 

2 代码克隆

3 编译

3.1 java后端

maven clean

maven Install

 

3.2 前端启动

#cd xxx\vue

#npm install

#npm run dev

 

3.2 前端打包

#npm run build，文件夹下会生成一个dist文件，然后zip