目录
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()
类似于或