assets ~专门用来放静态页面的文件
router-link ~提供全局组件，提供 to 属性，会 自动加 # ，更方便的实现导航高亮
跳转传参
query 传参
查询字符串传参
1、传递：路径？参数名=参数值&参数名=参数值
2、目标组件中接收参数：$route.query.参数名
=======================
两种传参方式的区别
- 查询参数传参 (比较适合传多个参数) ① 跳转：to="/path?参数名=值&参数名2=值" ② 获取：$route.query.参数名
- 动态路由传参 (优雅简洁，传单个参数比较方便) ① 配置动态路由：path: "/path/参数名" ② 跳转：to="/path/参数值" ③ 获取：$route.params.参数名
动态路由参数可选符 可以加个可选符 ？ (传不传参数都可以跳转)
Vue 路由重定向
设置 404 页面要在最末尾，用 * 星号匹配
重定向指定路径 ，用 / 斜杠来匹配，登陆后跳转的页面
{ path: '/', redirect: './home' },
路由模式配置
使用 history 在工作，一定要和后端沟通
// 路由模式配置
mode: 'history',
编程式导航
嵌套路由 二极路由的配置
children ~值是数组
强制跳转
redirect
v-if="article.id" 等数据加载完成后再渲染
$router.back() 返回上一级
自定义模糊匹配的类名
linkActiveClass: 'active',
自定义精确匹配的类名
linkExactActiveClass: 'exact-active',
keep-alive 缓存
keep-alive ~Vue 的内置组件，包裹动态组件时，可以缓存
路由跳转本质是 销毁和创建，当跳转后返回,返回的的是重新创建的页面，如果要返回当时点击过来的页面，需要在标签上包裹 keep-alive 标签可以解决
如果有不需要缓存的组件，可以使用 keep-alive 提供 的组件属性
include （包含）
exclude （排除）
max ~最多缓存多少个组件实例
// 语法
<keep-alive :include="['组件名']" ></keep-alive>
keep-alive 额外提供的两个钩子（可以替代创建和销毁）返回缓存
创建一个工程化，使用步骤：
- 全局安装 (一次) ：yarn global add @vue/cli 或 npm i @vue/cli -g
- 查看 Vue 版本：vue --version
- 创建项目架子：vue create project-name（项目名-不能用中文）
- 启动项目： yarn serve 或 npm run serve（找package.json
vue 钩子
created 创建阶段 - 响应式数据...
mounted 挂载阶段 -渲染模板
updated 更新阶段 -修改数据，更新视图
destroyed 销毁阶段 -销毁实例
vue-07
导航守卫
全局前置守卫
拦截或者放行的关键点，在于是否有登录（权证）令牌 token
在 index.js（配置路由的文件） 中设置该属性
执行时机：每次页面跳转都会触发该函数，只要注册了全局前置守卫，路由会立即瘫痪，必须要调用 next() 方法来放行
参数一：to 到哪里去
参数二: feom 从哪里来
参数三：next 函数，决定是否放行，next() 表示放行
next('路径') 表示强制跳转到指定路径
next(false) 表示不放行
// 导航放行白名单
const whiteList = ['/login', '/register']
// 导航守卫
router.beforeEach((to, from, next) => {
const token = getToken()
if (token) {
next()
} else {
// includes 检查数组中是否有该 路径
if (whiteList.includes(to.path)) {
next()
} else {
Toast.fail('未登录')
next('/login')
}
}
})
router.afterEach 后置守卫
scoped 给所有标签添加data 属性
.replace(/<.+?>/g, '') 替换所有的标签为空
pnpm build ~打包
将所有引入资源的路径都改为相对路径，在 vue.config.js 中配置（不推荐）
publicPath: './',
ctrl+shift +左右 跳过一个单词
end 跳到最后
redirect 强制跳转页面
vuex 的使用
state
核心成员一：state 存放数据的位置
访问方式一：直接访问 this.$store.state.XXX
访问方式二： ...mapState(['count', 'title'])
mutations
核心成员二：mutations 操作 state 的唯一途径
mutations 函数只有两个参数，如果需要携带多个参数，可以传对象
所有的 mutation 函数第一个参数必须是 statoe
所有的 mutation 函数第二个参数必须是 payload (载荷)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 开启严格模式
strict: true,
// 核心成员一：state 存放数据的位置
// 访问方式一：直接访问 this.$store.state.XXX
// 访问方式二： ...mapState(['count', 'title'])
state: {
count: 100,
title: '大风'
},
// 核心成员二：mutations 操作 state 的唯一途径
// mutations 函数只有两个参数，如果需要携带多个参数，可以传对象
mutations: {
// 所有的 mutation 函数第一个参数必须是 statoe
// 所有的 mutation 函数第二个参数必须是 payload (载荷)
aClic (state, n) {
state.count += n
}
}
})
mapMutations 辅助函数
辅助函数复用性更好，但是要配置
import { mapMutations } from 'vuex'
=============================================
methods: {
// 辅助函数复用性更好，但是要配置
...mapMutations(['aClic'])
}
// 辅助函数相当于
cli (i) {
this.$store.commit('aClic', i)
},
==========================================
//使用 aClic(参数)
<button @click="aClic(1)" class="btn btn-primary">
actions 专做异步任务
核心成员三：actions 专做异步任务
参数一：必须是 context 用来获取要使用的 函数
参数二：传递过来的参数
// 核心成员三：actions 专做异步任务
actions: {
// 参数一：必须是 context 用来获取要使用的 函数
// 参数二：传递过来的参数
asySet (context, n) {
// 定时器异步任务
setTimeout(() => {
context.commit('xInp', n)
}, 1000)
}
}
=====================================
// 在组件中使用
asyCli () {
// dispatch 是调用 actioons 的函数，用法和 commit 一样
this.$store.dispatch('asySet', 123)
}
getters 计算属性
// 核心成员四：getters 计算属性，供所有组件使用的计算属性
// 所有的 getters 第一个参数都是 state
// 注意：必须要有返回值
// 核心成员四：getters 计算属性，供所有组件使用的计算属性
getters: {
// 所有的 getters 第一个参数都是 state
// 注意：必须要有返回值
getList (state) {
return state.list.filter(item => item > 5)
}
}
========================================
<p>getList: {{ $store.getters.getList }}</p>
模块 module (进阶语法)
核心成员五：modules 分模块
1、新建子模块，导出四个核心成员对象
export default {
state: {
userInfo: {
name: 'ls',
age: 28
}
},
mutations: {
},
actions: {
},
getters: {
}
}
2、在 store/index.js 中引入并注册模块
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
// 注册模块
import setting from './modules/setting'
Vue.use(Vuex)
const store = new Vuex.Store({
// 开启严格模式
strict: true,
modules: {
// 导入模块
user,
setting
}
})
export default store
辅助函数
在 模块 module 中 使用辅助函数，相比于之前，需要传递一个参数为模块名，其他照旧 （多次使用时，建议使用 辅助函数）
为什么用- module
怎么使用 -module
namespaced: true 命名空间
开启命名空间，以防同名
命名空间：给子模块提供一个独立的空间，以自己模块名名命名的空间，建议所有的子模块都开启
// 开启命名空间，以防同名
namespaced: true
.toUpperCase() ~将字母转为大写
淘宝镜像
npm config set registry registry.npm.taobao.org/
element 的使用
表单校验三要素：
1、el-form 必须要有 rules 和 :model（表示当前表单绑定的数据） 两个属性
2、el-form-item 必须要有 prop 属性来指定校验规则
3、el-input 必须要使用 v-model 绑定数据
（正则校验 pattern）
<!-- 输入框 -->
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="用户名：" prop="username">
<el-input
placeholder="请输入用户名"
v-model="form.username"
></el-input>
</el-form-item>
<el-form-item label="密码：" prop="password">
<el-input placeholder="请输入密码" v-model="form.password"></el-input>
</el-form-item>
<el-form-item class="tc">
<el-button type="primary">登录</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
===============================================
data () {
return {
form: {
username: '',
password: ''
},
// 表单校验规则
rules: {
// username 是 prop 指定的名字，一般 数据-prop-规则名 保持一致
// required 必填项
// message 提示项
// trigger 什么时机校验,可以写数组多要求（blur：失去焦点时校验，change: 校验）
username: [
{ required: true, message: '请输入用户名', trigger: ['blur' , 'change']},
{ min: 5, max: 11, message: '长度在 5 到 11 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
// 正则校验 pattern
{ pattern: /^\w{5,10}$/, message: '长度在 5 到 10 个字符', trigger: 'blur' }
]
}
}
}
兜底校验
methods: {
login () {
// 兜底校验
/**
* 校验整个表单是否通过校验，通过才能发请求，否则退出函数
* ref 可以获取 dom 元素也可以获取组件对象
* validate 是 el-form 组件提供的校验方法
* */
this.$refs.form.validate(valid => {
// 没有则返回
if (!valid) return
console.log('dldld')
})
},
reset () {
// 重置
this.$refs.form.resetFields()
}
}
清除 css 默认样式
//下载
pnpm i normalize.css
===================================
// 引入清除 css 默认样式
import 'normalize.css'
使用 echarts
// inport * 引入所有
// as 起一个变量名
import * as echarts from 'echarts'
