vue3+ts+vite项目开发--知识点梳理01

创建vue3项目

参考vue3官方文档【快速上手】模块进行项目创建
快速上手

遇到的问题：

01 tsconfig.node.json文件中extends报错

解决：

 npm install --save-dev  @types/lodash

无效果的话就重启下项目

02 知识点：用nvm安装最新版本的node

查看可用的node版本，报错：Could not retrieve https://npm.taobao.org/mirrors/node/index.json.
原因：由于npm.taobao.org域名HTTPS证书到期更换为npmmirror.com
解决：
找到nvm安装路径的settings.txt文件

打开添加或者更改镜像地址，保存即可。

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

参考文章：https://blog.csdn.net/jieyucx/article/details/138080248

03. template标签中的#表示啥意思

v-slot 的缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

参考：https://ask.csdn.net/questions/7694480

04 ts中 ？？使用

ts中？？它用于判断一个值是否为 null 或 undefined，并在其为真时返回一个默认值。

const a= null;
const b= a ?? "jjj";
 
console.log(b); // 输出 "jjj"

需要注意的是，“??” 运算符只会在左侧的值为 null 或 undefined 时返回默认值，而不会在左侧的值为其他“假值”（如空字符串、0、false 等）时返回默认值。

05 ts中 reduce

06 vue3+ts中watch和watchEffect监听使用

参考：https://blog.csdn.net/m0_60893808/article/details/130899459

07 unocss用法积累

可通过：https://unocss.dev/interactive/
查看对应的css样式

<el-card class="!border-none !bg-transparent !rounded-4% w-100 <sm:w-85"></el-card>

.\!border-none {
   
   
 border-style: none !important;
}

.\!bg-transparent {
   
   
  background-color: transparent !important;
}

.\!rounded-4\% {
   
   
  border-radius: 4% !important;
}

.w-100 {
   
   
  width: 25rem;
}

@media (max-width: 639.9px) {
   
   
  .\<sm\:w-85 {
   
   
    width: 21.25rem;
  }
}

其他的

.text-center {
   
   
  text-align: center;
}

.bottom-1 {
   
   //我的理解：1===4px===4/16=0.25rem
  bottom: 0.25rem; //4px
}
.bottom-4 {
   
   
  bottom: 1rem; //16px
}
.text-[10px] {
   
   
  font-size: 10px;