求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Model Center   Code  
会员   
 
 
 
开班计划 | 技术学院 | 管理学院 | 嵌入式学院 | 机械 | 军工学院 | 定向培养 | 专家指导 | 角色培养  
 电话 English
成功案例   品质保证
 
成功案例
航天信息 Java EE 5
中科院研 J2EE高级开发
赛迪时代 “J2EE设计模式
福富软件 J2EE设计模式和
上海盛趣 J2EE架构设计
信城通 J2EE体系架构设
北大方正 Java中级&J2

相关课程  
Struts+Spring+Hibernate
基于J2EE的Web 2.0应用开发
J2EE设计模式和性能调优
Java EE 5企业级架构设计
Java单元测试方法与技术
Java编程方法与技术
 
全部课程 >web开发  
Node+Vue3.0前端全栈开发实战
507 次浏览  54 次
米老师
精通web前端、移动端、服务端Java应用开发技术
 
时间地点: 北京 、上海、深圳根据报名开班
课程费用: 5000 元/人
企业内训:可以根据企业需求,定制内训,详见 内训学习手册
报公开课  


认证方式:
培训前了解能力模型。
培训后进行能力评测:
  • 在线考试
  • 能力分析,给出学习建议
  • 合格者颁发证书,作为职业技能资格证明


            本课程旨在帮助前端开发人员了解 Vue3 在真实项目中的应用。该课程将教授如何使用 Vue3 脚手架初始化项目,并使用组件化和模块化的开发模式来掌握项目的开发流程。学员还将学会使用配置打包和上线项目,模拟 JSON 后端数据进行前后端分离开发,使用 vue-router4 开发单页应用,使用 vuex/pinia 与后端数据交互等。
            通过本课程,学员将能够获得与项目从零到一的知识,以及真实一线公司如何开发项目和项目开发流程的经验。
    课程目标:
    • 掌握 Vue3 实际项目开发中所用到的工具
    • 能够知道 vue3 的基本使用步骤
    • 掌握 NodeJs 开发服务端基本应用
    • 掌握插值表达式和 v-bind 指令的用法
    • 能够掌握如何使用 v-on 指令绑定事件
    • 能够使用 v-model 指令实现数据的双向绑定
    • 能够使用 v-if 和 v-else 指令实现条件渲染
    • 能够使用 v-for 指令实现列表数据的循环渲染
    • 能够使用 create-vue 搭建 Vue3 项目、组合式 API - setup 、 reactive 和 ref 、 computed 、 watch 、生命周期函数、父子通信、模版引用、 provide/inject
    • 掌握 Vue3 组件、 Vue-router 路由、 Pinia 状态管理、 Axios 网络请求等基本应用
    • 掌握 Vue3+ElementPlus 搭建标准化后台管理系统
    课程特点:
    • 企业级项目实战
    • 完全遵循企业标准化研发流程,还原企业真实开发场景
    • 边学边练 让你拥有从企业角度思考工作的思维模式
    培训对象:web前端应用开发工程师
    学员基础:对web开发基础知识有一定了解
    授课方式: 定制课程 + 案例讲解 + 小组讨论,60%案例讲解,40%实践演练

    培训内容:2天
    课时 主题 内容安排
    0.5 天 Node.js 模块化开发 1 、初识 Node.js
          1.1 Node.js 简介
          1.2 Node.js 中的 JavaScript 运行环境
    2 、 fs 文件系统模块
          2.1 使用 readFile 方法读取文件的内容
          2.2 判断文件是否读取成功
          2.3 写入文件内容
          2.4 案例 - 整理成绩
          2.5 fs 模块 - 路径动态拼接的问题
    3 、 path 路径模块
          3.1 path.join 方法的使用
          3.2 获取路径中的文件名
          3.3 获取路径中的文件扩展名(文件后缀)
          3.4 综合案例 - 时钟案例
    4 、 http 模块
          4.1 服务器相关的概念
                4.1.1 IP 地址
                4.1.2 域名和域名服务器
                4.1.3 端口号
          4.2 创建最基本的 web 服务器
          4.3 了解 req 请求对象
          4.4 解决中文乱码问题
          4.5 根据不同的 url 响应不同的 html 内容
          4.6 案例 - 实现 clock 时钟的 web 服务器
    5 、模块化
          5.1 模块化的基本概念
                5.1.1 什么是模块化
                5.1.2 模块化规范
          5.2 Node.js 中模块化
                5.2.1 Node.js 中模块的分类
                5.2.2 加载模块
                5.2.3 Node.js 中的模块作用域
                5.2.4 向外共享模块作用域中的成员
                5.2.5 Node.js 中的模块化规范
          5.3 模块的加载机制
          5.4. 导入(引入)模块
          5.5. CommonJS 规范
    6 、包管理工具
          6.1 、概念介绍
                6.1.1 包是什么
                6.1.2 包管理工具
                6.1.3 常用的包管理工具
          6.2 、 npm
                6.2.1 npm 的安装
                6.2.2 npm 基本使用
                6.2.3 生产环境与开发环境
                6.2.4 生产依赖与开发依赖
                6.2.5 全局安装
                6.2.6 安装包依赖
                6.2.7 安装指定版本的包
                6.2.8 删除依赖
                6.2.9 配置命令别名
          6.3 、 cnpm
                6.3.1 介绍
                6.3.2 安装
                6.3.3 操作命令
                6.3.4 npm 配置淘宝镜像
          6.4 、 yarn
                6.4.1 yarn 介绍
                6.4.2 yarn 特点
                6.4.3 yarn 安装
                6.4.4 yarn 常用命令
                6.4.5 yarn 配置淘宝镜像
                6.4.6 npm 和 yarn 选择
          6.5 、管理发布包
                6.5.1 创建与发布
                6.5.2 更新包
                6.5.3 删除包
    7 、 nvm 版本管理工具
    8 、 express 框架
          8.1 、 express 介绍
          8.2 、 express 使用
          8.3 、 express 路由
                8.3.1 什么是路由
                8.3.2 路由的使用
                8.3.3 获取请求参数
                8.3.4 获取路由参数
          8.4 、 express 响应设置
          8.5 、 express 中间件
                8.5.1 什么是中间件
                8.5.2 中间件的作用
                8.5.3 中间件的类型
                      8.5.3.1 定义全局中间件
                      8.5.3.2 多个全局中间件
                      8.5.3.3 定义路由中间件
                      8.5.4 静态资源中间件
                      8.5.5 获取请求体数据 body-parser
          8.6 、 Router
                8.6.1 什么是 Router
                8.6.2 Router 作用
                8.6.3 Router 使用
           8.7 、 Node 开发基于 Restful 风格的 API 接口
    0.5 天 Vue3 基础语法 1.Vue 简介
    2.Vue API 风格
    3.Vue 开发前的准备
    4.Vue 项目目录结构
    5.Vue 语法
           •  模板语法
           •  属性绑定
           •  条件渲染
           •  列表渲染
           •  通过 key 管理状态
           •  事件处理
           •  事件参数
           •  事件修饰符
           •  数组变化侦测
           •  计算属性
           •  Class 绑定
           •  Style 绑定
           •  侦听器
           •  表单输入绑定
           •  模板引用
    Vue3.0 组件 1. 局部 / 全局组件
           •  局部组件
           •  全局组件
    2. 递归组件
           •  什么是递归组件
           •  递归菜单树
           •  定义公共数据类型接口
           •  父组件中使用子组件
           •  子组件中的第一个 script 标签
           •  子组件中的第二个 script 标签
           •  子组件中的 template 标签
    3. 动态组件 Component
           •  什么是动态组件
           •  实现 Tab 切换
           •  使用动态组件时,控制台出现警告
           •  动态组件 绑定字符串、绑定组件实例
    4. 异步组件 suspense
           •  为什么要使用异步组件
           •  defineAsyncComponent 配合 import() 实现分包
           •  使用异步组件 suspense
    5. 父子组件传值
           •  父组件给子组件传值 —— v-bind
           •  子组件接收父组件的传值 —— defineProps
           •  设置子组件接受参数的默认值 —— withDefaults
           •  子组件给父组件传参(派发事件) —— defineEmits
           •  子组件暴露给父组件内部属性 —— defineExpose
    6 、插槽
           •  什么是插槽
           •  匿名插槽
           •  具名插槽
           •  作用域插槽
           •  动态插槽
    7 、提供 / 注入
           •  提供 / 注入是什么
           •  父组件暴露(提供)数据—— provide 基本用法
           •  子组件接收(注入)数据—— inject 基本用法
    8 、兄弟组件传值
           •  EventBus 原理
           •  Mitt
           •  安装 mitt
           •  新建 mitt-bus.ts
           •  使用 mitt 发送事件
           •  使用 mitt 接收事件
           •  在全局实例上使用 mitt
    9 、 keep-alive 缓存组件
           •  为什么要使用 keep-alive
           •  开启 keep-alive 时的生命周期
           •  keep-alive 使用方法
    10 、 transition 动画组件
           •  tansition 组件基础用法
           •  自定义类名,并使用 animate.css
           •  ransition 生命周期,使用 GSAP
           •  appear
    11. transition-group 动画列表
           •  列表项过渡
           •  平面过渡
           •  状态过渡

    0.5 天 Vue Router 路由 1 、安装和配置 Vue Router
           •  安装 Vue Router
           •  配置 Vue Router
    2 、 Vue Router 的基本概念
    3 、 Vue Router 的配置项介绍
           •  routes 中的配置项介绍
    4 、路由跳转
           •  使用 `router-link` 组件
           •  使用 `router.push` 函数
    5 、路由传参
    6 、动态路由
    7 、嵌套路由
    8 、命名路由
    9 、路由守卫
           •  全局路由守卫
           •  路由独享守卫
    10 、路由懒加载
           •  使用 import() 方式实现懒加载
           •  使用动态 import() 方式实现懒加载
    11 、使用 Vue Router 的注意事项
    Axios style="padding-left:10px;"1 、安装和配置 Vue Router
           •  安装 Vue Router
           •  配置 Vue Router
    2 、 Vue Router 的基本概念
    3 、 Vue Router 的配置项介绍
           •  routes 中的配置项介绍
    4 、路由跳转
           •  使用 `router-link` 组件
           •  使用 `router.push` 函数
    5 、路由传参
    6 、动态路由
    7 、嵌套路由
    8 、命名路由
    9 、路由守卫
           •  全局路由守卫
           •  路由独享守卫
    10 、路由懒加载
           •  使用 import() 方式实现懒加载
           •  使用动态 import() 方式实现懒加载
    11 、使用 Vue Router 的注意事项
    Pinia-状态管理 1 、 Pinia 是什么
    2 、 Pinia 的特性
    3 、 Pinia 在 Vue3 中的使用
    4 、如何在 Vue3 中使用 pinia 进行状态管理
    5 、 pinia 状态管理的高级用法
           •  Getter/Setter 函数
           •  Actions 函数和异步支持
           •  Subscribe 函数订阅状态变化
           •  Pinia 持久化存储
    0.5 天 ElementPlus 1.ElementPlus UI 组件库
    2.Container 布局容器
    3.Layout 布局
    4.Icon 图标
    5.Button按钮
    6.表单元素 input
    7.select选择器以及级联选择器
    8.时间日期选择器
    9.Upload 文件 上传
    10.Form表单基础以及基础验证
    11.Form 自定义验证以及单个表单组件验证
    12.Table 基础使用 Table 多选和自定义模板
    14.Pagination分页
    15.Tree 树形控件
    16. Notice消息提示类别组件
    17.NavMenu 导航菜单
    18.Tabs标签页
    19.Container布局容器
    20.Layout 布局
    21.Icon 图标
    项目实战 1.Vue3+ElementPlus+Node前后端分离项目实战案例
    2.Nginx 部署
     
       
    507 次浏览  54 次
    其他人还看了课程
    Python应用开发最佳实践  3346 次浏览
    Three.js 3D 引擎详解与应用开发  1497 次浏览
    前端数据可视化开发  2165 次浏览
    基于J2EE的Web 2.0应用开发  4179 次浏览
    使用Vue.jS构建web应用实战  4392 次浏览
    Web应用安全架构、入侵检测与防护  6892 次浏览
    定制内训


    最新活动计划
    数据建模方法与工具 12-16[北京]
    基于模型系统仿真与验证 12-14 [讲座]
    白盒测试技术与工具实践 12-24[线上]
    LLM大模型应用与项目构建 12-26[特惠]
    UML和EA进行系统分析设计 12-20[线上]
    SysML建模专家 1-16[北京]