vue支持ie幾，Springboot+vue項目的搭建，自用

先安裝Node.js

使用npm安裝node.js

vue支持ie幾？安裝完在cmd中輸入
$ npm install vue
對vue.js進行安裝

記得要對npm、vue進行環境變量的配置
配置完成后用cmd查看npm、vue的版本查看是否配置完成
用vue create Gaokao-demo創建vue項目
之后再文件夾下用npm run serve 對vue項目進行啟動
訪問localhost:8080訪問到vue界面

再直接將項目拖動到IDEA上進行打開

核心是src文件夾下內容，assets是靜態資源、components是組件，router中的index.js是路由的位置、store用于定義頁面信息遍歷，view是視圖存放未知

vue前端搭建、使用Element ui組件庫對前端界面進行搭配
https://element-plus.gitee.io/zh-CN/
element -plus是基于vue3的升級
https://element.eleme.cn/#/zh-CN

element的安裝
npm install element-plus --save

完整導入Element
import { createApp } from ‘vue’
import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
import App from ‘./App.vue’
const app = createApp(App)
app.use(ElementPlus)
app.mount(‘#app’)

快速創建Springboot項目

選中需要的配置
無腦安裝就完事了
之后對Springboot和vue兩個項目進行一個整合，IDEA的項目目錄下創建一個VUE文件，將原先創建的vue項目中需要的文件放到一起。文件夾里剪切過去就行。

之后對vue啟動項進行配置

配置Springboot的pom.xml和application.yml文件

安裝Mybatis-plus的依賴文件

<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.1</version>
</dependency>

配置Result包裝類用于前臺后臺數據的統一，包裝后臺的返回對象

public class Result<T> {private String code;private String msg;private T data;public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public T getData() {return data;}public void setData(T data){this.data=(T) data;}public Result(T data){this.data=data;}public Result(){}public static Result success(){Result result=new Result<>();result.setCode("0");result.setMsg("成功");return result;}public static <T> Result<T> success(T data){Result<T> result=new Result<T>();result.setCode("0");result.setMsg("成功");result.setData(data);System.out.println("result:"+result);return result;}public static Result  error(String code,String msg){Result result=new Result();result.setCode(code);result.setMsg(msg);return result;}@Overridepublic String toString() {return "Result{" +"code='" + code + '\'' +", msg='" + msg + '\'' +", data=" + data +'}';}
}

對axios進行安裝

cd到vue文件下
npm i axios -s

并對其進行引入和封裝。
request.js和vue.config.js 為vue常用的配置文件request.js

import axios from 'axios'const request = axios.create({baseURL: '/api',  // 注意！！ 這里是全局統一加上了 '/api' 前綴，也就是說所有接口都會加上'/api'前綴在，頁面里面寫接口的時候就不要加 '/api'了，否則會出現2個'/api'，類似 '/api/api/user'這樣的報錯，切記！！！timeout: 20000
})// request 攔截器
// 可以自請求發送前對請求做一些處理
// 比如統一加token，對請求參數統一加密
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token;  // 設置請求頭//取出SessionStorge里面緩存的用戶信息，const userJson=sessionStorage.getItem("user");return config
}, error => {return Promise.reject(error)
});// response 攔截器
// 可以在接口響應后統一處理結果
request.interceptors.response.use(response => {let res = response.data;//axios默認返回的數據都存于data中// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服務端返回的字符串數據if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)}
)

vue.config.js

// 跨域配置
module.exports = {publicPath: process.env.NODE_ENV === "production" ? "/" : "/",lintOnSave: false, // 關閉煩人的eslint，如需打開請修改為trueconfigureWebpack:{//vue cli創建的項目resolve: {// 將 `.ts` 添加為一個可解析的擴展名。extensions: ['.ts', '.js']},module: {rules: [{test: /\.ts$/,loader: 'ts-loader',options: { appendTsSuffixTo: [/\.vue$/] }}]}},// 打包時不生成.map文件productionSourceMap: true,devServer: {                //記住，別寫錯了devServer//設置本地默認端口  選填port: 9876,proxy: {                 //設置代理，必須填,'/api': {              //設置攔截器  攔截器格式   斜杠+攔截器名字，名字可以自己定target: 'http://localhost:9090',     //代理的目標地址changeOrigin: true,              //是否設置同源，輸入是的pathRewrite: {                   //路徑重寫'^/api': ''                     //選擇忽略攔截器里面的內容}},}}
}