Vue.js企业开发实战

• 1. Vue基础入门
  • 1.1. 1.Vue的安装与使用
    • 1.1.1. 1.1 直接使用<script>引入
    • 1.1.2. 1.2 安装Node.js环境
    • 1.1.3. 1.3 安装脚手架工具vue-cli
    • 1.1.4. 1.4 安装webpack
    • 1.1.5. 1.5 安装nvm
    • 1.1.6. 1.6 安装yarn
  • 1.2. 2. 创建vue项目
  • 1.3. 3.创建一个Vue实例
  • 1.4. 4.Vue模板语法
    • 1.4.1. 4.1 插值
    • 1.4.2. 4.2 指令
• 2. Vue内置指令
  • 2.1. 1.基本指令
    • 2.1.1. 1.1 v-text与v-html
    • 2.1.2. 1.2 v-bind
    • 2.1.3. 1.3 v-once
    • 2.1.4. 1.4 v-cloak
    • 2.1.5. 1.5 v-pre
  • 2.2. 2 条件渲染
    • 2.2.1. 2.1 v-show
    • 2.2.2. 2.2 v-if与v-else-if
    • 2.2.3. 2.3 v-if和v-show的区别
  • 2.3. 3 列表渲染
    • 2.3.1. 3.1 遍历数组
    • 2.3.2. 3.2 遍历对象
    • 2.3.3. 3.3 遍历整数
  • 2.4. 4 维护状态
  • 2.5. 5 数组更新检测
    • 2.5.1. 1.变更方法
    • 2.5.2. 2.替换数组
    • 2.5.3. 3.对象变更检测注意事项
    • 2.5.4. 4.在<template>上使用v-for
    • 2.5.5. 5. v-for 与 v-if 一同使用
  • 2.6. 6 事件处理
    • 2.6.1. 6.1 监听事件
    • 2.6.2. 6.2 事件修饰符
    • 2.6.3. 6.3 按键修饰符
    • 2.6.4. 6.4 系统修饰键
    • 2.6.5. 6.5 综合案例-处理用户注册信息
  • 2.7. 7.表单输入绑定
    • 2.7.1. 7.1 修饰符
    • 2.7.2. 7.2 参考
• 3. Vue实例核心选项
  • 3.1. 1. 数据选项
  • 3.2. 2.生命周期钩子
    • 3.2.1. 2.1 create初始化
    • 3.2.2. 2.2 mount组件挂载
    • 3.2.3. 2.3 update组件更新
    • 3.2.4. 2.4 destroy组件销毁
    • 3.2.5. 2.5 created和mouted
  • 3.3. 3.资源选项
    • 3.3.1. 3.1 directives选项
    • 3.3.2. 3.2 filters选项
• 4. Vue工程化项目
  • 4.1. 1.脚手架的组件
    • 4.1.1. 1.1 CLI
    • 4.1.2. 1.2 CLI服务
    • 4.1.3. 1.3 CLI插件
  • 4.2. 2.脚手架环境搭建
    • 4.2.1. 2.1 安装node
    • 4.2.2. 2.2 安装脚手架工具
  • 4.3. 3.创建项目
    • 4.3.1. 3.1 使用命令
    • 4.3.2. 3.2 使用图形化界面
    • 4.3.3. 3.3 分析脚手架项目结构
    • 4.3.4. 3.4 配置Scss、Less和Stuly
    • 4.3.5. 3.5 配置文件package.json
  • 4.4. 4. Vue脚手架使用自定义配置和Element-UI导入使用
  • 4.5. 5.Vue项目上线环境部署
• 5. 深入了解Vue组件
  • 5.1. 1.什么是组件化开发
  • 5.2. 2.Vue自定义组件
    • 5.2.1. 2.1 组件的封装
    • 5.2.2. 2.2 自定义组件上的属性
    • 5.2.3. 2.3 自定义组件上的事件
    • 5.2.4. 2.4 组件属性校验
    • 5.2.5. 2.5 组件通信
    • 5.2.6. 2.6 插槽
