idea從搭建完整的vue+element項目到打包到springboot

一。搭建vue項目

1。打開idea,新建項目
Create New Project > Static Web>填寫project name和選擇保存的工作空間>Finish

2。可以先安裝淘寶鏡像，下載比較快點，可以打開Terminal，輸入命令：（不想要的話可以跳過這一步）

 

npm i -g cnpm --registry=https://registry.npm.taobao.org

 

3。先退出到頂層文件夾（E:\companyProdect>），再安裝腳手架（如果不退出的上一層也行，下面初始化配置？Project name時直接回車，不然導入element時可能會有問題，我這邊是先退到頂層），命令如下：

先輸入：cd ..

再輸入：npm i -g vue-cli

 

4。腳手架安裝完成后，初始化包結構,命令如下：

vue init webpack vue-demo（vue-demo為自己的項目名）

之后會進行初始化配置，

？Project name ---- 項目名稱(比如我的是vue-demo)，init命令時也填了個project-name，如果無需更改，直接回車即可；

？Project description ---- 項目描述，按需填寫。無需填寫可以直接回車；

？Author ---- 作者

？Vue build ---- 構建模式，一般默認第一個；

？Install vue-router? ---- 是否安裝vue-router。選Y。后邊構建項目會用到。

？Use ESLint to lint yout code? ---- 格式校驗，按需；

？Set up unit tests ---- 測試相關，按需；

？Setup e2e tests with Nightwatch? ---- 測試相關，按需；

？Should we run ‘npm install’ for you after the project has been created? ---- 按需，這里我選Yes, use NPM。如果選No，后續自己在目標目錄下執行npm install即可。

 

5。出現如下就說明安裝成功了，在瀏覽器輸入相關地址就行

  

此處參考鏈接：https://www.jianshu.com/p/9c1d4f8ed068

 

二。導入element

1。輸入命令：

npm i element-ui -S

2。修改main.js，添加如下代碼

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)


以上是簡單的vue項目，完整的如下。先看下本項目主要用到的：

三。導入axios

1。導入依賴

npm install axios --save

 

2。封裝axios

2.1。在utils文件夾里新建一個globalData.js，存儲基本請求路徑

const globalData = {
  baseUrl: 'http://localhost:8081'
}
export default globalData

2.2。在utils文件夾里新建一個request.js，封裝請求.

import axios from 'axios'
import {Message} from 'element-ui'
import globalData from '@/utils/globalData'

const service = axios.create({
  withCredentials: true, //允許跨域
  timeout: 5000 //請求超時
})

//請求攔截
service.interceptors.request.use(
  (confing) => {
    confing.url = globalData.baseUrl + confing.url;
    console.log("請求數據------------")
    console.log(confing)
    return confing
  },
  (error) => {
    return Promise.reject(error)
  }
)

