npm install less vue-router element-plus -s
elementplus

路由引入组件第二种写法：

使用动态的import( )语法(推荐使用)（路由懒加载）

  component:()=>import('路径')component:()=>import('@/views/Main.vue')

打包之后的文件将会异常的大，需要加载的内容过多时间过长，出现长时间的白屏，不利于用户体验，运用懒加载就可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

filter函数

filter用于对数组进行过滤。
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

const hasChildren=computed(()=>list.filter(item=>item.children));
过滤掉没有children的数组元素

v-if和v-for

vue2中v-for优先；vue3中v-if优先

is

component组件是一个动态组件，跟随:is里的变量动态显示加载组件
使用场景：适用于组件会动态变化的场景，如新闻类型可能是视频、图片、文字，在遍历渲染新闻列表时，根据新闻类型的不同，渲染不同的组件。

<component class="icons" :is="item.icon"></component>

new URL()

mokejs

生成随机数据，拦截 Ajax 请求
mokejs官网

getCurrentInstance()

在Vue3中，getCurrentInstance()可以用来获取当前组件实例

let { proxy } = getCurrentInstance();

getCurrentInstance只能在setup或生命周期钩子中使用。

1.在onMunted生命周期中打印getCurrentInstance

2.定义一个test方法，通过click事件触发方法

封装axios

1. 拦截器
   api/request.js

import axios from "axios";
import {} from 'element-plus';
const server=axios.create();
// 添加请求拦截器
server.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
server.interceptors.response.use((res)=>{const {code,data,msg}=res.data;if(code===200){return data;}else{const NETWORK_ERROR="网络错误，请稍后重试";ElMessage.error(msg|| NETWORK_ERROR);return Promise.reject(new Error(msg|| NETWORK_ERROR));}}
);function request(options){options.method=options.method||"get";return server(options);
}
export default request;

2. 统一管理axios
   api/api.js

// 整个项目api的统一管理import request  from "./request";
export default {// 获取首页左侧的表格数据getTableData(){return request({url:"/api/home/getTableData",method:"get"})},};

3. main.ts配置全局api

import api from './api/api';
// 全局api
app.config.globalProperties.$api = api;

4. 使用

import {unMounted,getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance();
const getTableData=()=>{const data = proxy.$api.getTableData();tableData.value=data.tableData;
}

echarts

生成图表
安装： npm install echarts -D
文档

Object.keys()

1. 遍历对象（必须包含属性和方法的对象）；
2. 返回对象中每一项key的数组（遍历一个对象，返回一个全是key的数组）

用法：1.如果对象是一个对象，会返回对象的属性名组成的数组；

Object.keys()
let obj={a:1, b:2, c:3}
Object.keys(obj) // ['a', 'b', 'c']

2.如果对象是一个数组或字符串，则返回索引组成的数组

Object.values()和Object.keys() 相反

map

map用法详解

返回值错误:

返回的是{}里面的的值，不是[{},{},{}];
2.正确写法：

监听图表页面

const observer=ref();// 监听页面的变化observer.value=new ResizeObserver(()=>{oneEchart.resize();twoEchart.resize();threeEchart.resize();});if(proxy.$refs.echart){observer.value.observe(proxy.$refs.echart);}

resizeobserve

搜索功能

搜索

分页

前后端分页

scope.row

理解Element的scope.row

vue插槽的scope.row

confirm、alert、prompt

confirm、alert、prompt区别

element plus

官网

nextTick

问题：点击编辑后，再点击添加用户后表单里的信息变成了编辑用户的信息（本来是没有值的）


原因：

// 编辑
const handleEdit=(val)=>{dialogFormVisible.value = true;action.value=1;// 赋值(表单的值设置为当前行的值)// 当dialogFormVisible.value = true后弹出对话框表单才会出现，（表单在对话框里）// 异步非常快，会把Object.assign(form,{...val,addr:val.address})当成初始值//导致关闭对话框再次打开后显示Object.assign(form,{...val,addr:val.address})的值Object.assign(form,{...val,addr:val.address})
}

nextTick详解

  解决方式1：nextTick(()=>{//不要忘记先引入nextTickObject.assign(form,{...val,addr:val.address})})解决方式2：setTimeout(()=>{Object.assign(form,{...val,addr:val.address})},100)

useRouter和useRoute

两者区别
区别

router.push

vue3跳转路由5中方式

json.stringfy和json.parmars

相关文章1

相关文章2

vite的glob

动态生成路由

    // 动态生成路由function addMenu(router){const menuList=state.value.menuList;//根据登陆身份拿到对应的菜单列表const module=import.meta.glob("../views/**/*.vue");//批量const routeArr=[];menuList.forEach(item=>{if(item.children){item.children.forEach(val=>{let url=`../views/${val.url}.vue`;val.component=module[url];routeArr.push(val);});}else{let url=`../views/${item.url}.vue`;item.component=module[url];routeArr.push(item);}})routeArr.forEach(item=>{state.value.routerList.push(router.addRoute("main",item));});};

glob

vite：glob批量引入文件

多账号登陆问题

不是管理员账号，但能访问到mall页面

    // 动态生成路由function addMenu(router){const menuList=state.value.menuList;//根据登陆身份拿到对应的菜单列表const module=import.meta.glob("../views/**/*.vue");//批量const routeArr=[];menuList.forEach(item=>{if(item.children){item.children.forEach(val=>{let url=`../views/${val.url}.vue`;val.component=module[url];routeArr.push(val);});}else{let url=`../views/${item.url}.vue`;item.component=module[url];routeArr.push(item);}});// 解决多种账号登陆bugstate.value.routerList=[];let routes=router.getRoutes();//拿到所有路由routes.forEach(val=>{if(val.name==='main'||val.name==='login'){return //不做处理}else{router.removeRoute(val.name);}});routeArr.forEach(item=>{state.value.routerList.push(router.addRoute("main",item));});};

解决登录后刷新页面消失的路由问题

对pinia的stores/index.js下的state进行持续化存储

    //   state持久化存储watch(state,(newObj)=>{if(!newObj.token) return ;localStorage.setItem("store",JSON.stringify(newObj));},{deep:true})

main.js

import router from './router/index';
import { useAllDataStore } from './stores';
const store = useAllDataStore();//放到app.use(pinia)后
store.addMenu(router,"refresh")//传递路由并传类别//这一步要在使用路由前
app.use(router)

退出登录

const handleLoginOut=()=>{store.clean()router.push('/login');
}

stores/index.js

export const useAllDataStore = defineStore("allData",()=>{/****/function clean(){state.value.routerList.forEach(item=>{if(item) item();//删除（console.log(item)后得到是一个removeRoute删除路由）});// 重置state.value=initState();// 删除本地缓存localStorage.removeItem("store");}/*****/return {state,updateMenuList,addMenu,clean}
})

路由守卫

相关文章1

相关文章2

// 路由守卫
function isRoute(to){let res=router.getRoutes();let resFil=res.filter(item=>item.path===to.path);//拿到要去往的路由return resFil.length>0;//判断是否在路由列表中
}
router.beforeEach((to,from)=>{if(to.path!=='/login'&&!store.state.token){// next('/login');return {name:'login'}}if(!isRoute(to)){// next('/404');return {name:'404'}}
})