目录

第一篇基础篇——固其根本

第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.1vtext

3.5.2vhtml

3.5.3vbind

3.5.4von

3.5.5vshow

3.5.6vif

3.5.7velse

3.5.8velseif

3.5.9vfor

3.5.10vmodel

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.1vpre

4.6.2vonce

4.6.3vmemo

本章小结

第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数据持久化piniapluginpersistedstate

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.1mapget($map,$key)

8.12.2mapmerge($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 cherrypick

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、lintstaged、@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按钮权限设置

本章小结

参考文献