# Vue3记事本

**Repository Path**: jaywangpku/vue3-notepad

## Basic Information

- **Project Name**: Vue3记事本
- **Description**: 基于Vue3+Elements-Plus开发的PC端记事本
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-07-13
- **Last Updated**: 2024-07-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1.pnpm 创建项目
2.ESLint配合Prettier完成代码风格设置
    rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    // ESLint关注于格式规范
    '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'
  }
3.基于husky的代码检查
    git init
    pnpm dlx husky-init && pnpm install
    修改 .husky/pre-commit文件:
    # npm test
    pnpm lint
    //pnpm lint是全量检查，耗时问题、历史问题
    //在历史代码仓库上工作的时候，一执行检测，检测报告里会出现很多报错
    //随着代码库越来越庞大，全量检测整个项目，时间成本会越来越高
    //之前提交的有问题不会影响接下来的提交
  暂存区eslint检查
  pnpm i lint-staged -D
  配置 `package.json`
  {
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
            ]
        }
    }
    "scripts": {
        // ... 省略 ...
        "lint-staged": "lint-staged"
        }
    }
    修改 .husky/pre-commit 文件
    pnpm lint-staged
4.目录调整
5.路由-按需导入！！
    创建路由实例：createRouter
    配置history模式：createdWebHistory(BASE_URL)路径的前缀
    获取路由对象 router useRouter
    获取路由参数 route useRoute
6.Element Plus组件库
    pnpm add element-plus
    按需导入！！
    直接看官网操作！！
7.Pinia构建用户仓库和持久化
    安装插件：pnpm add pinia-plugin-persistedstate -D
    使用：main.js
    import persist from 'pinia-plugin-persistedstate'
    ...
    app.use(createPinia().use(persist))
    配置 stores/user.js
    import { defineStore } from 'pinia'
    import { ref } from 'vue'

    // 用户模块
    export const useUserStore = defineStore({
        return { token, setToken }
      },
      {
        persist: true // 持久化
      }
    )
8.Pinia仓库统一管理
    pinia 独立维护
    /、在 stores/index.js 中完成 pinia 初始化，
    交付 main.js 使用
    仓库 统一导出
    /、由 stores/index.js 统一导出，导入路径统一 `./stores`，
    而且仓库维护在 stores/modules 中
9.数据请求
    安装 pnpm add axios
    完善request.js
10.路由
    两个一级路由：登录、layerout
    五个二级路由：
11.登录注册页面
    静态页面（使用组件库）
    校验：
    el-form - :model='ruleForm' 绑定整个Form数据对象
    el-form - :rule='rules' 绑定整个rule规则对象
    表单元素 - v-model='ruleForm.xxx' 给表单元素双向绑定
    el-form-item - prop配置生效的是哪个校验规则
    规则：
    非空、长度、正则、自定义（二次输入密码）校验
    注册前的预校验 
12.登录
    跟注册共用
13.首页架子
    el-meau 菜单组件
    登录访问拦截
    用户基本信息渲染-发请求获取
14.多页面复用组件
    文章接口
    loding:请求前开，请求后关
    table 插槽 empty
    编辑->弹层（dialog）-组件-校验
15.文章管理
    中英切换-文件不存在
    下拉框组件化-父传子、子传父传递下拉框显示数据
    封装接口
    日期函数封装-修改格式
    loading效果+搜索、重置按钮-基于不同的params发请求
16.发布文章
    抽屉Drawer-组件
    !!
    突发：队列请求已满！！
    封装上传接口
    图片上传方式：1.先上传；2.一起上传
    vue-quill编辑器
17.修改文章