• 6. Vue-Router路由
  • 6.1. 1.什么是路由
    • 6.1.1. 1.1 后端路由
    • 6.1.2. 1.2 前端路由
  • 6.2. 2.在Vue中使用路由
  • 6.3. 3.动态路由
  • 6.4. 4.嵌套模式路由
  • 6.5. 5.编程式导航
    • 6.5.1. 5.1 router.push()方法参数规则
  • 6.6. 6.命名路由
  • 6.7. 7.命名视图
  • 6.8. 8.重定向
  • 6.9. 9.路由的模式
  • 6.10. 10.导航守卫
    • 6.10.1. 10.1 全局守卫
    • 6.10.2. 10.2 组件内守卫
• 7. Vuex状态管理
  • 7.1. 1.Vuex的安装和使用
    • 7.1.1. 1.1 使用npm安装
    • 7.1.2. 1.2 使用yarn安装
  • 7.2. 2.Vuex核心概念
  • 7.3. 3.Vuex规范目录结构
• 8. Vue的异步请求
  • 8.1. 1.前后端的交互模式
    • 8.1.1. 1.1 接口调用方式
    • 8.1.2. 1.2 传统形式的URL
    • 8.1.3. 1.3 Restful形式的URL
    • 8.1.4. 1.3 传统js异步调用
  • 8.2. 2.axios的安装与使用
    • 8.2.1. 2.1 安装axios
    • 8.2.2. 2.2 axios基本用法
    • 8.2.3. 2.3 axios实例
    • 8.2.4. 2.4 axios并发请求
    • 8.2.5. 2.5 axios拦截器
    • 8.2.6. 3.axios请求拦截器的案例
  • 8.3. 4. 封装axios
  • 8.4. 5. 基于接口的案例
• 9. 服务器端渲染
  • 9.1. 1.服务器端渲染简介
    • 9.1.1. 1.1 什么是服务器端渲染（SSR）
    • 9.1.2. 1.2 为什么要使用服务器端渲染
  • 9.2. 2.基于 Nuxt.js 搭建一个服务端渲染(SSR)应用
• 10. Vue3新特性详讲
  • 10.1. 1.为什么要用Vue3
    • 10.1.1. 1.1 Vue2对复杂功能的处理不友好
    • 10.1.2. 1.2 Vue2中mixin存在缺陷
    • 10.1.3. 1.3 Vue2对TypeScript的支持有限
  • 10.2. 2.Vue3简介
    • 10.2.1. 2.1 Vue3增加了以下新特性
  • 10.3. 3.Vue3项目搭建
  • 10.4. 4.Vue3项目的目录结构
  • 10.5. 5.Vue.js 3.0的新变化1—组合API
    • 10.5.1. 5.1 setup()函数
    • 10.5.2. 5.2 reactive()函数
    • 10.5.3. 5.3 ref()函数
    • 10.5.4. 3.4 ref辅助操作的函数。
    • 10.5.5. 3.5 Vue3中的响应式对象
    • 10.5.6. 3.6 生命周期的改变
    • 10.5.7. 3.7 watch()侦测变化
    • 10.5.8. 3.8 Vue3更好地支持TypeScript
    • 10.5.9. 3.9 Teleport传送门
    • 10.5.10. 3.10 Suspense异步请求
    • 10.5.11. 3.11 全局API修改
  • 10.6. 7 vue3实战笔记 | 快速入门
  • 10.7. 8.全面总结Vue3.0 的新特性
