Vue3+TypeScript
2022-06-26 15:31:46 0 举报AI智能生成
vue+TypeScript最终版。学习一次终身受用
作者其他创作
大纲/内容
十. 自动化部署
1. Vue项目的打包
项目打包
项目优化
2. 购买云服务器
注册阿里云账号
购买云服务器
3. 配置云服务器
连接云服务器
安装Nginx
配置Nginx
手动部署项目
4. Jenkins自动化部署
安装Java
安装Jenkins
Jenkins配置
Jenkins任务
Jenkins部署
九. 项目实战
1. 项目技术栈
Vue3
Vue-Router
Vuex
Hooks
Axios
Less
Element-Plus
Echarts
Webpack
Eslint
Prettier
Vue-Cli4
Git
2. 项目开发规范
文件命名规范
组件命名规范
组件编写规范
模板编写规范
导包规范
props编写规范
生命周期排序规范
样式编写规范
....
目录结构规范
3. 后台管理系统
搭建项目
Vue-Cli4
集成技术栈
搭建系统首页
新建系统菜单
登录
编写登录页面
编写登录表单
登录表单验证
对接登录接口
密码加密
登录信息的持久化
用户管理
封装高级检索组件
封装高级表格组件
对接用户列表的分页查询和分页功能
用户的新建、编辑、删除、详情
部门管理
封装高级检索组件
封装树形表格组件
对接高级检索和分页功能
部门的新建、编辑、删除、详情
菜单管理
封装高级检索组件
封装树形表格组件
对接高级检索和分页功能
菜单和按钮的新建、编辑、删除、详情
角色（权限）管理
封装高级检索组件
封装高级表格组件
对接高级检索和分页功能
角色的新建、编辑、删除、详情
给角色分配菜单和按钮权限
数据统计
条形图可视化
折线图可视化
饼图可视化
问题反馈
新建问题表单
表单的验证和提交
对接列表的分页和检索功能
八. TypeScript
1. 认识TypeScript
JavaScript发展历史
JavaScript存在的问题
类型思维的缺失
认识TypeScript
TypeScript的特点
2. webpack环境
TypeScript的环境安装
VSCode的环境搭建
tsc编译TypeScript代码
webpack配置TypeScript环境
3. TypeScript基础
定义TypeScript变量
TypeScript常见的数据类型
TypeScript类型推导
TypeScript的兼容性、联合类型等
TypeScript的装饰器
4. TypeScript高级
枚举类型enum
元组类型tuple
任意类型any
接口类型interface
定义属性和方法
定义可选属性
定义只读属性
函数类型定义
可索引类型定义
接口的继承
接口的实现
等等...
类的定义class
类的定义
定义属性和方法
常见的修饰符
静态属性和方法
定义抽象类
等等...
类型定义type
5. TypeScript泛型
为什么使用泛型
泛型的基本使用
类、接口中的泛型
泛型方法的使用
等等...
6. tsconfig.json文件
compileOnSave
files
include
exclude
compilerOptions
target
module
lib
allowJs
等等...
7. 类型定义文件
类型定义文件 .d.ts
declare
七. Vuex状态管理
1. 为什么使用Vuex
Vuex是做什么的?
单页面状态管理
多页面状态管理
Vuex状态管理图例
2. Vuex基本使用
Vuex的安装
Vuex的代码组织
counter案例的实现
3. Vuex核心概念
1> state
State单一状态树
2> getter
Getters基本使用
Getters本身作为参数
Getters传递参数
3> Mutation
mutation基本使用
mutation传递餐宿
mutation提交风格
mutation响应规则
mutation常量管理
mutation同步函数
4> Action
Action基本定义
Action的分发
Action返回的Promise
5> Module
认识Vuex的Module
Module的局部状态
Module的Actions写法
4. 组件绑定函数
mapState
mapGetters
mapActions
mapMutations
5. 其他vuex补充
目录结构划分
热重载配置
6. Vuex的Hook
useStore
一. 邂逅体验Vue3
1. 邂逅Vue.js
为什么要学习Vue
Vue的特点
国内外Vue的现状
企业对Vue的要求
和React等框架的对比
2. Vue的安装
CDN直接引入
下载和引入
NPM包管理
Vue最新脚手架（后续详解）
3. 体验Vue开发
Hello Vue
Vue电影列表
Vue计数器案例
4. 其他知识补充
Vue的MVVM架构
Vue2和Vue3的对比
命令式和声明式编程
二. Vue3基础语法
1. 常用指令
Mustache
v-once
v-html
v-text
v-pre
v-block
2. 属性绑定
v-bind的介绍
v-bind的基础
v-bind语法糖
绑定class
绑定样式
3. 事件监听
v-on介绍
v-on基础
v-on参数
v-on修饰符
4. 条件和循环
条件渲染
v-show指令
v-if和v-show对比
v-for指令
5. 计算属性
认识和使用计算属性
计算属性的setter和getter
计算属性和方法对比
6. 属性监听
watch
7. 表单绑定
基本使用
v-model原理
其他类型
值绑定
修饰符
8. 阶段案例
书籍管理案例
三. Vue3组件化开发
1. 认识组件化
什么是组件化
组件化的核心
Vue组件化的思想
2. 组件化基础
注册组件
组件间通信
3. 组件化高级
插槽slot
插槽内容
渲染作用域
备用内容
具名插槽
作用域插槽
动态插槽名
Provide/Inject
Provide
Inject
动态组件
异步组件
四. Vue CLI详解
1. webpack5
认识webpack
webpack的基本配置
webpack打包css、js等资源
webpack打包vue资源
webpack工具原理
2. vite2工具
认识vite工具
vite工具的基本配置
vite工具打包css、js等资源
vite工具打包vue资源
vite工具工作原理
3. vue cli4
认识vue cli
vue cli创建项目
vue cli各个选项
vue cli项目目录
vue.config.js配置
五. Vue3核心语法
1. Vue常见生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted
2. Composition API
认识组合式API
ref
reactive
watchEffect
computed
h
等等...
setup函数
props
context
访问property
组合模板的使用
使用渲染函数
生命周期钩子
onMounted
onUpdated
onUnmounted
等等...
Provide/Inject
自定义Hook
自定义Hook使用
自定义Hook练习
3. Teleport的使用
Teleport的使用
Teleport的应用场景
4. Vue3过渡动画
过渡动画的介绍
进入和离开动画
列表动画的使用
状态动画的使用
5. 网络请求axios
axios库介绍和安装
axios库使用解析
axios库的二次封装
axios库的原理解析
6. Vue3响应式原理
proxy的Observer
Vue3响应式实现原理
7. Element-Plus
Element-Plus组件库
Element-Plus常用组件
8. ECharts的使用
前端可视化
认识ECharts
ECharts的使用
ECharts配置解析
ECharts各种图形
六. vue-router路由
1. 认识路由的概念
认识路由
后端路由时代
前后端分类时代
前端路由的时代
2. 前端路由的原理
hash模式
HTML5的history模式
案例解析
3. route-view基础
认识和安装vue-router
vue-router基本使用
vue-route细节补充
4. 路由组件的懒加载
什么是路由懒组件加载
懒加载和非懒加载打包效果区别
懒加载的方式
import的原理
5. 路由嵌套使用
认识嵌套路由
嵌套路由实现
嵌套默认路径
6. 路由传递参数
params方式
query方式
获取参数
$route和$router的区别
7. 路由导航守卫
钩子函数
守卫应用
参数解析
组件钩子
8. keep-alive
认识keep-alive
遇见vue-router
9.Router的Hook
useLink
useRoute
useRouter
特技讲解
原理剖析
源码解读
代码规范
代码封装
架构设计
核心技术
Vue3全家桶
Webpack5
Vite2
TypeScript
Element-plus
Echarts
收藏
0 条评论
下一页
