下面的小知识点比较零散，但是脑子不太好使，只能先记录一下啦，后面知识丰富起来后，慢慢就懂了。
1.最新版node.js已经不兼容vue2的项目了，学习vue3势在必行
node.js的安装及vue的搭建详细步骤：http://t.csdn.cn/23IKN
2.vscode软件要禁用vetur，因为vue3与vetur不完全兼容，会报错
3.vue2中的props在vue3中对应defineProps，写法基本一致。
defineProps:{
prefix:{
type:String,
default:'#icon-'
}
}
4.刷新当前页面的写法
在组件上添加v-if="flag"，然后监听刷新按钮后，更改flag的值，就会实现当前页面的刷新。
import {reactive,ref} from 'vue';
let layOutSettingStore = reactive({
refresh:false
})
let flag = ref(false);
watch(()=>layOutSettingStore.refresh,()=>{
flag.value = false;
nextTick(()=>{
flag.value = true
})
})
5.全屏与取消全屏的功能实现
//全屏按钮点击的回调
const fullScreen = ()=>{
//DOM对象的一个属性：可以用来判断当前是不是全屏模式[全屏:true,不是全屏:false]
let full = document.fullscreenElement;
//切换为全屏模式
if(!full){
//文档根节点的方法requestFullscreen，实现全屏模式
document.documentElement.requestFullscreen();
}else{
//变为不是全屏模式->退出全屏模式
document.exitFullscreen();
}
}
6.vuex4.0也就是pinia，通过解构的方式，不会失去响应式
import {storeToRefs} from 'pinia';//解构不会失去响应式
7.ref可以定义数值/字符串/布尔值/数组等
import {ref} from 'vue';
let pageNo = ref<number>(1);
let flag = ref<boolean>(false);
let str = ref<string>('');
let arr = ref<any>([]);
8.elementPlus中的table中字段的自定义写法
<el-table-column label="名称">
<template #="{row,$index}">
<pre>{{row.name}}</pre>
</template>
</el-table-column>
9.配置eslint和prettier的问题
配置完eslint和prettier都不生效，运行lint以后报错 prettier.resolveConfig.sync is not a function
解决办法pnpm install -D eslint-plugin-import@2.27.5 eslint-plugin-vue@9.9.0 eslint-plugin-node@11.1.0 eslint-plugin-prettier@4.2.1 eslint-config-prettier@8.6.0 @babel/eslint-parser@7.19.1
pnpm install -D prettier@2.8.7
pnpm install -D eslint@8.5.0
安装指定版本
10.vite-plugin-mock版本导致的Cannot read properties of undefined (reading 'token')报错
Cannot read properties of undefined (reading ‘token’)报错
解决方法：如果vite-plugin-mock 降了版本到2.0.0 ，要升到2.9.6
原因：好像低版本 mock的获取信息请求 response: (request) ，得不到config
mock中配置文件会报错,是因为vite-plugin-mock版本太新与vite版本不兼容导致的,可以 pnpm i vite-plugin-mock@2.0.0版本就可以了.我们现在是3.0.0版本
11.pinia版本的报错问题
pinia中用2.1.3版本的会报错，建议用2.0.23版本
12.toRefs的用法
在setup中
let str = reactive({name:'张三',salary:26000,id:9})
//解构数据
let {salary} = str;
//这种解构赋值会使数据变成不能响应的数据
为了保证响应式，则需要使用toRefs
import {toRefs} from 'vue';
//使用toRefs(响应式数据)方式来解构数据，在解构响应式数据时，还保持它的响应式特征
let {salary} = toRefs(str);
//注意使用toRefs()后，解构出来的数据需要通过.value来操作
let add = ()=>{
salary.value *= 2;
}
13.vue3中获取表格当前行数据并更改，vue2用解构，vue3可以使用Object.assign
let params = reactive({});
//ES6语法合并对象——row是当前行的数据对象
Object.assign(params,row);
14.关于form表单校验中的image图片上传的规则不生效问题
这个问题，在vue2中也是存在的，因此当时我的解决办法就是不设置为rule，然后通过form-item中的label插槽来手动添加一个红色的*，最后在提交调用接口的时候进行判断。
简单方法应该是：
通过自定义校验规则来书写：
const validatorUrl = (rule:any,value:any,callBack:any)=>{
//如果图片上传
if(value){
callBack();
}else{
callBack(new Error('图片必须上传'))
}
}
添加校验规则后，图片上传失败会提示，图片上传成功后，错误提示还会存在，此时需要手动请求校验。
//图片上传成功钩子
const handleAvatarSuccess:UploadProps['onSuccess'] = (response,uploadFil)=>{
//response：即为当前这次上传图片Post请求服务器返回的数据
params.url = response.data;
//图片上传成功后，清除掉对应图片的校验结果
formRef.value.clearValidate('url');
}
15.vue3中的form表单提交——通过异步校验写法
import {ref} from 'vue';
const formRef = ref();//formRef就是form表单中的ref绑定的值
const confirm = async ()=>{
//在发送请求之前，要对于整个表单进行校验
//调用这个方法进行全部表单校验，如果校验通过，再执行后面的语法
await formRef.value.validate();
let result:any = await reqAddOrUpdateTrademark(params);//调用请求接口
if(result.code==200){
ElMessage({
type:'success',
message:params.id?'修改成功':'添加成功'
})
}
}
16.通过递归筛选菜单数据
let ceshiData = ['Product','Trademark','Sku'];
let asyncRoute = [];//这个是异步的路由数据，一般都是从router文件中引入的
function filterAsyncRoute(asyncRoute,routes){
return asyncRoute.filter(item=>{
if(routes.includes(item.name)){
if(item.children&&item.children.length>0){
item.children = filterAsyncRoute(item.children,routes)
//重点是这一句，因为我之前的处理方法直接写后面的部分，没有给item.children赋值，这样是会出现问题的。
}
return true
}
})
}
filterAsyncRoute(asyncRoute,ceshiData);
17.获取权限后更改菜单的部分处理
async userInfo(){
//获取用户信息进行存储仓库当中[用户头像,名字]
let result:any = await reqUserInfo();//调用请求用户信息的接口
//如果获取用户信息成功，存储一下用户信息
if(result.code == 200){
this.username = result.data.name;
this.avatar = result.data.avatar;
//计算当前用户需要展示的异步路由
let userAsyncRoute = filterAsyncRoute(asyncRoute,result.data.routes);
//菜单需要的数据整理完毕
this.menuRoutes = [...constantRoute,...userAsyncRoute,anyRoute];
//目前路由器管理的只有常量路由，用户计算完毕后需要对异步路由和任意路由进行追加
[...userAsyncRoute,anyRoute].forEach((route:any)=>{
router.addRoute(route);
})
return 'ok';
}else{
return Promise.reject(new Error(result.message));
}
}
18.lodash中的深拷贝——cloneDeep
安装lodash:npm i lodash
//引入深拷贝方法
//忽略ts校验
//@ts-ignore
import cloneDeep from 'lodash/cloneDeep';
使用方法：比如上面的这一行代码：
let userAsyncRoute = filterAsyncRoute(asyncRoute,result.data.routes);
应该改为：
let userAsyncRoute = filterAsyncRoute(cloneDeep(asyncRoute),result.data.routes);
19.返回首页
<script setup lang="ts">
import {useRouter} from 'vue-router';
let $router = useRouter();
const goHome = ()=>{
$router.push('/home');
}
</script>
20.自定义指令的写法——判断元素是否有权限，有则显示，无则隐藏
import pinia from '@/store';
import useUserStore from '@/store/modules/user';
let userStore = useUserStore(pinia);
export const isHasButton = (app:any)=>{
//获取对应的用户仓库
//全局自定义指令：实现按钮的权限
app.directive('has',{
//代表使用这个全局自定义指令的DOM|组件挂载完毕的时候会执行一次
mounted(el:any,options:any){
if(!userStore.buttons.includes(options.value)){
el.parentNode.removeChild(el);
}
}
})
}
21.设置主题颜色
//主题颜色的设置
const setColor = ()=>{
//通知js修改根节点的样式对象的属性与属性值
const html = document.documentElement;
html.style.setProperty('--el-color-primary','red');
}
此时通过setColor方法可以设置主题色为红色。
完成！！！
多多积累，多多收获！！！