• 11. TypeScript入门
  • 11.1. 1.Typescript是什么
  • 11.2. 2.为什么要用Typescript
  • 11.3. 3.JavaScript VS TypeScript
  • 11.4. 4.TS安装
  • 11.5. 5.手动编译代码
  • 11.6. 6.TS基础类型
    • 11.6.1. 6.1 布尔值(boolean)
    • 11.6.2. 6.2 数字(number)
    • 11.6.3. 6.3 字符串(string)
    • 11.6.4. 6.4 undefined和null
    • 11.6.5. 6.5 数组
    • 11.6.6. 6.6 元组
    • 11.6.7. 6.7 枚举
    • 11.6.8. 6.8 any
    • 11.6.9. 6.9 void
    • 11.6.10. 6.10 object
    • 11.6.11. 6.11 联合类型
    • 11.6.12. 6.12 类型断言
    • 11.6.13. 6.13 类型推断
  • 11.7. 7. 接口
    • 11.7.1. 7.1 接口定义与使用
    • 11.7.2. 7.2 函数类型
    • 11.7.3. 7.3 类类型
  • 11.8. 8.类
    • 11.8.1. 基本使用
    • 11.8.2. 继承
    • 11.8.3. 多态
    • 11.8.4. 修饰符
    • 11.8.5. public (默认值, 公开的外部也可以访问)
    • 11.8.6. private（只能类内部可以访问,子类也无法访问）
    • 11.8.7. protected（类内部和子类可以访问）
    • 11.8.8. readonly
    • 11.8.9. 存取器
    • 11.8.10. 静态属性与方法
    • 11.8.11. 抽象类
  • 11.9. 9. 函数
    • 11.9.1. 基本示例
    • 11.9.2. 函数类型
    • 11.9.3. 完整写法
    • 11.9.4. 可选参数和默认参数
    • 11.9.5. 剩余参数
    • 11.9.6. 函数重载
  • 11.10. 10.泛型
    • 11.10.1. 函数泛型
    • 11.10.2. 多个泛型参数的函数
    • 11.10.3. 泛型接口
    • 11.10.4. 泛型类
    • 11.10.5. 泛型约束
• 12. Vite
  • 12.1. 1.vite创建项目
  • 12.2. 2.vite2配置
    • 12.2.1. 2.1 alias别名配置
  • 12.3. 3.setup script语法示例
  • 12.4. 4.加入vue-router
    • 12.4.1. 4.1 安装
    • 12.4.2. 4.2 创建配置文件
    • 12.4.3. 4.3 在 main.js 中引入
    • 12.4.4. 4.4 在App.vue中使用
  • 12.5. 5.加入vuex
    • 12.5.1. 5.1 安装vuex
    • 12.5.2. 5.3 创建配置文件
    • 12.5.3. 5.4 在 main.js中引入
    • 12.5.4. 5.5 在Home.vue中使用store
  • 12.6. 6.加入SASS
    • 12.6.1. 6.1 安装sass
    • 12.6.2. 6.2 安装normalize.css初始化样式
    • 12.6.3. 6.3 新建style目录保存各种样式
    • 12.6.4. 6.4 index.scss组织样式
    • 12.6.5. 6.5 main.js中引入index.scss
    • 12.6.6. 6.6 vite.config.js添加全局scss变量文件
    • 12.6.7. 6.7 Home.vue使用全局变量
  • 12.7. 7.加入axios
    • 12.7.1. 7.1 安装axios
    • 12.7.2. 7.2 封装axios
    • 12.7.3. 7.3 开发生产环境变量
  • 12.8. 8.使用element-plus
    • 12.8.1. 8.1 安装element-plus
    • 12.8.2. 8.2 安装lodash
    • 12.8.3. 8.3 全局引入element-plus(不推荐)
    • 12.8.4. 8.4 手动按需引入element-plus（推荐）
    • 12.8.5. 8.5 自动按需引入element-plus（强烈推荐）
  • 12.9. 9.使用typescript
    • 12.9.1. 9.1 安装typescript
    • 12.9.2. 9.2 初始化ts配置文件
    • 12.9.3. 9.3 修改 main.js文件类型
    • 12.9.4. 9.4修改index.html引入
    • 12.9.5. 9.5 添加类型声明文件
    • 12.9.6. 9.6 编写ts测试代码
  • 12.10. 10.vite.config.js 配置
    • 12.10.1. 10.1 别名配置
• 13. Vue3 实践
  • 13.1. 开箱即用的vue3模板
  • 13.2. vue3+typescript 按需加载element-plus
  • 13.3. 从零开始搭建规范的 TypeScript SDK 项目工程环境