最佳Vue的细节操作

webapck配置文件 vue.config.js

// commonjs nodejs
const port = 7070
const title = 'vue的最佳实践'
module.exports = {
  // 程序的上下文
  publicPath: 'best-practice',
  devServer: {
    port
  },
  configureWebpack: {
    name: title
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- webpack的占位符 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

命令行命令
vue inspect webapck的所有配置

vue inspect --rules 查看webapck中的rules规则模块

vue inspect --rule vue 查看单个模块中的规则

vue inspect --plugins 可以查看配置中的所有插件

vue inspect --plugin vue-loader 单个插件的配置项

图标的使用

项目要使用icon,传统方案图标字体（字体文件+样式文件），不便维护，
svg方案采用svg-sprite-loader 自动加载打包，方便维护
使用icon前先安装依赖：svg-sprite-loader

 npm i svg-sprite-loader -D

下载图标，存入src/icons/svg中修改规则和新增规则，vue.confifig.js

// resolve定义一个绝对路径获取函数
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
// commonjs nodejs
const port = 7070
const title = 'vue的最佳实践'
module.exports = {
  // 程序的上下文
  //publicPath: 'best-practice',
  devServer: {
    port
  },
  configureWebpack: {
    name: title
  },
  //   链式webapck的配置  对config进行链式操作
  chainWebpack (config) {
    //   module中是所有的规则   获取svg
    // svg规则配置一下，排除icons目录
    config.module.rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
      // 如果遇到icons目录 就退回上一级
      // 新增icons规则 设置svg-sprite-loader
    config.module
      .rule('icons')// 定义一个规则
      .test(/\.svg$/) // 什么文件的后缀名
      .include.add(resolve('src/icons')) // 规则对应的测试的地址
      .end()
      .use('svg-sprite-loader') // 应用一下svg-sprite-loader
      .loader('svg-sprite-loader') // 找到它的loader 给他做进一步的配置
      .options({
        symbolId: 'icon-[name]'
      }) // 选项配置  symbolId表示将来以什么方式使用图标
      .end()
  }
}

封装成组件 components/SvgIcon.vue

<template>
    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
        <use :xlink:href="iconName"/>
    </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    },
    svgClass () {
      if (this.className) {
        return 'svg-icon' + this.className
      } else {
        return 'svg-icon'
      }
    }
  }
}
</script>

