Pinia的学习与项目的创建

Pinia

Pinia的作用

Pinia是新一代的状态管理工具，代替vuex

Pinia不需要mutation

action既支持同步也支持异步

Pinia实现getter

computed计算属性

Pinia产生的Store如何解构赋值数据保存响应式

storeToRefs

Pinia如何快速实现持久化

pinia-plugin-persistedstate

pnpm包管理器

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

安装方式：npm create vue

创建项目：pnpm create vue

如果报错请看这篇文章：

出现错误pnpm无法加载文件，因为在此系统上禁止运行脚本about_Execution_Policies+ pnpm --version+ ~~~~ （pnpm create vue指令的错误）_明里灰的博客-CSDN博客

创建Vite+Vue3项目

创建好之后，接着会提示:

其中运行

cd vue3-demo

pnpm install

pnpm dev（运行代码）

如果出现报错，请查看上一篇文章

powershell -ExecutionPolicy Bypass -Command "pnpm create vue"（用类似这样的指令即可）

接着显示为这个，然后输入网址即可进入页面

项目

先配置好eslinstrc.cjs文件

在.eslinstrc.cjs文件中做如下修改，让代码更规范：

注意：不要安装插件中的prettier，然后是安装好Eslint插件

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules:{
    //要安装Eslint插件，并配置保存时自动修复
    '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结构的校验
    //添加未定义变量错误提示，[email protected]关闭，这里加上是为了支持下一个章节演示
    'no-undef':'error'
  }
}

提交前作代码检查

基于husky的代码检查工作流

• 初始化git仓库，执行git init
• 初始化husky工具配置，执行pnpm dlx husky-init && pnpm install
• 修改.husky/pre-commit文件

问题：默认进行的是全量检查，好事问题，历史问题没有解决就不能提交

记住是在当前目录下：

右键找到显示更多选项，点击git Bush，进入面板输入执行指令。

在执行第二句指令的时候可能会出问题，

如果最后显示的是执行了多少时间，那么是成功的。

接下来这种情况代表没有成功：

解决方法是：将 'D:/javaj/vue3-demo' 目录（你项目的路径）添加到 Git 的安全目录中，以允许 Git 访问该目录

执行：git config --global --add safe.directory D:/javaj/vue3-demo

接着就可以正常运行pnpm dlx husky-init && pnpm install指令了！

然后可以看到项目中新生成的.husky文件夹。此时是成功的。

打开package.json文件，可以看到：

它会基于eslint，将后面写的所有后缀名的文件进行校验，并且尝试修改，接下来我们要修改新生成.husky文件夹中的pre-commit，将npm test修改为pnpm lint

配置好之后

当我们在git Bash中输入指令：pnpm lint，就可以得到该输出，表示没有错误

如果在一个文件中，出现了一个未定义的变量，并且打算提交代码，那会出现什么样的情况：

执行git add .

会显示提交成功了

后面输入git commit -m '初始化'

会执行之前的代码，提示出错

lint-staged配置

安装了一个插件之后可以解决husky的问题（耗时，历史问题导致不能提交代码）

安装包：

pnpm i lint-staged -D

配置package.json：

"lint-staged": {
  "*.{js,ts,vue}": [
    "eslint --fix"
  ]
}

"scripts": {
  //省略...
  "line-staged": "lint-staged"
}

之前的历史问题，在再次执行提交，就不会报错了。

按需引入Element Plus

安装：pnpm add element-plus

按需配置，然后可以直接使用组件。