创建vue3+vite+ts+elementplus+router+axios项目

vite+vue3+ts

npm init vite
//选择vue 选择ts 填写项目名称
npm  i vue-router@next vuex@next axios
//安装路由，vuex，axios
npm i
//安装依赖
//如果没有network地址
在package.json的dev vite 后面加上--host

引入elementplus

引入router

第一种

第二种

动态添加路由

用数组的方法，比较笨，可以不用看，只是数组的用法比较妙

重定向

在app,vue里面加上占位符才能看出来效果。

路由跳转
import { useRouter } from 'vue-router'
let router = useRouter();
router.push('/home')

前置路由守卫

next()//放行！！！
next(param)//中断

开始搭建，项目布局

根据原型ui，去elementplus找类似例子

关于数据

const state = reactive({
	ruleFrom:{}
})
const {ruleFrom} = toRefs(state)
//用toRefs解构，解构之后的数据依然是响应式数据

关于elementui表单按钮触发整体校验

axios

封装axios

封装请求api

api使用

接口传参

传参格式有json和form-data
当post请求的数据需要用query的方式传时，复杂类型的传参会出现问题。可以使用qs库的方法使其转换成form-data类型且容易识别的格式

qs库

npm i qs
npm i @types/qs -D //类型库
import qs from 'qs'
qs.stringify(data)
//qs.stringify({a:12,b:[1,2]}) 
//a=12&b=1[] a=12&b=2

js-cookie

npm i js-cookie 
import cookie from 'js-cookie'
cookie.set('name','value',{expires:7))//7天过期
cookie.get('name')
cookie.remove('name')

less

有边距存在

新建rebase.less
*{
}
在App.vue
//去掉scoped
@import url("./assets/style/rebase.less")
html,body{
	height:100%
}
#app{
	height:100%
}

VUEX

getters属性类似于计算属性（computed）可缓存。当state无法直接用的时候可以用getters.

elementplus 菜单

数据处理，权限控制

处理时间

day.js

方法处理

封装组件

父组件


子组件

echarts

npm i echarts
//import echartsfrom 'echarts'  这样会爆没有默认导出的问题（export default）
import * as echarts from 'echarts' //所有导出都命名为echarts

根据父子组件渲染顺序，父组件请求的接口数据是异步到达的，所以子组件里需要再把红框的内容放入watch()方法里面

echarts地图

promise

promise.all()

类似于并

promise.race() 竞赛

返回最快执行的那个，最快的是resolve就从then返回，最快的是reject就从catch返回

promise.allSettled()

类似于all会等全部执行完，但是不管reject还是resolve都是从then返回。返回状态和value。

promise.any()

类似于或