**篇基础篇——固其根本
第1章Vue.js概述
1.1Vue.js简介
1.2Vue.js主要特点
1.3Vue.js发展历程
1.4Vue.js 3新特性
第2章Vue.js开发环境搭建
2.1Node.js
2.1.1Node.js概述
2.1.2Node.js安装
2.2Npm
2.2.1设置镜像
2.2.2Npm常用命令
2.3Yarn
2.3.1安装Yarn
2.3.2Yarn常用命令
2.4Pnpm
2.4.1安装Pnpm
2.4.2Pnpm常用命令
2.4.3Npm、Yarn和Pnpm的选择
2.5Visual Studio Code
2.5.1安装VS Code
2.5.2安装VS Code扩展
2.6Vite
2.6.1Vite特点
2.6.2Vite热更新
2.6.3搭建**个Vue项目
2.7分析**个Vue.js程序
2.7.1目录结构分析
2.7.2文件分析
本章小结
第3章Vue.js基础
3.1MVVM模式
3.2数据绑定与插值
3.2.1文本绑定
3.2.2HTML代码绑定
3.2.3属性绑定
3.2.4JavaScript表达式绑定
3.3方法选项
3.4选项式API生命周期
3.5基本指令
3.5.1vtext
3.5.2vhtml
3.5.3vbind
3.5.4von
3.5.5vshow
3.5.6vif
3.5.7velse
3.5.8velseif
3.5.9vfor
3.5.10vmodel
3.6计算属性选项
3.7监听器选项
3.7.1默认懒执行
3.7.2立即执行
3.7.3深度监听
3.7.4监听对象中某个属性
3.8事件处理
3.8.1鼠标事件
3.8.2键盘事件
3.8.3焦点事件
3.8.4表单事件
3.8.5滚动事件
3.8.6文本相关事件
3.8.7事件传参
3.8.8事件修饰符
3.8.9按键修饰符
3.9类与样式绑定
3.9.1类绑定
3.9.2绑定内联样式
3.10模板引用
3.11组件基础
3.11.1定义与使用一个组件
3.11.2动态组件
本章小结
第二篇进阶篇——浚其泉涌
第4章Vue.js进阶
4.1组件通信
4.1.1父组件向子组件传值
4.1.2子组件向父组件传值
4.1.3父组件调用子组件的方法
4.1.4兄弟组件通信
4.1.5跨级组件通信
4.2插槽
4.2.1默认插槽
4.2.2具名插槽
4.2.3作用域插槽
4.2.4动态插槽名
4.3自定义指令
4.3.1指令钩子
4.3.2钩子参数
4.3.3对象字面量
4.4异步组件
4.5组合式API
4.5.1setup
4.5.2ref
4.5.3reactive
4.5.4computed
4.5.5watchEffect
4.5.6watch
4.5.7toRef
4.5.8toRefs
4.5.9isRef
4.5.10isReactive
4.5.11shallowRef
4.5.12shallowReactive
4.5.13readonly
4.5.14customRef
4.5.15markRaw
4.5.16组合式API生命周期
4.5.17组合式API依赖注入
4.5.18script setup
4.6高级指令
4.6.1vpre
4.6.2vonce
4.6.3vmemo
本章小结
第5章Vue.js内置组件
5.1Transition
5.1.1过渡的类名
5.1.2自定义过渡的类名
5.1.3CSS过渡
5.1.4CSS动画
5.2TransitionGroup
5.3Teleport
5.3.1模态框
5.3.2禁用Teleport
5.3.3多个Teleport共享目标
5.4KeepAlive
5.4.1基本使用
5.4.2包含/排除
5.4.3*大缓存实例数
5.4.4缓存实例的生命周期
5.5Suspense
5.5.1异步setup()钩子
5.5.2顶层await表达式
5.5.3异步组件
本章小结
第6章Vue Router
6.1路由的概念
6.2路由模式
6.3安装
6.4基本使用
6.4.1新建页面文件
6.4.2定义路由
6.4.3创建路由实例
6.4.4路由注册
6.4.5定义路由出口
6.5声明式、编程式导航
6.5.1声明式导航
6.5.2编程式导航
6.6动态路由匹配
6.6.1基本使用
6.6.2响应路由参数的变化
6.7配置404页面
6.8重定向
6.9嵌套路由
6.10路由传参
6.10.1query传参
6.10.2动态路由匹配传参
6.11导航守卫
6.11.1全局前置守卫
6.11.2路由独享守卫
6.11.3组件内守卫
6.12路由元信息
6.13动态路由
本章小结
第7章Pinia
7.1Pinia的特点
7.2Pinia的使用
7.2.1安装
7.2.2创建Pinia实例
7.2.3在main.js中引用
7.2.4创建store
7.2.5使用store
7.2.6异步actions
7.2.7store的相互引用
7.2.8路由钩子中使用store
7.3数据持久化piniapluginpersistedstate
7.3.1安装插件
7.3.2引用插件
7.3.3在store模块中启用持久化
7.3.4修改key值
7.3.5修改存储位置
7.3.6自定义要持久化的字段
本章小结
第8章SCSS
8.1安装
8.2嵌套规则
8.3变量
8.3.1变量$
8.3.2变量默认值!default
8.4混合指令
8.4.1不带参数的混合指令
8.4.2带参数的混合指令
8.4.3带参数有默认值的混合指令
8.4.4带有逻辑关系的混合指令@if和@else
8.5扩展/继承指令@extend
8.6占位符%
8.7父选择器&
8.8数据类型
8.9运算
8.10插值#{}
8.11指令
8.11.1@if、@else if和@else
8.11.2@for
8.11.3@while
8.11.4@each
8.11.5@import
8.11.6@debug
8.11.7@content
8.11.8@function和@return
8.12SCSS函数
8.12.1mapget($map,$key)
8.12.2mapmerge($map1,$map2)
8.13使用SCSS完成主题色切换
本章小结
第9章Element Plus
9.1Element Plus的特点
9.2Element Plus的安装
9.3完整引入
9.4按需引入
9.5常用组件
9.5.1Button按钮
9.5.2Input输入框
9.5.3Form表单
9.5.4Select选择器
9.5.5Table表格
第10章TypeScript
10.1TypeScript概述
10.2TypeScript的安装和编译
10.3TypeScript数据类型
10.3.1number
10.3.2string
10.3.3boolean
10.3.4null
10.3.5undefined
10.3.6symbol
10.3.7BigInt
10.3.8any
10.3.9unknown
10.3.10Array
10.3.11Tuple
10.3.12object、Object和{}类型
10.3.13enum
10.3.14void
10.3.15never
10.3.16联合类型(|)
10.3.17类型别名(type)
10.3.18交叉类型(&)
10.3.19字面量类型
10.3.20类型断言(as)
10.3.21类型推断
10.4函数
10.4.1函数的定义
10.4.2函数表达式
10.4.3可选参数
10.4.4默认参数
10.4.5剩余参数
10.4.6参数解构
10.4.7函数重载
10.5接口(interface)
10.5.1描述对象的结构
10.5.2可选属性
10.5.3只读属性
10.5.4可索引的类型
10.5.5接口继承
10.5.6接口合并
10.5.7接口导入/导出
10.5.8函数类型接口
10.6类
10.6.1类的定义
10.6.2访问修饰符
10.6.3只读属性(readonly)
10.6.4静态属性/静态方法
10.6.5继承
10.6.6抽象类/抽象方法
10.7泛型
10.7.1泛型函数
10.7.2泛型类
10.7.3泛型接口
10.7.4泛型参数的默认类型
10.7.5多个类型参数
10.7.6泛型约束
10.7.7泛型类型别名
10.7.8泛型条件类型
10.7.9infer
10.8类型守卫
10.8.1in
10.8.2typeof
10.8.3instanceof
10.8.4自定义类型保护
10.9类型查询
10.9.1typeof
10.9.2keyof
10.10实用技巧
10.10.1非空断言(!)
10.10.2类型断言(as)
10.10.3可选链操作符(?.)
10.11内置工具类型
10.11.1PartialT
10.11.2RequiredT
10.11.3ReadonlyT
10.11.4PickT,K
10.11.5OmitT,K
10.11.6RecordT,K
10.11.7ExcludeT,U
10.11.8ExtractT,U
10.11.9ReturnTypeT
10.11.10ParametersT
10.11.11NonNullableT
10.12Vue.js 3中TypeScript的使用
10.12.1搭建项目
10.12.2script setup lang="ts"
10.12.3ref
10.12.4reactive
10.12.5computed
10.12.6defineProps
10.12.7defineEmits
10.12.8defineSlots
10.12.9provide/inject
10.12.10事件类型
本章小结
第11章Git
11.1Git安装
11.2Git GUI
11.3Git Bash
11.4Git History
11.5GitLens—Git supercharged
11.6配置Git账户
11.7建立Git仓库
11.8设置区分大小写
11.9提交到本地仓库
11.9.1查看状态
11.9.2添加单个文件
11.9.3添加多个文件
11.9.4创建提交
11.9.5查看提交历史
11.10远程仓库GitHub
11.10.1注册账户
11.10.2创建SSH Key
11.10.3设置 SSH Key
11.10.4新建远程仓库
11.10.5关联远程仓库
11.10.6生成令牌
11.10.7推送至远程仓库
11.11分支
11.11.1分支的命名
11.11.2创建并切换分支
11.11.3切换分支
11.11.4查看本地所有分支
11.11.5查看远程所有分支
11.11.6查看本地分支与远程的关联关系
11.11.7拉取远程分支并创建本地分支
11.11.8删除分支
11.12操作commit
11.12.1提交commit
11.12.2修改commit提交信息
11.12.3合并多个commit
11.13撤销修改
11.13.1git reset hard
11.13.2git reset soft
11.13.3git revert
11.13.4git checkout file
11.13.5git reset HEAD file
11.14从远程仓库拉到本地仓库
11.14.1git clone
11.14.2git pull
11.14.3git fetch
11.15合并分支
11.15.1git merge
11.15.2git cherrypick
11.16打标签
11.17强制更新
本章小结
第三篇实战篇——躬践其实
第12章Web端管理系统: 搭建企业级应用框架
12.1初始化项目
12.1.1Node版本要求
12.1.2VS Code插件安装
12.1.3创建项目
12.1.4安装项目依赖
12.2配置TypeScript检查
12.2.1修改tsconfig.json
12.2.2修改tsconfig.node.json
12.2.3新建typings.d.ts
12.2.4修改package.json
12.3配置路径别名
12.3.1安装@types/node
12.3.2配置vite.config.ts
12.3.3TypeScript路径映射
12.4配置ESLint和Prettier
12.4.1安装相关插件
12.4.2新建.eslintrc
12.4.3新建.eslintignore
12.4.4新建.prettierrc
12.4.5新建.prettierignore
12.4.6重启VS Code使配置生效
12.4.7配置package.json
12.5配置husky、lintstaged、@commitlint/cli
12.5.1创建Git仓库
12.5.2安装相关插件
12.5.3配置husky
12.5.4修改package.json
12.5.5新建commitlint.config.cjs
12.5.6提交
12.6VS Code自动格式化
12.7配置路由
12.7.1安装路由
12.7.2路由的基本使用
12.8配置Pinia
12.8.1安装Pinia
12.8.2创建Pinia实例
12.8.3在main.js中注册
12.8.4创建store
12.8.5使用store
12.9配置SCSS
12.9.1安装SCSS
12.9.2配置全局SCSS样式文件
12.10配置Element Plus
12.11配置环境变量
12.11.1新建环境变量文件
12.11.2定义环境变量
12.11.3定义变量ts类型
12.11.4使用变量
12.11.5在vite.config.ts中使用环境变量
12.12配置axios
12.12.1安装axios
12.12.2新建axios实例
12.12.3接口类型
12.12.4定义请求接口
12.12.5使用接口
12.13打包配置
12.13.1分包
12.13.2生成gz文件
12.13.3js和css文件夹分离
12.14Vite与Webpack使用区别
12.14.1静态资源处理
12.14.2组件自动化注册
第13章Web端管理系统: 权限管理
13.1后端设计(使用Koa框架)
13.1.1搭建后端服务
13.1.2使用路由中间件
13.1.3处理跨域
13.2前端设计
13.2.1定义使用到的常量
13.2.2配置axios
13.2.3调整目录结构
13.2.4调整路由
13.2.5路由权限设置
13.2.6接口权限设置
13.2.7菜单栏权限设置
13.2.8动态路由设置
13.2.9按钮权限设置
本章小结
参考文献