Vue第二节--了解vue工作原理

学习vue-element-admin的总结

1 标题结构组成----------------------------

布局layout-->路由routes-->侧边栏sidebar-->

2 路由的使用----------------------------

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

3 配置项----------------------------

//当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
hidden: true // (默认 false)

//当设置 noRedirect 的时候该路由在面包屑导航中不可被点击

redirect: 'noRedirect'

//当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式–如组件页面
//只有一个时，会将那个子路由当做根路由显示在侧边栏–如引导页面
//若你想不管路由下面的 children 声明的个数都显示你的根路由
//你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由

alwaysShow: true

name: 'router-name' //设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
meta: {
  roles: ['admin', 'editor'] //设置该路由进入的权限，支持多个权限叠加
  title: 'title' //设置该路由在侧边栏和面包屑中展示的名字
  icon: 'svg-name' //设置该路由的图标
  noCache: true //如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
  breadcrumb: false // 如果设置为false，则不会在breadcrumb面包屑中显示
}

例子:

{
  path: '/permission',
  component: Layout,
  redirect: '/permission/index', //重定向地址，在面包屑中点击会重定向去的地址
  hidden: true, // 不在侧边栏线上
  alwaysShow: true, //一直显示根路由
  meta: { roles: ['admin','editor'] }, //你可以在根路由设置权限，这样它下面所以的子路由都继承了这个权限
  children: [{
    path: 'index',
    component: ()=>import('permission/index'),
    name: 'permission',
    meta: {
      title: 'permission',
      icon: 'lock', //图标
      role: ['admin','editor'], //或者你可以给每一个子路由设置自己的权限
      noCache: true // 不会被 <keep-alive> 缓存
    }
  }]
}

4 路由----------------------------

这里的路由分为两种，constantRoutes 和 asyncRoutes

constantRoutes： 代表那些不需要动态判断权限的路由，如登录页、404、等通用页面。
asyncRoutes： 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。

这里所有的路由页面都使用 路由lazy-loading懒加载(当打包构建应用时，Javascript 包会变得非常大，影响页面加载速度。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。)

browserHistory 和 hashHistory

5 侧边栏----------------------------

侧边栏主要基于 element-ui 的 el-menu 改造
置unique-opened来控制侧边栏,例子Sidebar/index.vue中设，是否只保持一个子菜单的展开

6 多级目录----------------------------

如果你的路由是多级目录，如本项目 @/views/nested 那样， 有三级路由嵌套的情况下，要手动在二级目录的根文件下添加一个 <router-view>,原则上有多少级路由嵌套就需要多少个

<router-view>

7 点击侧边栏 刷新当前路由--------------------

我们监听侧边栏每个 link 的 click 事件，每次点击都给 router push 一个不一样的 query 来确保会重新刷新 view。

clickLink(path) {
  this.$router.push({
    path,
    query: {
      t: +new Date() //保证每次点击路由的query项都是不一样的，确保会重新刷新view
    }
  })
}

8 新增页面–多级目录

1 代码

{
  path: '/excel',
  component: Layout,
  redirect: '/excel/export-excel',
  name: 'excel',
  meta: {
title: 'excel',
icon: 'excel'
  },
  children: [
{
  path: 'export-excel',
  component: ()=>import('excel/exportExcel'),
  name: 'exportExcel',
  meta: { title: 'exportExcel' }
}
  ]
}

2 创建文件夹
新增完路由之后不要忘记在 @/views 文件下 创建对应的文件夹

3 样式写法

常见的工作流程是，全局样式都写在 src/styles 目录下，每个页面自己对应的样式都写在自己的 xxx.vue <style scoped></style>文件之中

<style scoped></style>

由于 children 下面只声明了一个路由所以不会有展开箭头，如果children下面的路由个数大于 1 就会有展开箭头，如下面所示。 如果你想忽视这个自动判断可以使用 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由。详情见路由和侧边栏

多级目录(嵌套路由)

如果你的路由是多级目录，有三级路由嵌套的情况下，不要忘记还要手动在二级目录的根文件下添加一个 <router-view>
–原则上有多少级路由嵌套就需要多少个<router-view>

—自定义 element-ui 样式

现在我们来说说怎么覆盖 element-ui 样式。由于 element-ui 的样式我们是在全局引入的，所以你想在某个页面里面覆盖它的样式就不能加 scoped，但你又想只覆盖这个页面的 element 样式，你就可在它的父级加一个 class，用命名空间来解决问题

.article-page {
/* 你的命名空间 /
.el-tag {
/ element-ui 元素*/
margin-right: 0px;
}
}

9 和服务端进行交互

10 前端请求流程

vue-element-admin 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

 UI 组件交互操作； 
 调用统一管理的 api service 请求函数；
 使用封装的 request.js 发送请求； 
 获取服务端返回；
 更新 data；

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 @/src/api 文件夹中，并且一般按照 model 纬度进行拆分文件

request.js

@/src/utils/request.js 是基于 axios 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。具体可以参看 request.js。 它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。

11 引入外部模块

12 引入依赖

 npm install vue-count-to --save

加上 --save 参数会自动添加依赖到 package.json 中去

13 使用

14 全局注册

main.js文件中

import countTo from ‘vue-count-to’

Vue.component(‘countTo’, countTo)

15 构建和发布

16 构建

17 打包正式环境

npm run build:prod

18 打包预发布环境

npm run build:stage

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。

如果需要自定义构建，比如指定 dist 目录等，则需要通过 config的 outputDir 进行配置。

19 分析构建文件体积

 npm run preview -- --report

运行之后你就可以在

http://localhost:9526/report.htm

l 页面看到具体的体积分布

20 前端路由与服务端的结合

vue-element-admin 中，前端路由使用的是 vue-router
所以你可以选择两种方式：browserHistory 和 hashHistory。

两者的区别简单来说是对路由方式的处理不一样，hashHistory 是以 # 后面的路径进行处理，通过 HTML 5 History 进行前端路由管理，而 browserHistory 则是类似我们通常的页面访问路径，并没有 #，但要通过服务端的配置，能够访问指定的 url 都定向到当前页面，从而能够进行前端的路由管理。

本项目默认使用的是 hashHistory ，所以如果你的 url 里有 #，想去掉的话，需要切换为 browserHistory。 修改 src/router/index.js 中的 mode 即可