• 课程介绍
  • 学习目标
  • 课程详情
  • 本课程包括了:利用脚手架 vue-cli 使用工程化目录搭建项目;使用 Vuex 做全局的状态管理,以完成跨组件通信的目的;做 SPA 单页用 vue-router 路由库来管理路径和组件的映射关系;跨域的解决方案。
  • 从这一阶段正式对写项目前的全家桶系统学习,一步步搭建环境,利用实例引出各个知识点解决的问题,用 Vuex 来解决跨度之间的通信,让我们更方便的管理数据的变化。现在流行做 SPA 单页应用,切换导航跟跳转多页一样,这样做到路径和组件一一对应,就需要 vue-router 路由库来管理这种对应关系。
  •  Vue 全家桶系列之Vuex 状态管理和路由配置

    • Vue 语法从零到熟练;
    • vue-cli 脚手架创建无痛 webpack 配置目录结构;
    • vue-router 单页应用的前端路由管理利器;
    • vuex 集中式应用状态管理器;

    配套工具使用

    • Npm 基本使用
    • axios 用作与后端进行通信

    为什么选择 Vue.js?

    Vue 是一个构建数据驱动的 Web 界面的库,通过简单的 API 提供高效的数据绑定和灵活的组件系统。
    Vue 具有简洁、轻量、快速、 数据驱动、组件化等特点,除此之外,Vue 还具有上手快、简单易学、学完即用、快速开发的优势。
    可把页面组件化、模块化,分工明确、互不干涉,低耦合的设计使组件可复用、可测试,更易于维护。
    响应式编程,开发者只需要聚焦在状态的逻辑处理上,让框架来进行 DOM 操作,不需要自己手动更新视图。
    官方提供健全的周边工具,例如 vue-cli 创建项目目录和开发环境配置、vue-router 前端路由创建单页应用、vuex 集中式应用状态管理器。

    通过本课程,你能够学到什么?

    本课程包括了:利用脚手架 vue-cli 使用工程化目录搭建项目;使用 Vuex 做全局的状态管理,以完成跨组件通信的目的;做 SPA 单页用 vue-router 路由库来管理路径和组件的映射关系;跨域的解决方案。

    从这一阶段正式对写项目前的全家桶系统学习,一步步搭建环境,利用实例引出各个知识点解决的问题,用 Vuex 来解决跨度之间的通信,让我们更方便的管理数据的变化。现在流行做 SPA 单页应用,切换导航跟跳转多页一样,这样做到路径和组件一一对应,就需要 vue-router 路由库来管理这种对应关系。

    学前基础要求:

    1、有 HTML、CSS、JS 基础,熟悉 DOM\BOM 等操作,能独立完成 妙味 JavaScript 课程 中级阶段课后案例即可,例如:>QQ邮箱删除功能

    2、具备 AJAX 等相关知识;

    3、掌握 《Vue 入门语法和实战案例》 

    晋级:vue-cli 脚手架创建无痛 webpack 配置目录结构

    • webpack 的基础配置初探;
      • 启动应用开发模式;
      • resolve 配置访问路径;
      • 打包项目;
    • 单文件组件的定义和使用
      • 定义的命名约定;
      • import 引入使用组件;
    • 实用的 webpack 配置

      • 入口 enrty,配置一项和多项
      • 出口 output,配置文件名和文件路径,已经 cdn 的公共路径
      • loader 相关, 在引入模块前, loader 会先预处理一下模块的内容
        • babel-loader 处理 js 模块, 配合不同的 babel 插件可以编译不同内容
          • css, style-loader 引入 css, 如果你要引入 css, 应该先让 css-loader 介入处理
          • file-loader 加载资源文件, css-loader 会帮你引入一些图片或者你会在 js 里面引入一些资源依赖, 这个时候需要你把这些路径和资源交给 file-loader 处理.
      • plugin 相关, 插件会做一些 loader 做不来的事情, 它可能会在构建的不同时间点起作用

        • html-webpack-plugin
        • clean-webpack-plugin
        • ProvidePlugin, 更快速的引入模块
        • devtool 找到源码的位置
        • webpack-dev-server, 开发测试的利器

        学习目标:这个脚手架工具是官方推出的,只需要安装即可使用,无需对 webpack 进行多余的配置,它的目标也是解决 webpack 配置繁琐的问题,达到无痛的使用 vue 编写应用的目的。学习 Vue-cli 搭建的目录结构,并在此基础上创建自己的应用。


    深入:vue-router 单页应用的前端路由管理利器

    • 前端路由的作用
      • 将组件映射在对应的路由,访问时渲染;
      • 做单页应用;
    • 路由配置使用前置准备
      • 安装路由模块;
      • 配置路由参数;
      • 注入 Vue 根实例中;
      • router-view 声明渲染的位置;
    • 嵌套路由:视图有多层组件嵌套,同样路由也有多层组件嵌套,格式为:/a/b/c;
    • 动态路由:把匹配到的路径都映射到同一个组件,其中不同路径可以设置为动态路径访问,可通过路由信息对象 $route 拿到动态参数 pramas;
    • 命名路由:通过 name 标识一个路由;
    • HTML5 History 模式;
    • 重定向 和 别名;
    • 导航钩子函数;
    • 代码分隔懒加载;
    • 编程式导航;
    • 常用 API:

      • router-link:创建一个链接;
      • router-view:声明组件渲染的位置;
      • mode:访问模式,默认为:“hash”模式,可改为 “history”;
      • base:路由的基本路径,上线到服务端常用;
    • Vue 案例精选荟萃

      • 【实例】mock 数据网站

        学习目标:vue-router 是管理路径映射组件的前端路由模块,简单的快速创建单页应用。学习如果配置路径和组件的映射关系,处理各个页面不同的访问权限。


    沉迷:vuex 集中式应用状态管理器

    • vuex 采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化;
    • 什么时候需要用到 vuex;
      • 当多个视图依赖于同一状态;
      • 来自不同视图的行为需要变更同一状态;
    • store(仓库):它就是一个容器,它包含着你的应用中大部分的状态;状态存储是响应式的;不能直接改变 store 中的状态;
    • state(状态):定义应用的单一状态树,用一个对象就包含了全部的应用层级状态;
    • getter(派分的状态):抽离操作状态的逻辑,可被多组件使用;
    • mutation(修改状态的唯一途径):要使改变状态可被记录,必须要 commit 一个 mutation;mutation 必须是同步更新状态;
    • action(异步操作):异步操作产生结果;Action 提交的是 mutation,而不是直接变更状态;

    • Vue 案例精选荟萃

      • 【实例】计数器
        学习目标:当跨多层组件需要传递数据时候,自然而然的就会使用 vuex 来解决这样的事情,变得异常简单。而学习 vuex 本身也有一定的复杂度,最主要的是刚上手书写可能不习惯,等写多了就会发现设计的精妙之处。通过例子的学习,学会抽象的 mutations,actions 这些概念的运用。

    咨询方式:

    • 咨询QQ:2852509866、2852509867、2852509868
    • 微信:miaov-class
    • 电话:010-57269690

    想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

