vue+element-ui前端项目完整搭建及编译打包

vue+element-ui前端项目完整搭建及编译打包

因为是码农的缘故，很少自己亲自搭建一个完整的项目，一般干活儿都是在已经搭建完的基础上完成对应的模块功能，所以想重新学习一下完整的搭建过程，实例项目也是来自 MarkerHub上的一个开源的博客前端项目，在原有项目基础上，增加了针对编译打包的部分修改，该项目的后端服务接口内容可以参考上一篇的《springboot+mybaits-plus+shiro微服务接口搭建改造(JAVA11版本)》，这样一个前后端分离的经典Demo的项目就可以完整的搭建完成了。

1. vue脚手架

先安装vue/cli脚手架，再用vue ui命令创建工程。选择预装babel，Router，Vuex等必备的依赖。

npm install -g @vue/cli
vue ui

2. 整合element-ui与axios

2.1 引入element-ui

官方文档：https://element.eleme.cn

# 切换到项目根目录
cd vueblog
# 安装element-ui
npm install element-ui --save

在项目src目录下的main.js中引入element-ui依赖

import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
Vue.use(Element)

2.2 引入axios

官方文档：http://www.axios-js.com/

npm install axios --save

在项目src目录下的main.js中引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

全局配置及错误拦截

import axios from 'axios'
import Element from 'element-ui'
import router from './router'
import store from './store'


axios.defaults.baseURL = "http://localhost:8081"

// 前置拦截
axios.interceptors.request.use(config => {
  return config
})

axios.interceptors.response.use(response => {
    let res = response.data;

    console.log("=================")
    console.log(res)
    console.log("=================")

    if (res.code === 200) {
      return response
    } else {

      Element.Message.error('错了哦，这是一条错误消息', {duration: 3 * 1000})

      return Promise.reject(response.data.msg)
    }
  },
  error => {
    console.log(error)
    if(error.response.data) {
      error.message = error.response.data.msg
    }

    if(error.response.status === 401) {
      store.commit("REMOVE_INFO")
      router.push("/login")
    }

    Element.Message.error(error.message, {duration: 3 * 1000})
    return Promise.reject(error)
  }
)

3. 路由配置

在路由配置中一定要把mode: ‘history’,这句配置注释，否则打包后，index.html页面会呈现一片空白。

3.1 路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Blogs from '../views/Blogs.vue'
import BlogEdit from '../views/BlogEdit.vue'
import BlogDetail from '../views/BlogDetail.vue'
import test from  '../views/test.vue'

Vue.use(VueRouter)

  const routes = [
    {
      path: '/',
      name: 'Index',
      redirect: {name: "Blogs"},
      meta:{
        title:'首页|卷儿哥的博客'
      }
    },
    {
      path: '/blogs',
      name: 'Blogs',
      component: Blogs,
      meta:{
        title:'博客|卷儿哥的博客'
      }
    },
    {
      path: '/login',
      name: 'Login',
      component: Login,
      meta:{
        title:'登录|卷儿哥的博客'
      }
    },
    {
      path: '/blog/add',
      name: 'BlogAdd',
      component: BlogEdit,
      meta: {
        requireAuth: true,
        title:'添加|卷儿哥的博客'
     } 
    },
    {
      path: '/blog/:blogId',
      name: 'BlogDetail',
      component: BlogDetail,
      meta:{
        title:'详情|卷儿哥的博客'
      }
    },
    {
      path: '/blog/:blogId/edit',
      name: 'BlogEdit',
      component: BlogEdit,
      meta: {
        requireAuth: true,
        title:'编辑|卷儿哥的博客'
      }
    },
    {
      path: '/test',
      name: 'test',
      component: test,
      meta:{
        title:'测试|卷儿哥的博客'
      }
    }
]

const router = new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

3.2 路由权限拦截

在原有代码的基础上增加了页面标题的重置代码。

import router from "./router";

// 路由判断登录 根据路由配置文件的参数
router.beforeEach((to, from, next) => {
// 重置页面的标题
  if (to.meta.title) {
    document.title = to.meta.title
  }
  if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限

    const token = localStorage.getItem("token")
    console.log("------------" + token)

    if (token) { // 判断当前的token是否存在 ； 登录存入的token
      if (to.path != '/login') {
        next()
      } 
    } else {
      next({
        path: '/login'
      })
    }
  } else {
    next()
  }
})

4. 全局状态配置

全局状态管理是一个全局状态数据的共享的地方，方便各组件之间相互传递数据，下面的代码是一个保持登录token和登录用户数据的简单实例。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    token: '',
    userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
  },
  mutations: {
    // set
    SET_TOKEN: (state, token) => {
      state.token = token
      localStorage.setItem("token", token)
    },
    SET_USERINFO: (state, userInfo) => {
      state.userInfo = userInfo
      sessionStorage.setItem("userInfo", JSON.stringify(userInfo))
    },
    REMOVE_INFO: (state) => {
      state.token = ''
      state.userInfo = {}
      localStorage.setItem("token", '')
      sessionStorage.setItem("userInfo", JSON.stringify(''))
    }

  },
  getters: {
    // get
    getUser: state => {
      return state.userInfo
    }

  },
  actions: {
  },
  modules: {
  }
})

5. 登录功能

最基本的登录功能，完整项目代码请参考 《超详细！4小时开发一个SpringBoot+vue前后端分离博客项目！！》

<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar>卷儿哥的博客</div>
        </div>
        
      </el-header>
      <el-main>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-main>
    </el-container>

  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        circleUrl: "http://xxx.xxxx.xx/me/avatar.png",
        ruleForm: {
          username: 'xxxxx',
          password: 'xxxxx'
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请选择密码', trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const _this = this
            this.$axios.post('/login', this.ruleForm).then(res => {

              console.log(res.data)
              const jwt = res.headers['authorization']
              const userInfo = res.data.data

              // 把数据共享出去
              _this.$store.commit("SET_TOKEN", jwt)
              _this.$store.commit("SET_USERINFO", userInfo)

              // 获取
              console.log(_this.$store.getters.getUser)
              _this.$router.push("/blogs")
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
// 省略.....

</style>

6. 打包配置

在根目录下新建vue.config.js，配置如下：

const path = require('path');

module.exports = {
    publicPath:'./',    // 公共路径
    outputDir: 'dist', // 不同的环境打不同包名
    css: {  // 一次配置，全局使用，这个scss 因为每个文件都要引入
        loaderOptions: {
            sass: {
                data: `@import "./src/assets/hotcss/px2rem.scss";`
            }
        }
    },
    lintOnSave:false,  // 关闭eslint
    productionSourceMap:true,  // 生产环境下css 分离文件
    devServer:{   // 配置服务器
        port:8080,
        open:true,
        https:false,
        overlay: {
            warnings: true,
            errors: true
        }
    },
}

然后就可以执行打包命令 npm run build，编译完成后，到dist目录下双击打开index.html文件即可在浏览器中浏览相关页面了

7. 工程目录总体结构