IDEA+SpringBoot+Vue

一：安装Vue1.1、安装node.js1.2、安装webpack1.3、安装vue-cli1.4、创建并运行Vue项目 二：IDEA创建一个简单的SpringBoot的Demo项目三：Vue项目打包并和SpringBoot进行整合3.1、Vue项目打包3.2、将Vue打包生成的dist文件夹下的内容复制到springboot项目的static文件夹下 补充：IDEA配置Vue环境1.1、打开IDEA安装Vue插件1.2、配置JavaScript版本1.3、在HTML中添加Vue格式1.4、导入Vue项目到IDEA中1.5、启动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按钮启动，启动成功将显示如下内容，点击超链接即可访问