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