<style lang="less" scoped>
    .svg-icon{
        width: 1em;
        height:1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
</style>

在svg同文件夹下创建一个index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon.vue'
// 全局引入SvgIcon组件
Vue.component('svg-icon', SvgIcon)
// require.context   webapck中的方法
// 参数1：指定目录 以它为上下文 去自动加载  
//参数2: false, 表示svg文件夹下不会再嵌套别的文件夹了
//参数3；加个正则，让它去匹配
const req = require.context('./svg', false, /\.svg$/)
//   ['qq.svg', 'wx.svg']
req.keys().map(req)

main.js中全局引入index.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './icons'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

直接全局使用

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home
      <svg-icon icon-class="qq"></svg-icon></router-link> |
      <router-link to="/about">About<svg-icon icon-class="xm"></svg-icon></router-link>
    </div>
    <router-view/>
  </div>
</template>

项目开发阶段

动态路由

路由定义
路由分为两种 constantRouters 和 asyncRouters
**constantRoutes:代表那些不需要动态判断权限的路由,如登录、看板、404等通用页面
asyncRoutes:代表那些需要判断权限并通过addRoutes动态添加的页面**

权限控制+动态路由定义路由，router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout' // 布局页
Vue.use(Router)

// 通用页
export const constRoutes = [
  {
    path: '/login',
    component: () => import('@/views/Login'),
    hidden: true// 导航菜单忽略该项
  }, {
    path: '/',
    component: Layout, // 应用布局
    redirect: '/home',
    children: [
      {
        path: 'home',
        component: () => import(/* webpackChunkName:"home" */'@/views/Home.vue'),
        name: 'home',
        meta: {
          title: 'Home', // 导航菜单项标题
          icon: 'qq' // 导航菜单项图标
        }
      }
    ]
  }
]
export const asyncRoutes = [
  {
    path: '/about',
    component: Layout,
    redirect: '/about/index',
    children: [
      {
        path: 'index',
        component: () => import(/* webapckChunkName:'home' */ '@/views/About.vue'),
        name: 'about',
        meta: {
          title: 'About',
          icon: 'qq',
          roles: ['admin', 'editor']
        }
      }
    ]
  }
]
export default new Router({
  mode: 'history',
  base: process.env.BABEL_URL,
  routes: constRoutes
})

创建布局页面，layout/index.vue

<template>
    <div class="app-wrapper">
        <!-- <sidebar class="sidebar-container"/> -->
        <div class="main-container">
            <router-view />
        </div>
    </div>
</template>

创建用户登录页面，views/Login.vue

<template>
    <div>
        <h2>用户登录</h2>
        <div>
            <input type="text" v-model="username">
            <button @click="login">登录</button>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      username: 'admin'
    }
  },
  methods: {
    login () {
      // 派发一个登录的action
      this.$store.dispatch('user/login', { username: this.username })
        .then(() => {
          this.$router.push({
            path: this.$route.query.redirect || '/'
          })
        })
        .catch(error => {
          alert(error)
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

添加动态路由

asyncRoutes中定义的路由需要在用户登录后获取其角色并过滤出有权访问的部分，最后动态添加至router
添加动态路由定义，router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout' // 布局页
Vue.use(Router)

// 通用页
export const constRoutes = [
  {
    path: '/login',
    component: () => import('@/views/Login'),
    hidden: true// 导航菜单忽略该项
  }, {
    path: '/',
    component: Layout, // 应用布局
    redirect: '/home',
    children: [
      {
        path: 'home',
        component: () => import(/* webpackChunkName:"home" */'@/views/Home.vue'),
        name: 'home',
        meta: {
          title: 'Home', // 导航菜单项标题
          icon: 'qq' // 导航菜单项图标
        }
      }
    ]
  }
]
export const asyncRoutes = [
  {
    path: '/about',
    component: Layout,
    redirect: '/about/index',
    children: [
      {
        path: 'index',
        component: () => import(/* webapckChunkName:'home' */ '@/views/About.vue'),
        name: 'about',
        meta: {
          title: 'About',
          icon: 'qq',
          roles: ['admin', 'editor']
        }
      }
    ]
  }
]
export default new Router({
  mode: 'history',
  base: process.env.BABEL_URL,
  routes: constRoutes
})

路由守卫，创建./src/permission.js，并在main.js中引入

// 路由全局守卫
// 权限控制逻辑在这里
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import { getToken } from '@/utils/auth' // 从cookie获取令牌
const whiteList = ['/login']// 无需令牌白名单
router.beforeEach(async (to, from, next) => {
  // 获取令牌判断用户是否登录
  const hasToken = getToken()
  if (hasToken) {
    if (to.path === '/login') {
      // 若已登录重定向至首页
      next({ path: '/' })
    } else {
      // 若用户角色已附加则说明动态路由已添加
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next() // 继续即可
      } else {
        try {
          // 先请求获取用户信息
          const { roles } = await store.dispatch('user/getInfo')
          // 根据当前用户角色动态生成路由
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
          // 添加这些路由至路由器
          router.addRoutes(accessRoutes)
          //   继续路由切换，确保addRoutes完成
          next({ ...to, replace: true })
        } catch (error) {
          // 出错需重置令牌并重新登陆(令牌过期、网络错误等原因)
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
        }
      }
    }
  } else {
    // 用户无令牌
    if (whiteList.indexOf(to.path) !== -1) {
      // 白名单路由路过
      next()
    } else {
      // 重定向至登陆页
      next(`/login?redirect=${to.path}`)
    }
  }
})

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store'
import './icons'
// 路由守卫
import './permission'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

添加缺少组件：

element-ui： vue add element
js-cookie: npm i js-cookie -S

3. 添加utils/auth.js

import Cookies from 'js-cookie'
const Token = 'token'

export function getToken () {
  return Cookies.get(Token)
}
export function setToken (token) {
  return Cookies.set(Token, token)
}
export function removeToken () {
  return Cookies.remove(Token)
}

vuex相关模块实现，创建store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import permission from './modules/permission'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: { permission, user },
  // 全局定义getters便于访问
  getters: {
    roles: state => state.user.roles
  }
})
export default store

user模块：用户数据、用户登录等，store/modules/user.js

import { getToken, setToken, removeToken } from '@/utils/auth'
const state = {
  token: getToken(),
  roles: []
  // 其他用户信息
}
const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  }
}

