IDEA+SpringBoot+Vue

一：安装Vue

1.1、安装node.js

1.1 node.js下载官网：https://nodejs.org/en/

1.2 打开命令框，输入“node -v”查看node.js是否安装成功

C:\Users\用户名>node -v
v12.18.3

1.2、安装webpack

npm install webpack -g 

1.3、安装vue-cli

1、npm install -g cnpm --registry=https://registry.npm.taobao.org
2、cnpm install vue-cli -g
3、检查是否安装成功 vue -V

1.4、创建并运行Vue项目

1、通过命令行进入目标目录下创建一个名字为‘vue_proj’的文件夹  
     vue init webpack vue_proj
     然后会出现以下内容：
    	? Project name vue_proj   //项目名
		? Project description A Vue.js project   //项目描述
		? Author Sophia    //作者
		? Vue build standalone
		? Install vue-router? Yes   //是否安装路由
		? Use ESLint to lint your code? No
		? Set up unit tests No
		? Setup e2e tests with Nightwatch? No
		? Should we run `npm install` for you after the project has been created? (recommended) npm  //是否需要在项目出啊关键完安装依赖包 选yes

2、进入此文件夹   cd vue_proj
3、运行项目 cnpm run dev
4、访问网址  http://localhost:8080

二：IDEA创建一个简单的SpringBoot的Demo项目

引入依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
 </dependency>

三：Vue项目打包并和SpringBoot进行整合

3.1、Vue项目打包

进入vue_proj(Vue项目所在文件夹)，然后输入一下命令进行打包，如果文件夹下多出一个dist文件夹则说明打包成功

npm run build

3.2、将Vue打包生成的dist文件夹下的内容复制到springboot项目的static文件夹下

启动访问localhost:8080

补充：IDEA配置Vue环境

1.1、打开IDEA安装Vue插件

1.2、配置JavaScript版本

1.3、在HTML中添加Vue格式

1.4、导入Vue项目到IDEA中

File — Open — 选择Vue文件

1.5、启动Vue项目

添加一个npm

编辑npm,Scripts处填写dev:

点击start按钮启动，启动成功将显示如下内容，点击超链接即可访问