//響應攔截
service.interceptors.response.use(
  (response) => {
    console.log("返回數據-----------")
    console.log(response.data)
　　//下面根據自己項目邏輯需求進行操作
    const resData = response.data;
    if (resData.code !== 'SUCCESS') {
      if (resData.code === 'USER_NOT_LOGIN') {
        Message({
          message: resData.message || '未登錄',
          type: 'warning',
          duration: 5 * 1000
        })
        window.location.href = ('/login')
      }

      Message({
        message: resData.message || resData.msg || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      return Promise.reject(new Error(resData.message || 'Error'))
    } else {
      return resData;
    }
  },
  (error) => {
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

3。新建一個在src里api文件夾，然后在api文件夾里新建一個user.js

import service from '@/utils/request';

//登錄
export function webLogin(resData) {
  const formData = new FormData()
  formData.append('account', resData.account)
  formData.append('password', resData.password)
  formData.append('verifyCode', resData.verifycode)
  return service({
    url: "/web/login/login.json",
    method: "post",
    data: formData
  })
}

//登出
export function logout() {
  return service({
    url: "/web/login/logout.json",
    method: "post"
  })
}

//獲取登錄用戶信息
export function userMes() {
  return service({
    url: "/web/user/get-user-info.json",
    method: "get"
  })
}

 

 4。頁面調用后台接口

import {userMes} from "@/api/user"

userMes().then(res => {
　　//邏輯操作
}).catch(e => {

})

axios中文文檔：https://www.kancloud.cn/yunye/axios/234845/


四。使用store
1.在src里新建store文件夾，然后在store文件夾里新建一個modules文件夾專門放全局變量和新建一個index.js和新建getters.js進行配置

 2.先導入vuex

npm install vuex --save

3.導入js-cookie進行cookie操作

npm install js-cookie --save

4.在utils文件夾新建auth.js，封裝cookie操作

import Cookie from 'js-cookie'

const TokenKey = 'vue_token'

export function getToken() {
  return Cookie.get(TokenKey)
}

export function setToken(newToken) {
  const token = Cookie.get('token');
  return Cookie.set(TokenKey, token || newToken)
}

export function removeToken() {
  return Cookie.remove(TokenKey)
}

3.在modules文件夾新建一個user.js

import {getToken, removeToken} from "@/utils/auth"
import {userMes, logout} from "@/api/user"
import {resetRouter} from "@/router"

const state = {
  userInfoStore: {}
}

const mutations = {
  USER_INFO_STORE: (state, userInfoStore) => {
    state.userInfoStore = userInfoStore
  }
}

const actions = {
userInfo: ({commit}, userInfoStore) => commit("USER_INFO_STORE", userInfoStore),
userMes({commit, state}) {
　　//獲取用戶信息
    return new Promise((resolve, reject) => {
      userMes().then((res) => {
        if (res.code === "SUCCESS") {
　　　　　　//保存信息到全局變量，使用 this.$store.state.user.userInfoStore 獲取
          commit("USER_INFO_STORE", res.data)
          resolve("200 OK")
        } else {
          reject("500 error")
        }
      }).catch(err => {
        reject(err)
      })
    })
  },
logout({commit, state}) {
　　//注銷登錄
    return new Promise((resolve, reject) => {
      logout().then((res) => {
        if (res.code === "SUCCESS") {
　　　　　　//移除token
          removeToken()
　　　　　　//重置路由
          resetRouter()
          resolve("200 OK")
        } else {
          reject("500 error")
        }
      }).catch(err => {
        reject(err)
      })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

4。getting.js添加

const getters = {
  userInfoStore: state => state.user.userInfoStore,
}
export default getters

5.在index.js添加並引用user.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    //全局變量分組
　　user
  },
　getters
})

export default store

6.小結：
6.1 store主要有state，mutations，actions，modules，getters
6.2 state相當於vue里data,存儲數據
6.3 mutations主要修改state里的數據，屬於同步，外部調用this.$store.commit("xxx")，官方不推薦直接在這里修改數據
6.4 actions與mutations功能差不多，屬於異步，可在此commit調用mutations修改state里數據，外部調用：this.$store.dispatch("xxx")
6.5 modules為全局變量分組
6.6 getters相當於vue里computed計算屬性，外部調用：this.$store.getters.xxx

store詳解：https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc

 五。router

1。修改router里面的index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Login from '@/components/Login'
import Register from '@/components/Register'

Vue.use(Router)

export const constantRoutes = [
    {
      path: '/login',
      name: 'login',
      component: Login,
      meta: {title: '登錄'}
    }, {
      path: '/',
      name: 'Index',
      component: Index,
      meta: {title: '首頁'},
      children: [{
        path: 'mainCenter',

        name: 'mainCenter',
        component: () => import('@/components/Main'),
        meta: {title: 'main'}
      }]
    }, {
      path: '/register',
      name: 'register',
      component: Register,
      meta: {title: '注冊'}
    }
]

const createRouter = () => new Router({
  scrollBehavior: () => ({x: 0, y: 0}),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter();
  router.matcher = newRouter.matcher
}

export default router

2。在src里創建permission.js進行路徑攔截

import router from './router'
import {getToken} from '@/utils/auth'
import store from './store'
import NProgress from 'nprogress' //vue 進度條
import 'nprogress/nprogress.css'
import getPageTitle from "@/utils/get-title"

NProgress.configure({showSpinner: false})

//白名單
const whiteList = ['/login','/register']

router.beforeEach(async (to, from, next) => {
  NProgress.start() //開始

  //設置標題
  document.title = getPageTitle(to.meta.title)

  //獲取token
  const hasToken = getToken()

  if (whiteList.find((item) => item === to.path)) {
    next()
    NProgress.done() //結束
  } else {
    if (hasToken) {
      try {
　　　　　//獲取登錄用戶信息
        await store.dispatch("user/userMes")
        next()
      } catch (error) {
　　　　　//注銷登錄
        await store.dispatch("user/logout")
        next(`/login?redirect=${to.path}`)
      }
      NProgress.done()
    } else {
      //注意這里的符號是：` ，不然識別不了${}。並且這里'/login'必須再白名單里，不然出現死循環
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

3。在utils里新建一個get-title.js進行網頁標題操作

const title = "GGDong"

export default function getPageTitle(pageTitle) {
  if (pageTitle) {
    return `${pageTitle} - ${title}`
  }
  return `${title}`
}

4.小結：

1、全局守衛： router.beforeEach

2、全局解析守衛： router.beforeResolve

3、全局后置鈎子： router.afterEach

4、路由獨享的守衛： beforeEnter

5、組件內的守衛： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

router 官方文檔:https://router.vuejs.org/

六。組件
1.父頁面調用子組件
<myComponents></myComponents>
import myComponents from "../myComponents"

export default{
　　components:{
　　　　myComponents
　　}
}

2.父頁面傳值到子組件

<myComponents :newData="newData"></myComponents>

export default{
　　data(){
　　　　newData:"這是父級頁面數據"
　　}
}
子組件獲取值
export default{
　　props:{
　　　　newData:{type:String,default:""}
　　}
}

3.父頁面調用子組件方法

<myComponents ref="addGoods"></myComponents>

　methods:{
　　　　init(){
　　　　　　this.$ref.addGoods.子組件方法
　　　　}
　}
4.子組件傳值父頁面
子組件:
this.$emit("getGoodsData",data);

父頁面：
<myComponents @getGoodsData"getGoodsData"></myComponents>

methods:{
　　getGoodsData(data){}
}

七。打包
1.如果springboot不分前后台代碼的話就直接打包放到resources下的static(沒有就創建)里面,

運行springboot項目后，輸入 http://localhost:端口號/index.html#/ 就可以成功調用

 

 2.如果springboot分前后台的話就要修改下配置文件了，不然就會找不到靜態資源

 

 2.1.修改config文件夾里的index.js

 

 2.2.如果element-ui的圖片找不到的話，就修改build文件夾里的utils.js

 

 

3.運行springboot項目后，輸入 http://localhost:端口號/static/web/index.html#/ 就可以訪問

 

 

此處參考文檔：

https://www.cnblogs.com/caideyipi/p/8187656.html

https://blog.csdn.net/xiaoHelloWord/article/details/96921209