浅谈webpack+vue从零开始的后台管理项目(二) ----- vue项目基础功能完善

前言

上一篇讲了使用webpack初始化构建vue项目, 那么这一篇接着上一篇的内容继续讲一下,element的引入, axios请求载入, router路由载入和vuex状态管理

一.公用样式初始化重置

在讲公用样式初始化重置之前, 首先需要知道为什么要样式重置.

为了兼容性考虑，每个浏览器默认样式不一样，比如行高，某个浏览器是1，另外zd一个浏览器可能是1.1，再有一个浏览器可能就是0.9，这样在开发网页写样式表的时候，处理起来回比较麻烦，所以直接给重答置统一，这样就能很方便的处理兼容性。

所以, 通常我们在开发项目时, 都会在如前文中的style->common.js中进行一些样式重置.来保证后续开发中一些不必要的影响.

样式重置代码就不写了, 有很多, 如

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;} 

 ol,ul{margin:0; padding:0;}
a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
复制代码

二.Element的引入

通常在我们进行vue开发时, 一般都是采用vue+element的组合去进行项目开发.以此为基准,说一下element的引入.

1.安装element-ui, 在main.js中引入, 并同时引入样式, 然后就可以使用了,

基本按照element官方指南来使用就可以了, 当然, 项目中推荐使用按需加载, 方法官网也有提供

2. 使用cdn, 载入element-ui, 单文件组件内, 按需引入组件, 需要注意处理引用组件重复加载问题, 使用happyBabel

三.axios, 请求载入

1.第一步, 首先当然是先安装axios,

npm i axios --save

2.第二步, 在src目录下新建axios文件夹, 在axios下新建http.js, 在http.js中创建axios对象

import axios from 'axios'
import Vue from 'vue'
import store from '@/store'

const service = axios.create({
  baseURL: '', // 默认的地址
  timeout: 15000 // 请求超时时间
})

// http request 请求拦截器, 在发送请求之前, 对请求数据做一些处理,
service.interceptors.request.use(
  config => {
    if (store.state.app.Token) {
      // 为每一个请求携带TOKEN
      config.headers['Authorization'] = store.state.app.Token
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// http response 响应拦截器, 在响应返回时,先一步对返回数据进行一定处理
service.interceptors.response.use(
  response => {
    console.log(response)
    // 多种返回响应状态判断
    return Promise.resolve(response);
  },
  error => {
    if (error.response.status === 401) {
      // notification.open({
      //   message: `登录过期,请重新登录`,
      //   icon: <Icon type="info-circle" />
      // });
      alert(error.response.data.errorMsg)
    }
    if (error.response.status === 500) {
      alert('500');
    }
    if (error.response.status === 403) {
      alert('当前用户没有权限');
    }
    console.log(error, '进入')
    return Promise.reject(error)
  }
)

// 挂载请求
Vue.prototype.$axios = service

// get.post.put.del.patch请求方法提取
const get = (url, params) => {
  params = removeEmptyParmas(params)
  return service.get(url, { params })
}

const post = (url, params) => {
  return service.post(url, params)
}

const put = (url, params) => {
  return service.put(url, params)
}

const del = (url, params) => {
  return service.delete(url, params)
}
const patch = (url, params) => {
  return service.patch(url, params)
}
export default service
export {
  get,
  post,
  put,
  del,
  patch
}
复制代码

3. 每个单文件组件.vue都对应一个api接口文件, 方便后期维护

如: login.vue 对应的就是在axios文件夹下创建一个login.js, 然后在它内部写接口请求方法

import { get, post } from './http'

export default {
  // 1. 用户登录
  loginByUsername: (params) => post('/api/internal/user/login', params),

  // 2. 退出登录
  logout: (params) => post('/api/internal/user/logout', params),

  // 3. 获取用户信息
  getUserInfo: () => get(`/api/internal/user/info`)
}
复制代码

在上一步的请求方法提取, 是为了在这一步上, 会看起来比较简洁明了, 当然, 如果需要设置特殊超时什么的,按照正常的设置就行.

4.axios在单文件组件中的使用

首先是引入对应的接口请求文件, 再去调用方法

使用很简单, 参照的逻辑就是相应组件引入对应请求文件, 然后调用方法,

四.router 路由载入

1. 安装vue-router

npm i vue-router --save

2.在src目录下新建router文件夹, 在router文件夹下新建index.js

需要注意的是, 嵌套路由需要写在对应router的children内, 如上, 然后在main.js中注入

3.嵌套路由的使用

在对应需要使用嵌套路由的单文件组件中, 使用router-view即可, 关于路由的跳转, 则使用router-link 标签, 其中to属性填入router中配置的path, , 如果有路由传递参数的, 则在path后缀:id? , 其中id为自定义传递属性, 在之后在单文件组件中需要从路径中拿去参数时, 可以通过this.$route.params.id获取

4.动态路由

首先我们要了解什么是动态路由, 一般而言, 动态路由指的是两种情况下的动态路由, 一种是由后台提供权限匹配规则, 然后在前端路由列表中过滤出符合条件的路由, 将它显示出来, 这种也是最常见的一种. 另一种就是由后台返回菜单, 前端动态添加. 这种比较少见

第一种, 也就是最主流常见的类型, 就是通过添加一个mate属性, 
然后通过mate属性中的role属性进行匹配,筛选出符合条件的路由, 并显示出来,, 这种方法就不多赘述了, 百度一查就很多,
复制代码

第二种就是, 前端只做基本路由的设置, 一些权限路由通过后台返回, 然后前端对应展示菜单栏,
相对而言复杂一些, 也少见一些, 这里放个文章链接, 就不细讲了, 基本用第一种就够了.
https://juejin.im/post/5e129825e51d4541274ad229
复制代码

五. vuex状态管理

1. 安装vuex

npm i vuex --save

2. 在src目录下新建store文件夹, 在store文件夹下新建modules文件夹, 同时新建index.js, 然后在main.js中注入store

3. vuex的五个属性,

1）state

state是存储的单一状态，是存储的基本数据。

2）Getters

getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，
getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations

mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）

4）Actions

actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

5）Module

Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。
复制代码

附上一个链接, 可以详细了解

zhuanlan.zhihu.com/p/78981485