SPA 单页web应用

webpack  项目 打包工具


build/ 项目的启动，打包的配置文件
config/  项目的配置文件

针对 vuecli 脚手架进行配置的

node_modules/  项目依赖的源码

src 项目的源码
  - assets 放静态资源的（图片，视频等）
  - components 放公共组件的
  - router     放路由的配置文件
  - App.vue   最顶级的父组件
  - main.js   项目入口文件

static 放静态资源的（图片，视频等）
.babelrc  babel 的配置文件  转换高版本js语法为低版本
.editorconfig 编辑器的代码规范


.eslintignore eslint 的忽略文件
.eslintrc.js  eslint 的配置

.gitignore git 的忽略文件
.postcssrc.js postcss 的插件
index.html
README.md  项目的帮助文档  markdown


map 源码地图

路径别名
懒加载
分离打包

css 预处理器
less scss sass stylus
pug jade 模板引擎

http://10454-haitun.liveplay.myqcloud.com/live/10454_zbh_2008140949270.m3u8

hls 视频切片技术

m3u8  是一个txt文件，主要保存了视频的播放顺序，和视频一下其他参数

1G  1000MB

xxx.mp4

分割成 100 个小视频   10MB
1.ts
2.ts
..
100.ts



组件：
  1：顶部标题栏（全局组件）
  2：相关推荐的列表  两种样式（局部组件）
  3：全部评论的列表  （全局组件）
  4：相关推荐 和 全部评论的  标题 可以封装成组件（全局组件）

作业：
  1：新闻资讯页面
     接口地址：/newsDetail
     参数：id=450

  2: 帖子页面
     接口地址：/interactDetail
     参数：id=218

  3：tvInfo.vue 页面需要导入  组件任务1 的头部，调用评论接口，显示评论组件



<div class="relevantRecommend">
      <div class="recommend_one">
          <ul>
              <li>
                  <div class="left_item">
                      <p>合肥首个铁路主题公园来了！规模等于两个逍遥津！目测会火，位置在这</p>
                      <span>2019-10-6</span>
                  </div>
                  <img src="../../static/img/radio_img.jpg" alt="">
              </li>
              <li>
                  <div class="left_item">
                      <p>合肥首个铁路主题公园来了！规模等于两个逍遥津！目测会火，位置在这</p>
                      <span>2019-10-6</span>
                  </div>
                  <img src="../../static/img/radio_img.jpg" alt="">
              </li>
              <li>
                  <div class="left_item">
                      <p>合肥首个铁路主题公园来了！规模等于两个逍遥津！目测会火，位置在这</p>
                      <span>2019-10-6</span>
                  </div>
                  <img src="../../static/img/radio_img.jpg" alt="">
              </li>
          </ul>
      </div>
      <div class="recommend_two">
          <ul>
              <li>
                  <img src="../../static/img/radio_img.jpg" alt="">
                  <p>一生中总要有个夏天给海岛，我的9天8夜</p>
              </li>
              <li>
                  <img src="../../static/img/radio_img.jpg" alt="">
                  <p>一生中总要有个夏天给海岛，我的9天8夜</p>
              </li>
              <li>
                  <img src="../../static/img/radio_img.jpg" alt="">
                  <p>一生中总要有个夏天给海岛，我的9天8夜</p>
              </li>
          </ul>
      </div>
  </div>