vue第三单元(webpack的应用-能根据具体的需求构建对应的开发环境)

时间:2023-03-09 18:50:53
vue第三单元(webpack的应用-能根据具体的需求构建对应的开发环境)

第三单元(webpack的应用-能根据具体的需求构建对应的开发环境)

#课程目标

  1. 理解什么是单页面应用。
  2. 掌握单页面和多页面的差异。
  3. 了解单页面的实现原理。
  4. 掌握模块化的方式实现webpack配置,区分线上环境和开发环境,能够快速切换对应的配置。

#知识点

  1. 单页面应用(spa),是仅仅使用一个html页面,结合javaScript以及页面url地址模拟出多页面的页面跳转效果。

  2. 要实现单页面应该要解决的几个问题是

    • 如何建立视图和url地址的对应关系
    • 如何更加方便的表示并且管理视图
    • 如何通过javaScript改变url地址,但是不让页面向服务端发起请求
    • 如何监听url地址的变化
  3. 学习使用webpack-merge,根据不同的环境编写不同的配置,可以复用公共的配置。

  4. 使用以下目录结构去编写webpack配置

-- webpackConfig
-- config.js
-- webapck.base.js
-- webpack.dev.js
-- webpack.devServer.js
-- webpack.pro.js

#授课思路

vue第三单元(webpack的应用-能根据具体的需求构建对应的开发环境)

#案例和作业

    1. 自己定义单页面的开发方式

    2. 使用webpack搭建出一个单页面的应用程序的开发环境