const actions = {
  // user login
  login ({ commit }, userInfo) {
    const { username } = userInfo
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (username === 'admin' || username === 'jerry') {
          // 保存状态
          commit('SET_TOKEN', username)
          //   写入cookie
          setToken(username)
          //   信息返回
          resolve()
        } else {
          reject('用户名、密码错误')
        }
      }, 1000)
    })
  },
  //   get user info
  getInfo ({ commit, state }) {
    return new Promise((resolve) => {
      setTimeout(() => {
        const roles = state.token === 'admin' ? ['admin'] : ['editor']
        commit('SET_ROLES', roles)
      }, 1000)
    })
  },
  removeToken ({ commit }) {
    return new Promise(resolve => {
      commit('SET_TOKEN', '')
      commit('SET_ROLES', [])
      removeToken()
      resolve()
    })
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

permission模块：路由配置信息、路由生成逻辑, store/modules/permission.js

import { asyncRoutes, constRoutes } from '@/router'
/**
 * 根据路由meta.role确定是否当前用户拥有访问权限
 * @roles 用户拥有角色
 * @route  待判定路由
*/
function hasPermission (roles, route) {
// 如果当前路由有roles字段需判断用户访问权限
  if (route.meta && route.meta.roles) {
    // 若用户拥有的角色有被包含在待判定路由角色表中的则拥有访问权
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    // 没有设置roles则无需判定即可访问
    return true
  }
}
/**
 * 递归过滤AsyncRoutes路由表
 * @routes  待过滤路由表 首次传入的就是AsyncRoutes
 * @roles  用户拥有角色
*/
export function filtersAsyncRoutes (routes, roles) {
  const res = []
  routes.forEach(route => {
    // 复制一份
    const tmp = { ...route }
    // 如果用户有访问权 则加入结果路由表
    if (hasPermission(roles, tmp)) {
      // 如果存在子路由则递归过滤
      if (tmp.children) {
        tmp.children = filtersAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
  return res
}
const state = {
  routes: [], // 完整路由表
  addRoutes: [] // 用户可访问路由表
}
const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constRoutes.concat(routes)
  }
}
const actions = {
  generateRoutes ({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      // 用户是管理员则拥有完整的访问权限
      if (roles.includes('admin')) {
        accessedRoutes = asyncRoutes || []
      } else {
        // 否则需要根据角色做过滤处理
        accessedRoutes = filtersAsyncRoutes(asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    })
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

导航菜单⽣成

导航菜单是根据路由信息并结合权限判断⽽动态⽣成的。它需要⽀持路由的多级嵌套，所以这⾥要⽤到递归组件。

菜单结构是典型递归组件，
数据准备，添加getter⽅法，store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import permission from './modules/permission'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: { permission, user },
  // 全局定义getters便于访问
  getters: {
    roles: state => state.user.roles,
    permission_routes: state => state.permission.routes
  }
})
export default store

SideMenu/index.vue

<template>
    <div>
        <ul>
            <!-- 传递base_path是由于子路由是相对地址 -->
            <item
                :model="route"
                v-for="route in permission_routes"
                :key="route.path"
                :base-path="route.path"
            >

            </item>
        </ul>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Item from './Item'
export default {
  components: { Item },
  computed: {
    ...mapGetters(['permission_routes'])
  }

}
</script>

<style lang="scss" scoped>

</style>

按钮权限

import store from '@/store'
const permission = {
  // 指令已经添加到元素上  el-指令相关的Dom元素,binding - 对象
  // {}
  inserted (el, binding) {
    // 获取指令的值：按钮要求的角色数组
    // 结构value 并取别名pRoles

    const { value: pRoles } = binding
    // 获取用户角色
    const roles = store.getters && store.getters.roles
    if (pRoles && pRoles instanceof Array && pRoles.length > 0) {
      // 判断用户角色中是否有按钮要求的角色
      const hasPermission = roles.some(role => {
        return pRoles.includes(role)
      })
      //   如果没有权限则删除当前dom
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定按钮要求角色数据,如v-permission="['admin','editor']"`)
    }
  }
}
export default permission

mian.js中引入

// 路由守卫
import './permission'

面包屑组件

/components/Breadcrumb

<template>
    <!-- element-ui提供的面包屑组件 -->
    <el-breadcrumb separator="/" class="app-breadcrumb">
        <transition-group name="breadcrumb">
            <el-breadcrumb-item v-for="(item,index)in levelList" :key="item.path">
                <!-- 不能跳转：路由没有匹配值重定向或当前项已经是最后一项 -->
                <span v-if="item.redirect === 'noRedirect'||index===levelList.length -1" class="no-redirect">
                    {{item.meta.title}}
                </span>
                <a v-else @click.prevent="handleLink(item)">{{item.meta.title}}</a>
            </el-breadcrumb-item>
        </transition-group>
    </el-breadcrumb>
</template>

<script>
// 可编译path/:id
import pathToRegexp from 'path-to-regexp'
export default {
  data () {
    return {
      levelList: null
    }
  },
  watch: {
    // 观察$route变化,重新生成面包屑的链接
    $route: {
      handler (route) {
        this.getBreadcrumb()
      },
      immediate: true
    }
  },
  methods: {
    getBreadcrumb () {
      console.log(this.$route.matched)
      //   面包屑仅显示包含meta.title且item.meta.breadcrumb不为false的路由
      // /about/bla
      // matched:['/','/about','/about/bla']
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false
      )
      // 根路由
      const first = matched[0]
      // 根匹配只要不是home下一级
      if (!this.isHome(first)) {
        matched = [{ path: '/', redirect: '/home', meta: { title: '首页' } }].concat(matched)
      }
      // 处理完指定好levelList
      this.levelList = matched
    },
    isHome (route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'home'.toLocaleLowerCase()
    },
    pathCompile (path) {
      // 把参数拿出来
      const { params } = this.$route
      // 获取编译函数
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink (item) {
      const { redirect, path } = item
      // 若存在重定向 按重定向走
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      // 编译path,避免存在路径参数
      this.$router.push(this.pathCompile(path))
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb .no-redirect{
    color:#97a8be;
    cursor: text;
}
// breadcrumb transition
.breadcrumb-enter-active,
.breadcrumb-leave-active{
 transition: all .5s;
}
.breadcrumb-enter,
.breadcrumb-leave-active{
    opacity:0;
    transform:translateX(20px)
}
.breadcrumb-move{
    transition: all .5s
}
.breadcrumb-leave-active{
    position:absolute;
}
</style>

使用 layout/index

<template>
    <div class="app-wrapper">
        <!-- <sidebar class="sidebar-container"/> -->
        <div class="main-container">
            <Breadcrumb></Breadcrumb>
            <router-view />
        </div>
    </div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
export default {
  components: {
    Breadcrumb
  }
}
</script>

数据交互

数据交互流程
api service => request => local mock /easy-mock/server api
*主要问题分析:
1、有时需要对请求头、响应进行统一预处理
2、请求不同数据源时url会变化,需要根据环境自动修改url
3、可能出现跨域问题*
封装request
*解决前两个问题需要统一封装请求代码
安装axios: npm i axios -S
创建@/utils/request.js*

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url基础地址，解决不同数据源url变化问题
  //   withCredentials:true,//跨域时若要发送cookie需设置该选项
  timeout: 5000// 超时
})
// 请求拦截
service.interceptors.request.use(
  config => {
    // do something
    if (store.getters.token) {
      // 设置令牌请求头
      config.headers["Authorization"] = 'Bearer' + getToken()
    }
    return config
  },
  error => {
    // 请求错误预处理
    // console.log(error) //for debug
    return Promise.reject(error)
  }
)
// 响应拦截
service.interceptors.response.use(
  // 通过自定义code判定响应状态，也可以通过HTTP状态码判定
  response => {
    // 仅返回数据部分
    const res = response.data
    // code不为1则判定为一个错误
    if (res.code !== 1) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 10
      })
      // 假设： 10008-非法令牌；10012-其他客户端已登录；100140-令牌过期
      if (res.code === 10008 || res.code === 10012 || res.code === 10014) {
        // 重新登录
        MessageBox.confirm(
          '登录状态异常,请重新登录',
          '确认登录信息',
          {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
            store.dispatch("user/resetToken").then(()=>{
                location.reload()
            })
        })
      }
      return Promise.reject(new Error(res.message||"Error"))
    } else {
        return res
    }
  },
  error => {
     //console.log("err"+error)//for debug
     Message({
         message: error.message,
         type:"error",
         duration: 5*1000
     })
     return Promise.reject(error)
  }
)
export default service

设置VUE_APP_BASE_API环境变量，创建.env.development⽂件

base api, 前缀VUE_APP是vue-cli要求的

VUE_APP_BASE_API = '/dev-api'
添加token的getter⽅法

import Vue from 'vue'
import Vuex from 'vuex'
import permission from './modules/permission'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: { permission, user },
  // 全局定义getters便于访问
  getters: {
    roles: state => state.user.roles,
    token: state => state.user.token,
    permission_routes: state => state.permission.routes
  }
})
export default store

测试代码
创建@/api/user.js

import request from "@/utils/request"
export function login(data){
    return request({
        url:'/user/login',
        method:"post",
        data
    })
}
export function getInfo(){
    return request({
        url:'/user/info',
        method:'get'
    })
}

要测试需要接⼝

数据mock

*数据模拟常见的两种方式,本地mock和线上easy-mock
本地mock修改vue.confifig.js，给devServer添加相关代码：
post请求需额外安装依赖： npm i body-parser -D*

const bodyParser = require('body-parser')
module.exports = {
  // 程序的上下文
//   publicPath: 'best-practice',
  devServer: {
    // node服务器代码 基于express
    before:app =>{
      // bodyParser用來解析post请求中的json数据
      app.use(bodyParser.json())
      app.use(
        bodyParser.urlencoded({
          extended: true
        })
      )
      app.post("/dev-api/user/login",(req,res)=>{
        const { username} = req.body
        if(username === "admin"||username === "jerry"){
          res.json({
            code:1,
            data: username
          })
        }else{
          res.json({
            code:10204,
            message:"用户名或密码错误"
          })
        }
      })
      app.get("/dev-api/user/info",(req,res)=>{
        //从请求头中获取令牌
        //afdfsg;gasjhjgakgka;gjshgjakjgkajkjdka
        // 令牌头  令牌体  哈希
        //加密算法   用户信息：有效期
        const auth = req.headers["authorization"]
        const roles = auth.split('')[1] === "admin"?["admin"]:["editor"]
        res.json({
          code:1,
          data:roles
        })
      })
    }
    }

调用接口 @/store/modules/user.js

import { login, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
const actions = {
  login ({ commit }, userInfo) {
    // 调用并处理结果，错误处理已拦截无需处理
    return login(userInfo).then((res) => {
      commit('SET_TOKEN', res.data)
      setToken(res.data)
    })
  },
  // get user info
  getInfo ({ commit, state }) {
    return getInfo(state.token).then(({ data: roles }) => {
      commit('SET_ROLES', roles)
      return { roles }
    })
  }
}

esay-mock

使用步騶：

登录easy-mock⽹站（https://easy-mock.com/login）
创建一个项目
创建需要的接口
调用base_url,.env.development

VUE_APP_BASE_API = ' https://easy-mock.com/mock/5e...'

解决跨域
*如果请求的接口在另一台服务器上，开发时则需要设置代理避免跨域问题
添加代理设置 vue.config.js*

 devServer:{
    port :port,
    proxy:{
      //代理/dev-api/user/login到http://127.0.0.1:3000/user/login
      [process.env.VUE_APP_BASE_API]:{
        target:`http://127.0.0.1:3000`,
        changeOrigin:true,//要不要变更origin头
        pathRewrite:{//地址重写：http://127.0.0.1:3000/user/login
          ["^"+process.env.VUE_APP_BASE_API]:""
        }
      }
    }
  },

创建⼀个独⽴接⼝服务器，~/test-server/index.js

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(
  bodyParser.urlencoded({
    extended: true
  })
)
app.post('/user/login', (req, res) => {
  const {
    username
  } = req.body
  if (username === 'admin' || username === 'jerry') {
    res.json({
      code: 1,
      data: username
    })
  } else {
    res.json({
      code: 10204,
      message: '⽤户名或密码错误'
    })
  }
})
app.get('/user/info', (req, res) => {
  const roles = req.headers.authorization.split(' ')[1] ? ['admin'] : ['editor']
  res.json({
    code: 1,
    data: roles
  })
})
app.listen(3000)

git hooks

利用git hooks在每次提交代码时执行lint 执行过程如下：commit => git hooks => test&&lint 完成这两项任务需要安装：husky和lint-staged

npm install husky lint-staged -D

配置，package.json

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,vue}": [
    "eslint --fix",
    "git add"
  ]
}

最佳Vue的细节操作

webapck配置文件 vue.config.js

index.html

图标的使用

项目开发阶段

动态路由

添加动态路由

导航菜单⽣成

按钮权限

mian.js中引入

面包屑组件

数据交互

base api, 前缀VUE_APP是vue-cli要求的

数据mock

esay-mock

git hooks

HappyCodingTop

引用和评论

早已忘却的面试题，需要在隆冬忆起

2024最全ECharts 实战大全（速记版+资源）

前端开发：立即执行函数(function(){}())与(function(){})()的区别

从JavaScript中看设计模式(总结)

7天撸完KTV点歌系统,含后台管理系统(完整版)

初阶小白uniapp+vue3+鸿蒙模拟启动

TypeScript中的Omit与Pick：何时使用