手把手撸码前端 专注于0基础入门教学,vue.js 3.0+Vuex+Router+Axios+ElementUI开发管理后台,建立在公司项目开发的基础上,以真实开发流程讲解项目,并将公司日常开发经验带到教学中。学习项目开发整体流程,原形、测试用例、团队协作,真实API业务接口,由0到1搭建管理后台,及各职位角色负责内容。并学习VUE.js API:Vue指令、组件、状态管理、脚手架、性能等核心功能;
手把手撸码前端 系列教程,专注于0基础入门教程,以公司实际上班场景开发项目,将工作场景带入视频教学中。
手把手撸码前端,课程内容由 HTML5+CSS3 0基础入门、响应式、javascript、vue、react、小程序等系列视频录制;涵盖web前端技术大部分企业实际应用项目;
项目地址:https://github.com/bigbigtime/vue-admin
项目预览:http://vue-admin.web-jshtml.cn
- 登录、注册
- 信息管理:列表、新增、编辑、删除
- 文章详情页展示
- 用户模块:列表、新增、编辑、删除
- 动态路由:菜单权限(根据功能、角色分配)、按钮级权限
- 七牛云图片第三方管理
- vue组件化开发(核心)
- axios拦截器
- Elementui二次封装组件
- ....
- vue
- vuex
- vue-router
- elementUI
- sass
- axios
- qiniu-js
- sha1
- nginx
- 第1学时 了解产品从0到1的开发流程,产品经理、UI设计师、研发部、测试工程师
- 第2学时 安装node.js、vue3.0脚手架、创建github代码管理仓库、构建vue项目
- 第3学时 2.0与3.0的差异,vue.config.js、引入全局样式、router重定向、elementui依赖,git命令提交文件
- 第4学时 vue文件标准结构、v-for遍历、key、v-bind属性、@click事件、绑定class、基础数据类型、引用数据类型区别
- 第5学时 熟悉element-ui组件、制作表单验证、了解组件的用法
- 第6学时 封装校验js文件、webpack目录配置指向、export暴露方法、import引用、指令v-show、v-if的区别
- 第7学时 2.0语法转3.0、setup函数、reactive函数、ref函数、isRef、toRefs方法
- 第8学时 axios拦截器,模块管理API,export、export default的区别
- 第9学时 axios跨域配置、环境变量、接口文档
- 第10学时 登录接口接调试、响应拦截、elementui message、root参数
- 第10-1学时 登录接口接调试、响应拦截、elementui message、root参数
- 第11学时 按测试用例流程开发项目、注册接口联调、倒计时setTimeout、setInterval、超时timeout
- 第11-1学时
- 第11-2学时 登录接口调试、定时器知识点
- 第12学时 了解基础的Promise的方法、resolve、reject、all、race、then、catch
- 第13学时 请求头拦截、Request Headers添加参数、登录密码sha1加密、前端台加密流程、代码优化封装方法
- 第14学时 简单了解vue学习目标,具体学习什么东西,了解基础的指令
- 第15学时 后台首页搭建、router路由跳转、children属性、components组件、局部组件引入
- 第16学时 elementui的el-menu组件生成路由菜单、定义全局elemenui样式表、修改组个样式
- 第17学时 svgIcon制作、全局组件Vue.component、父子组件传值props、propsData、计算属性computed
- 第17-1学时 完善后台首页布局
- 第18学时 Vuex、State、Getters、Mutations、菜单导航收起、展开
- 第18-1学时 cookie存储,sessionStorage存储、localStorage存储、JSON.parse、JSON.stringify
- 第18-2学时 Vuex的action异步、同步、modules模块管理状态数据
- 第19学时 router.beforeEach路由守卫,检测toKen是否非法进入后台,to、from参数、next方法、Vuex命名空间
- 第19-1学时 登录存储token、token存在基础逻辑进入后台
- 第19-2学时 退出后台清除token、防止非法进入、GIT代码合并、提交当天开发的代码
- 第20学时 设计稿UI制作、element-ui组件、el-select、el-row、el-col、el-button
- 第20-1学时 设计稿UI制作、element-ui组件、el-table、el-pagination
- 第20-2学时 设计稿UI制作、element-ui组件、el-dialog、父子组件回调emit、修饰器sync、vue2.0、3.0写法、watch
- 第20-3学时 设计稿UI制作、element-ui组件、el-messageBox、自定义全局方法export install、VUE3.0组件重命名、watch
- 第20-4学时 设计稿UI制作、信息分类UI制作
- 第21学时 信息管理模块,一级分类接口、获取分类接口、onMounted、相关优化
- 第21-1学时 信息管理模块,删除接口、修改接口
- 第21-2学时 接口封装,vue3.0封装方式,vuex的actions方式,为后期维护方便
- 第21-3学时 添加信息接口、获取列表接口、分页处理请求数据、获取分类优化,变量优化
- 第21-4学时 单记录、批量删除接口、table组件数据加载优化、formatter属性返回值、日期组件配置数据格式、筛选条件处理
- 第21-5学时 信息编辑接口、添加子级分类接口、请求全部分类接口
- 第21-6学时 原型学习、原型版本查看、GIT命令控制代码版本迭代、合并代码、创建新分支
- 第22学时 router路由跳转、5种传参方式、vuex配合HTML5本地储存
- 第22-1学时 详细页数据读取、初始化数据、富文本编辑器、vue devTool依赖
- 第22-2学时 elementui upload组件结合七牛云第三方储存,七牛云建立空间、域名绑定、解析
- 第22-3学时 elementUI组件二次封装开发,组件封装的一些问题思考,什么时候需要watch,传参动态配置数据
- 第23学时 用户管理功能迭代、git分支创建、日常工作中的日报、周报总结、项目的管理
- 第23-1学时 用户管理UI制作、elementUI el-select组件封装、参数配置、组件命名冲突
- 第23-2学时 真正理解vue组件化开发、组件概念、优势、全局组件component、局部组件import、从源头解决BUG
- 第23-3学时 vue生命周期,组件生命周期,3.0改写2.0组件
- 第23-4学时 vue3.0生命周期,封装el-table组件
- 第23-5学时 封装el-table组件,v-slot插槽3种方式,数据绑定
- 第23-6学时 封装el-table组件,数据请求,整合url请求地址,统一api文件夹管理
- 第23-7学时 封装el-table组件,业务逻辑的拆分、组合
- 第23-8学时 elementUI 页码组件、业务逻辑拆分页码,配置项
- 第23-9学时 vue2.0 mixins混入、按需混入、全局混入
- 第24学时 省、市、区、街道组件封装、业务逻辑抽离
- 第24-1学时 省、市、区、街道组件封装、业务逻辑抽离
- 第24-2学时 省市区数据返回,el-radio、el-checkbox、获取角色管理API
- 第24-3学时 用户添加接口、json对象深拷贝、浅拷贝用法及注意事项
- 第24-4学时 组件通讯开始篇.sync、elemntUI Switch组件、用户列表、删除接口联调
- 第24-5学时 组件通讯完整版(重点知识)
- 第24-6学时 用户状态接口、编辑接口、搜索接口联调(上)
- 第24-7学时 用户状态接口、编辑接口、搜索接口联调(下)
- 第25学时 动态路由开发,以系统分配路由,系统列表接口
- 第25-1学时 动态路由开发,以角色分配路由
- 第25-2学时 按钮级权限
- 第25-3学时 按钮级权限,自定义指令处理
- 第26学时 组件缓存keep-alive、接口优化避免资源浪费
- 第26-1学时 BUG修复、监听路由变化、环境变量参数配置
- 第26-2学时 404页面
- 第26-3学时 404页面问题修复,退出接口联调
- 第27学时 BUG修复过程、优先级排序、项目流程阶段、一些啰嗦的话语
- 第28学时 ECS云服务器购买、了解服务器的基础结构、nginx安装、端口配置、防火墙
- 第28-1学时 nginx配置、多项目部署、单项目部署、iptables安装配置
- 第28-2学时 nginx配置、日志查看,proxy_pass指向配置、调通接口数据、域名解析访问项目
- 第29学时 VUE3.0后台系统开发结束语、后续学习的系列课程
- 0基础入门HTML5+CSS3 https://www.bilibili.com/video/BV12741127Fw
- VUE3.0体验版API,实战大公司级管理后台开发 https://www.bilibili.com/video/BV1zJ411g7Fx
- javascript入门、初级、中级 https://www.bilibili.com/video/BV11p4y1C7K9
- VUE3.0重制VUE2.0版本
- 原生HTML5+CSS3响应式
- React 公司级小型人事管理系统
- 关注手把手撸码前端官网:http://www.web-jshtml.cn
扫码关注我的个人微信公众号,分享更多原创文章。点击交流学习加我微信、qq群。一起学习,一起进步
欢迎加入:
手把手撸码前端群:680499707