2023/9/17总结

Vue

defineOptions

为什么要使用defineOptions

在有<script setup> 之前如果需要定义props emit 可以很容易的添加一个与setup 平级的属性但是用了 <script setup> 后就不能这样做了 setup 属性也就没有了，就不能添加与其平级的属性

为了解决这个问题引入了defineProps 与 defineEmits 俩个编译宏但是只是解决了 props 与emits 这俩个属性如果我们要定义组件的name 或者其他自定义的属性就得回到原始的写法——添加一个普通的<script>标签这样就会存在俩个<script> 标签

在vue3.3中新引入了defineOptions 宏主要是用来定义Options API的选项可以用defineOptions 定义任意的选项，props，emits，expose，slots除外因为已经有了相关的编译宏了

defineModel

在vue3中 自定义组件上使用v-model 相当于传递一个 modelValue 属性同时触发update:modelValue 事件

注意

Pinia 快速入门

Pinia 是 vue 最新的状态管理工具 是Vuex 的替代品

提供了更加简单的API （去掉了mutation）
提供符合，组合式风格的API
去掉了 modules 的概念每一个store 都是一个独立的模块
配合Typescript 更加友好提供可靠的类型推断

添加Pinia配置

然后启动项目就行

Setup Store

利用Store可以十分便捷的共享数据

定义了一个counter.js 来保证数据的共享以及访问

action 异步支持

在对应的Store 中，如果把返回的数据解构了那么就不支持响应式，如果想解构并且保持响应式。

使用 Pinia持久化插件

先去官网上

快速开始 | pinia-plugin-persistedstate (prazdevs.github.io)

安装下面说的是npm 安装

npm i pinia-plugin-persistedstate

然后在main.js 的文件中

搞完之后要重启服务器

然后就可以发现数据变成持久化的了，即使是刷新，也不会变回到原来的数据

pnpm 包管理器

优势：比同类工具快 2 倍左右节省磁盘空间

安装：

全局安装： npm install -g pnpm
局部安装：npm install pnpm

安装好之后

创建项目 pnpm create vue

其他指令：

创建一个pnpm安装的vue项目

Eslint 配置代码风格

把下面这段代码加到下面

rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, //单引号
        semi: false, //无分号
        printWidth: 80,//每行宽度至多80字符
        trailingComma: 'none', //不加对象|数组最后逗号
        endOfLine: 'auto' //换行符号不限制(win mac不一-致)
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成(忽略index. vue)
      }
    ],
    'vue/no-setup-props -destructure': ['off'], //关闭props解构的校验
// 添加未定 义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了 支持下一个章节演示。
    'no-undef': 'error'
  }