VUE3&PROJECT DAY02

VueCli项目中关于图片的处理

项目中所需要的使用的图片，可以存放在public目录下，也可以存放在src下（通常在src/assets目录中）。

如果将图片放在public目录下：

该图片将作为静态资源，一起打包。

如果将图片放在src/assets目录下：

脚手架在运行时将会编译src下的所有资源。 脚手架项目一定要经过编译（将src下的源码资源文件转换成浏览器所能解析运行的html、css、js）才可以正常运行。

对于src下的图片，脚手架在编译时，发现如果图片足够小，则将图片编译成base64图片编码，直接赋值给src属性。在页面运行时减少小图片的请求频率，优化性能。

在项目根目录下，执行命令，编译整个脚手架项目：
npm run build
编译完成后，将会生成dist目录，即完整的静态网站项目。

如何访问public下的图片呢？

若有如下图片资源：

public 
   img
      1.jpg
      2.jpg

访问方式（斜杠开头，绝对路径直接从public向下找即可）：

<img src="/img/1.jpg"/>

如何访问assets目录下的图片呢？

若有如下图片资源：

src
  assets
    tabs
      index_0.png
      me_1.png

src下的资源都使用相对路径来访问：（不使用斜杠开头）

<img src="../assets/tabs/index_0.png">   正确
<img src="@/assets/tabs/me_1.png"/>      正确  @代表src目录

什么样的图片适合放assets下编译打包？

项目中所必须使用的小图标适合放assets中。

什么样的图片需要放public下直接打包？

除了上述图片资源之外的图片，都适合放public。

注意！！如果给src添加了冒号 :src后，脚手架将不会对该路径进行编译，最终将会把动态地址直接赋值给src。这将会assets下的资源访问不到。如果想要正常访问，需要在相对路径外套一个require(path)方法手动编译图片资源。

结论：

1. 项目中必须使用的小图标放assets，其他图片可以放public。
2. assets下的图片会编译，public下的图片则直接打包。
3. public下的图片用斜杠开头直接访问，assets下的图片用相对路径(… 或 @)访问。
4. 若使用相对路径时，还需要给src加冒号，那么得长个心眼儿，在路径外需要套一个require

搭建项目基础结构

设计嵌套路由：

访问：/时，看到首页HomeView.vue，包含：<router-view/> 与 底部选项卡。

访问：/home/index时，看到首页上半部分占位符中显示Index.vue
访问：/home/video时，看到首页上半部分占位符中显示Video.vue
访问：/home/show时，看到首页上半部分占位符中显示Show.vue
访问：/home/me时，看到首页上半部分占位符中显示Me.vue

实现点击底部选项卡时，上半部分动态更新

实现步骤：

1. 新建四个二级路由页面组件：

   src/views/index/Index.vue
   src/views/video/Video.vue
   src/views/show/Show.vue
   src/views/me/Me.vue
   

2. 配置嵌套路由：

   /home/index  看到HomeView.vue中包含Index.vue
   /home/video  看到HomeView.Video.vue
   /home/show  看到HomeView.vue中包含Show.vue
   /home/me  看到HomeView.vue中包含Me.vue
   

3. 在HomeView.vue的上半部分，补一个占位符：<router-view />

实现Index.vue的静态页面的编写

1. NavBar标题栏
2. AppHeader广告栏
3. #top-nav 顶部导航栏
4. MovieItem.vue电影列表项的显示
5. 优化布局结构

进入App后，展示热映类别下的电影列表

需求分析：当进入App首页后，自动加载热映类别下的首页电影列表数据，并展示电影列表。

实现步骤：

1. 在组件挂载完毕后，发送http请求，访问热映类别下的电影列表数据。

2. 从上一个项目中，将http文件夹复制过来，放到src下。

3. 准备好服务器：

   启动xampp的mysql服务器。
   pm2 start index.js
   pm2 start uploadserver.js
   

4. 准备好MovieApi接口，提供方法，访问某一个类别下的电影列表数据。

5. 拿到返回的结果后，通过v-for在页面中显示。