课程目录

资料下载

购买课程后,可免费下载课件

讲师信息

王允

主讲教师:王允

讲师介绍:实战派讲师,电子商务专业,学习编程之前,曾自学各类软件,如:PS\AI\AE\DW\Maya\flashAS… 后转战至编程领域,为知名餐饮企业“西贝菜品”开发官网,另外还开发了基于微博的“企业粉丝管理”系统。 随后任职于“中国移动”,成为前端团队负责人,负责“技术人员招聘、技术难点攻关”等事宜; 2014年供职于“国美在线”2014年供职于“国美在线”任“JS高级前端工程师”,负责“国美在线”的“购物车”及周边相关功能模块开发,并负责团队技术攻关,如:Angular\RequireJS\SeaJS\Backbone等

相关课程

  • vue 进阶

    ¥158.00
    当前热度:69088
  • Vue 仿锤子商城实战

    ¥139.00
    当前热度:29357
  • Vue 系统修炼与精彩实战

    ¥1,888.00
    当前热度:6245
  • Vue 入门语法和实战案例

    ¥388.00
    当前热度:5463
  • Vue 酷狗音乐综合实战

    ¥588.00
    当前热度:3939
“100%中奖,幸运好礼转到手”
幸运用户
用户 奖励方式
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
1. 中奖后请联系客服,兑换奖品;
2. 兑奖有效期:2018 年 10 月 18 日 - 2018 年 12 月 31 日;
3. 本活动最终解释权归妙味课堂所有;
您还剩余1次抽奖机会
 
“100%中奖,幸运好礼转到手”
恭喜中奖
奖品名称
“下笔消费返还10%现金”
查看奖品详情
 
“100%中奖,幸运好礼转到手”
奖品名称
下笔消费返还10%现金
奖品描述:

1、赠送1年VIP会员视频权限

2、不能赠予,仅限中奖的用户使用

3、提供ID号+绑定的手机号

4、提供个人中心的中奖截图

兑换有效期: 2018年11月31日 - 17:00:00
兑换方式:联系客服兑换

客服联系方式:

QQ:2852509866、2852509868

微信:miaov-class、miaov-study

返回
官方微博
常见问题
手机观看
微信扫一扫
公众号内观看视频
咨询客服
点击咨询QQ客服
微信客服
返回顶部