• 插件开启

  • Vue Language Features (Volar)
  • TypeScript Vue Plugin (Volar)
  • Vue VSCode Snippets

• 初始化项目

• 我的 github repo

  • 提交记录 匹配笔记

• 我的 配置参考

• vitesse 配置参考

npm create vite@latest

# customize
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
✔ Project name: … pk-front-vue3
✔ Select a framework: › Vue
✔ Select a variant: › Customize with create-vue ↗
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Add TypeScript? … Yes
✔ Add JSX Support? … Yes
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … Yes
✔ Add Vitest for Unit Testing? … Yes
✔ Add an End-to-End Testing Solution? › Cypress
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … Yes

# install dep
cd pk-front-vue3
pnpm i

# git manage repo
git init
git add .
git commit -m "init"
# link with my github remote repo
git remote add origin https://github.com/BarryCoding/pk-front-vue3.git
git branch -M main
git push -u origin main

• 清理资源文件

git add .
git commit -m "clear assets"

• 安装 开发依赖 sass
• 安装 依赖 reset-css
  • 会重置所有浏览器默认样式

pnpm i -D sass
# vite 会自动处理 sass, sfc 中测试

pnpm i reset-css
# main.js 引入

git add .
git commit -m "add scss & reset-css"

1. 自定义 手动更新 npm i -D package@version
2. 借助 npm 工具 npm-check-updates
3. git平台bot Dependabot

Vue-Router

• recommend unplugin-vue-router

• follow instruction
• pnpm i -D unplugin-vue-router
• M vite.config.ts
• M router/index.ts
  • 运行项目 会产出 type-router.d.ts 自动处理路由类型
  • M tsconfig 补充 type-router.d.ts
• M .vscode/settings.json
• U pages/index.vue
  • M .eslintrc.cjs 处理 组件命名

• unplugin-vue-router 导致 TS 错误
  • first: reload or rerun

0. 重载或重启项目
1. 官方 issue
2. 研究官方 example
3. 使用 fit仓库的 CodeSpaces
   1. 2 core 60 hrs free
4. StackOverflow

官方文档 UnoCSS

• UnoCSS 集成 VSCode
• UnoCSS 集成 Vite
• UnoCSS 样式重置
  • 推荐使用 tailwind 重置样式
  • 去除 reset-css 包
• UnoCSS 使用 tailwind preset

• 专业处理函数 自动导入

• 安装 pnpm i -D unplugin-auto-import

• 配置 vite.config.ts

  • dts: 'src/auto-imports.d.ts'
  • dts: 'src/typed-router.d.ts'
  • 项目核心类型定义 不放在根目录 而是都放在 src 中, 且不用改 tsconfig.app.json
  • 集成 unplugin-vue-router 替换原生 vue-router
  • 集成 VueUse 三方库
    • pnpm i @vueuse/core
    • 自定义导入需要的 USE

• 专业处理组件 自动导入

• 安装 pnpm i -D unplugin-vue-components

• 配置 vite.config.ts

  • dts: 'src/components.d.ts'

• 略过
• tailwind 集成图标

• UnoCSS 集成图标
• 安装 pnpm add -D @iconify/json
  • 所有图标集 包比较大
• 配置 uno.config.ts
• iconify图标集
  • 点图标 选UnoCSS 复制粘贴

• 安装 pnpm install -D vite-plugin-vue-layouts
• 配置 vite.config.ts
• 补充 Client Types 到 env.d.ts
  • 等同 tsconfig compilerOptions.types 配置
• 集成 unplugin-vue-router
• 常见问题 layout 未生效 ->> 重启项目 pnpm dev
• 添加 全局路由 渐变效果

• 略过

• VueMacros 部分已经被 Vue3.3官方支持

• 安装集成 VueMacros

• defineProps defineEmits

• .npmrc

  • 调整顶层依赖顺序 公共依赖拍得更高 pnpm i

• 学习
• XMind...
• 调试模式 application

• Install pnpm add -D vite-plugin-pwa
• Usage vite.config.ts
• 文档
  • 补充 Type declaration
  • 略 registerType为'prompt' 需 ReloadPrompt 组件
  • registerType为'autoUpdate' 自动更新 无需 ReloadPrompt 组件
• 查看PWA效果 脚本 build
  • 脚本 preview 运行 dist项目
  • 生产模式中 dist中具备pwa
  • 开发模式中 未具备pwa

• 略过
• 学全栈 就用真实数据库
• Why Not msw

• 清理文件和目录
  • 自动生成的类型文件 集中存放 且 git忽略
• pages 404 页面
• layout [...path].vue 布局
  • 新布局文件 重启项目后生效

• 查看 Vue更新日志
• git 版本控制 新的分支处理 版本升级
  • git tag v1.0.0
  • git checkout -b vue3.4 v1.0.0
    • 从 tag v.1.0.0 创建 vue3.4 分支
    • 工具 npm-check-updates
      • 先处理 patch 更新
      • 再处理 minor 慎重更新 + 打包测试
      • 最后处理 major 慎重更新 + 打包测试
  • 处理好更新后 合并到 main 分支

• defineModel
  • 3.3 experimental
  • 3.4 已经官方支持
• TS泛型组件
• defineSlots
• defineProps
  • vite vue 配置参考
  • 需 解构配置