Vue 框架 路由(Vue Router) Vuex 刷新页面
Vue 官网
Vue API 官网
Vue CLI 官网 npm 安装：npm install -g @vue/cli
Element 官网 npm 安装：npm i element-ui -S
vue-axios api
axios api
vue-echarts github
ECharts 的 API 文档（英文） ECharts 的 API 文档（中文） vue-echarts npm
Ant Design
Ant Design of React
Ant Design of Vue
DCloud
DCloud - 文档
HBuilderX
uni-app 跨平台
Vue 单文件组件 (SFC) 规范
Vue Router
*
*
*
整个项目是一个【主文件index.html】,index.html中会引入src文件夹中的【main.js】,main.js中会导入顶级单文件组件【App.vue】,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。
*
1、vue-element-admin 简介
vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。
【前序准备】
# 本地安装 node 和 git
node 下载地址：https://nodejs.org/zh-cn/
git 下载地址：https://git-scm.com/download/win
# 查看 node 版本
安装完 node 之后，打开【dos 窗口】输入【cmd】回车，输入【node -v】回车
# 查看 git 版本
安装完 git 之后，打开【dos 窗口】输入【cmd】回车，输入【git --version】回车
【开发】
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev
# 启动完成后会自动打开浏览器访问 http://localhost:9527
【构建和发布】
# 打包正式环境
npm run build:prod
# 打包预发布环境
npm run build:stage
TIP
可以把 vue-element-admin 当做工具箱或者集成方案仓库，在 vue-admin-template 的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。*
文件说明【vue element admin】
● src/permission.js（最先进入到此文件，走【router.beforeEach】方法）
判断token是否存在、是否有效、是否非法用户，白名单(whiteList)，进行页面跳转，非法用户跳转登录页面，合法用户跳转内部页面。
● src/utils/permission.js
checkPermission：判断角色权限
● src/utils/auth.js
获取【getToken()】、获取用户信息【user/getInfo】
● src/store/modules/user.js
调用登录API接口在此文件中实现【login({ commit }, userInfo) {】
● 根目录/.env.development【对应 npm run dev 环境】
开发环境下的配置文件
属性名必须以VUE_APP_开头，比如VUE_APP_XXX
● 根目录/.env.production【对应 npm run build 环境】
生产环境下的配置文件
属性名必须以VUE_APP_开头，比如VUE_APP_XXX
● 根目录/.env.staging
2、vue-element-admin 在线预览
vue-element-admin 在线预览
3、vue-element-admin 使用文档
vue-element-admin 使用文档
4、vue-element-admin 国内访问文档
vue-element-admin 国内访问文档
5、基础模板建议使用: vue-admin-template
github【English】
github【简体中文】
线上地址
国内访问
TIP
可以把 vue-element-admin当做工具箱或者集成方案仓库，在 vue-admin-template 的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。
6、桌面端: electron-vue-admin
桌面端: electron-vue-admin
7、Typescript 版: vue-typescript-admin-template
github【简体中文】
线上文档
线上地址
8、Mock.js
github
官网
文档
Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
● 根据数据模板生成模拟数据
● 模拟 Ajax 请求，生成并返回模拟数据
● 基于 HTML 模板生成模拟数据
9、vue 路由
Vue Router 是 Vue 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
● 嵌套的路由/视图表
● 模块化的、基于组件的路由配置
● 路由参数、查询、通配符
● 基于 Vue.js 过渡系统的视图过渡效果
● 细粒度的导航控制
● 带有自动激活的 CSS class 的链接
● HTML5 历史模式或 hash 模式，在 IE9 中自动降级
● 自定义的滚动条行为
CDN 引用：
NPM 安装：npm install vue-router
Vue 项目安装路由：进入到项目的根目录【cd D:\MyFile\VueProject】输入：install --save vue-router 回车
注意：如果在src的根目录下创建的router.js文件，\src\router.js，import可以使用
注意：如果在src的根目录下创建的router.js文件，\src\router.js，import可以使用
注意：如果在src的根目录下创建的router.js文件，\src\router.js，import可以使用
component: () => import('./views/***.vue') 或 component: () => import('@/views/***.vue')
如何在src的router目录下创建的index.js文件，\src\router\index.js，import只能使用
component: () => import('@/views/***.vue')
在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：/router/index.js 文件
import Vue from 'vue'
import Router from 'vue-router'
// 引用模板
import Home from './views/Home.vue'
import dashboard from '@/views/dashboard/index'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
},
{
path: '/dashboard',
component: dashboard
},
{
path: '/login',
component: () => import('@/views/login/index'),
//component: () => import('./views/About.vue')
},
]
})main.js 文件引入路由 /router/index.js 文件
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App),
}).$mount('#app')
*
*
*
路由 API 文档
github 示例
1、定义 (路由) 组件。
const Foo = { template: '
const Bar = { template: '
2、定义路由，每个路由应该映射一个组件。 可以是"component"
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
3、创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
4、创建和挂载根实例
const app = new Vue({
router
}).$mount('#app')
*、to router-link API 参考
*、replace router-link API 参考
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。
*、append router-link API 参考
设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b
*、routes router-link API 参考
interface RouteConfig = {
path: string,
component?: Component,
name?: string, // 命名路由
components?: { [name: string]: Component }, // 命名视图组件
redirect?: string | Location | Function,
props?: boolean | Object | Function,
alias?: string | Array
children?: Array
beforeEnter?: (to: Route, from: Route, next: Function) => void,
meta?: any,
// 2.6.0+
caseSensitive?: boolean, // 匹配规则是否大小写敏感？(默认值：false)
pathToRegexpOptions?: Object // 编译正则的选项
}
配置路由模式
● hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器。
● history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
● abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。
Hash模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。hash（#）是URL 的锚点，代表的是网页中的一个位置
History模式
只需要在配置路由规则时，加入"mode: 'history'",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
*
导航卫士、全局前置守卫、路由拦截 全局前置卫士
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
/* 必须调用 `next` */
// next(`/login?redirect=${to.path}`) // ok
// next({ path: '/documentation/index' }) // ok
// router.push({ path: '/documentation/index' }) // ok
})● to: Route: 即将要进入的目标路由对象
● from: Route: 当前导航正要离开的路由
● next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
导航守卫、全局解析守卫
这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
const router = new VueRouter({ ... })
router.afterEach((to, from) => {
// ...
})*
导航守卫、全局后置钩子
这些钩子不会接受 next 函数也不会改变导航本身
const router = new VueRouter({ ... })
router.afterEach((to, from) => {
// ...
})*
10、Vuex 状态管理模式
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它能解决你很多全局状态或者组件之间通信的问题。
store
每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
● Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
● 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
State：单一状态树 Vuex.Store 实例属性
Getter：计算属性
Mutation：状态管理
Action：状态管理
Module：状态管理
dispatch：Vuex.Store 实例方法 异步操作，数据提交至 actions ，可用于向后台提交数据
commit：Vuex.Store 实例方法 同步操作，数据提交至 mutations ，可用于登录成功后读取用户信息写到缓存里
mapState：组件绑定的辅助函数
mapGetters：组件绑定的辅助函数
mapActions
mapMutations
示例：
this.$store.commit('loginStatus', 1);
this.$store.dispatch('isLogin', true);
以 vue element admin 为例【Vuex】
第一步：首先，在 /src/store/modules/user.js 文件定义相关方法【user_name，real_name】
【注意： const state = { token: getToken() } 可解决刷新页面数据丢失问题】
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router, { resetRouter } from '@/router'
const state = {
token: getToken(),
name: '',
avatar: '',
user_name: '',
real_name: '',
department_code: '',
room_code: '',
doctor_code: '',
introduction: '',
roles: []
}
const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_INTRODUCTION: (state, introduction) => {
state.introduction = introduction
},
SET_NAME: (state, name) => {
state.name = name
},
SET_USER_NAME: (state, user_name) => {
state.user_name = user_name
},
SET_REAL_NAME: (state, real_name) => {
state.real_name = real_name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
}
}
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
console.log(`/src/store/modules/user.js Ln 36`)
login({ user_name: username.trim(), password: password }).then(response => {
const { data } = response
console.log(`/src/store/modules/user.js Ln 39 ${JSON.stringify(response)}`)
console.log(`/src/store/modules/user.js Ln 40 ${JSON.stringify(data.access_token)}`)
commit('SET_TOKEN', data.access_token)
setToken(data.access_token)
resolve()
}).catch(error => {
reject(error)
})
})
},
// get user info
getInfo({ commit, state }) {
console.log(`/src/store/modules/user.js Ln 52 ${state.token}`)
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
console.log(`/src/store/modules/user.js Ln 56 ${data}`)
if (!data) {
reject('Verification failed, please Login again.')
}
const { roles, name, user_name, real_name, avatar, introduction } = data
// roles must be a non-empty array
if (!roles || roles.length <= 0) {
reject('getInfo: roles must be a non-null array!')
}
commit('SET_ROLES', roles)
commit('SET_NAME', name)
commit('SET_USER_NAME', user_name)
commit('SET_REAL_NAME', real_name)
commit('SET_AVATAR', avatar)
commit('SET_INTRODUCTION', introduction)
resolve(data)
}).catch(error => {
reject(error)
})
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}第二步：然后，在src/views/login/index.vue就可以使用 this.$store.dispatch 方法。
this.$store.dispatch('user/login', this.loginForm)
.then(() => {
console.log(`login/index.vue,Ln 161,path:${this.redirect} query:${JSON.stringify(this.otherQuery)}`)
this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
this.loading = false
})
.catch(() => {
this.loading = false
})
const { roles } = await store.dispatch('user/getInfo')
const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
await store.dispatch('user/resetToken')第三步：然后，在 src/views/profile/index.vue 文件【user_name，real_name】
关键点1：import { mapGetters } from 'vuex'
关键点2：computed: {...mapGetters(['user_name','real_name'])}
关键点3：methods: { getUser() {} }
第四步：最后，在 src/store/getters.js 文件【user_name，real_name】
const getters = {
sidebar: state => state.app.sidebar,
size: state => state.app.size,
device: state => state.app.device,
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
user_code: state => state.user.user_code, /*********/
user_name: state => state.user.user_name, /*********/
real_name: state => state.user.real_name, /*********/
introduction: state => state.user.introduction,
roles: state => state.user.roles,
permission_routes: state => state.permission.routes,
errorLogs: state => state.errorLog.logs
}
export default getters
安装 | Vuex vuex 安装：$ npm install vuex --save
项目结构 | Vuex
/store/index.js 文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})
main.js 文件引入路由 /store/index.js 文件
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
*
*
11、VUX
VUX 是基于 WeUI 和 Vue(2.x) 开发的 移动端UI 组件库，主要服务于微信页面。
基于webpack + vue-loader + vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式。
vux-loader保证了组件按需使用，因此不用担心最终打包了整个vux的组件库代码。
VUX并不完全依赖于WeUI，VUX 在 WeUI 的基础上扩展了多个常用组件，但是尽量保持整体UI样式接近WeUI的设计规范。
*
Vant 轻量、可靠的移动端 Vue 组件库
npm 安装：npm i vant -S
*
*
*
12、Vue Loader
Vue Loader 是为 vue 文件定制的一个 webpack 的 loader，它允许你以一种名为 单文件组件 (SFC) 的格式撰写 Vue 组件。它能在开发过程中使用热重载来保持状态，为每个组件模拟出 scoped CSS 等等功能。不过大部分情况下你不需要对它直接进行配置，脚手架都帮你封装好了。
{
{ msg }}
Vue 单文件组件 (SFC) 规范 * 13、Vue Test Utils 单元测试工具 14、Vue Dev-Tools Vue 浏览器调试工具 15、Vue CLI 项目脚手架 16、Vetur VS Code插件 17、Vue axios Using bower: Using yarn: Using cdn: 关于axios会发送两次请求，有个OPTIONS请求的问题 ● 是通过vue-axios来全局使用axios，组件中也是通过this.axios来拿到axios ● 自己封装 api 请求文件 * * * 所用技术 export【导出】：用于对外输出本模块（一个文件可以理解为一个模块）变量的接口； * * 导入上面定义的 str，f0，f1，f2 * * *
.vue 文件 是一个自定义的文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 、
Vue Test Utils 是官方提供的一个单元测试工具。它能让你更方便的写单元测试。
Vue Dev-Tools Vue 在浏览器下的调试工具。写 vue 必备的一个浏览器插件，能大大的提高你调试的效率。
Vue CLI 是官方提供的一个 vue 项目脚手架，本项目也是基于它进行构建的。它帮你分装了大量的 webpack、babel 等其它配置，让你能花更少的精力在搭建环境上，从而能更专注于页面代码的编写。不过所有的脚手架都是针对大部分情况的，所以一些特殊的需求还是需要自己进行配置。建议先阅读一遍它的文档，对一些配置有一些基本的了解。
Vetur 是 VS Code 的插件. 如果你使用 VS Code 来写 vue 的话，这个插件是必不可少的。
Github开源地址
vue-axios 安装
axios api
Using npm:$ npm install axios$ bower install axios$ yarn add axios
原因是：浏览器会首先使用 OPTIONS 方法发起一个预请求，判断接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始真正的请求。
vue cli 使用 axios（目前已知有 3 种方法）
● 直接把axios挂载到vue构造函数的prototype属性上，组件中通过this.axios来拿到axios；// main.js
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.axios = axios// main.js
import Vue from 'vue'
import axios from 'axios'
import Vueaxios from 'vue-axios'
Vue.use(Vueaxios, axios)
在项目根目录创建api文件夹：\src\api；每一个功能模块创建一个js文件，比如角色管理模块，新建一个role.js文件，包含增删改查，代码如下import request from '@/utils/request'
export function getRoutes() {
return request({
url: '/routes',
method: 'get'
})
}
export function getRoles() {
return request({
url: '/roles',
method: 'get'
})
}
export function addRole(data) {
return request({
url: '/role',
method: 'post',
data
})
}
export function updateRole(id, data) {
return request({
url: `/role/${id}`,
method: 'put',
data
})
}
export function deleteRole(id) {
return request({
url: `/role/${id}`,
method: 'delete'
})
}
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}
export function getInfo(token) {
return request({
url: '/user/info',
method: 'get',
params: { token }
})
}
export function fetchArticle(id) {
return request({
url: '/article/detail',
method: 'get',
params: { id }
})
}
*
*
18、Vue axios 请求拦截器
请求拦截器axios.interceptors.request.use(function (config) {
// 在发起请求请做一些业务处理
return config;
}, function (error) {
// 对请求失败做处理
return Promise.reject(error);
});
响应拦截器axios.interceptors.response.use(function (response) {
// 对响应数据做处理
return response;
}, function (error) {
// 对响应错误做处理
return Promise.reject(error);
});
19、qs
qs 安装：npm install qs
安装完成后在需要用到的组件中：import qs from 'qs’
qs 说明：增加了一些安全性的查询 字符串解析 和 序列化字符串 的库
qs主要有两种使用方法：qu.stringify() 和 qs.parse()
qu.stringify()：将对象序列化成url的形式；以&进行拼接
qs.parse()：将URL解析成对象形式；
在main.js中全局引用：Vue.prototye.$qs = qs;
在.vue文件中使用：this.$qs.stringify(obj);
this.$qs.parse(url);
20、Vue.js 引用
*
引用
21、Promise
文档地址 Promise 是处理异步的利器。
Promise 对象代表一个异步操作，有三种状态：
● pending: 初始状态，不是成功或失败状态。
● fulfilled: 意味着操作成功完成。
● rejected: 意味着操作失败。
Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调
resolve ---》 对应then
reject ---》 对应catch
22、Vue 身份验证
工作原理
● 前端页面进行登录操作，将用户名与密码发给服务器；
● 服务器进行验证, 通过后生成token，包含信息有密钥，uid，过期时间，一些随机算法等，然后返回给前端；
● 前端将token保存在本地中，建议使用localstorage和vuex进行保存，并跳转路由页面；
● 前端每次对服务器发送请求时，都必须带上本地存储的token；
● 前端每次跳转路由，判断 localStroage 中有无 token，没有就跳转到登录页面，有则跳转到对应路由页面；
● 服务器端判断请求头中有没有token，并对token进行验证，验证成功，进行相应增删改查操作，将数据返回给前端，验证失败，返回错误码，提示错误信息，例如：token过期，返回401；请求头中没有token也返回401；
● 验证失败返回错误码，提示报错信息，然后跳转到登录页；
vuex + axios + localStorage + vue-router
*
*
23、Vue 表单验证【vue elementui form】
*
*
24、Vue 表单验证【vee-validate】
安装 npm install vee-validate --save
*
25、Vue 表单验证【vue-validator】
*
*
*
26、import、export、export default {}
Vue 使用 import ... from ...来导入组件，库，变量等。而from后的来源可以是js，vue，json。这个是在webpack.base.conf.js中设置的：// 连接路径并返回
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
resolve: {
// 在导入语句没带文件后缀时，webpack会自动按照顺序添加后缀名查找
extensions: ['.js', '.vue', '.json'],
// 配置别名
alias: {
'vue$': 'vue/dist/vue.esm.js',
// 将项目根目录中，src的路径配置为别名@
'@': resolve('src'),
}
}
}
import【导入】：用于在一个模块中加载另一个含有export接口的模块；
import --- .方式：以“父子目录”的方式定义相对路径；“. /”指当前目录；“. ./”指当前目录的上一层目录
import --- @方式：以“根目录”的方式定义相对路径，vue在webpack.base.conf.js文件中有如下配置：'@': resolve('src')
export 与 export default 区别
● export与export default均可用于导出常量、函数、文件、模块等
● 可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
● 在同一个文件或模块中，export default只能有一个，只能出现一次，export、import可以有多个
● 通过export方式导出，在导入时要加{ }，export default则不需要
● export default只能直接输出，不能先定义再输出
export输出 与 import输入
案例1//export输出（说明：以vue element admin项目为例，在api文件夹创建test.js文件并且定义output函数）
export function output() {
// ...
}
//import输入（说明：以vue element admin项目为例，在views文件夹创建test.vue并且引用output函数）
import {output} from '@/api/test.js'
案例2//test_export.js 文件代码
export const str = 'hello world'
export function f0(a) {
return a + 1
}
export const f1 = (a, b) => {
return a + b
}
export const f2 = (function () {
return 'hello'
})()//test_import.js 文件代码
//在test_import.js中引用test_export.js,test_export.js是使用export导出的变量和函数，引用时要使用{}；
import { str,f0,f1,f2 } from 'test_export' //名字要和export相同，test_import.js和test_export.js在同目录，如不同目录则 from '../../test_export.js'，扩展名可以不写
const a = f1(1,2)
//也可以写成：
import {str} from 'd1'
import {f1} from 'd1'
案例export const str = 'hello world'
export function f0(a){
return a+1
}
export const f1 = (a,b) => {
return a+b
}
export default {
str,
f0,
f1
}
export default输出 与 import输入【不需要 {} 】export default const str = 'hello world'
export default function output() {
// ...
}
import output from './example'
27、localStorage
参考文档
1、setItem(key, value)
localStorage.setItem('name', 'mazey')
localStorage.setItem('age', '23')
*
2、getItem(key)
localStorage.getItem('name') // mazey
localStorage.getItem('age') // 23
localStorage.getItem('sex') // null
*
3、removeItem(key)
localStorage.removeItem('name')
localStorage.removeItem('age')
*
4、clear()
localStorage.clear()
*
*
*
*
28、Underscore
Underscore.js 中文文档
*
*
*
30、webpack
webpack 官网
webpack 中文文档
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
*
*
*
31、Ant Design
Ant Design
Ant Design of React
Ant Design of Vue
使用 npm 或 yarn 安装
$ npm install ant-design-vue --save
$ yarn add ant-design-vue*
*
*
32、发送接口请求时，报错 Uncaught (in promise) error
原因：问题在request.js中，因为状态码不匹配，所以，直接被抛出异常了。将状态码2000改成自己的成功状态码就OK了！
如果后端返回的是【int】类型【request.js】文件就判断【int】类型 if (res.code !== 200) {}
如果后端返回的是【string】类型【request.js】文件就判断【string】类型if (res.code !== '200') {}
*
*
*
*