移动端电影项目_vue移动端电影-CSDN博客

本文链接：https://blog.csdn.net/weixin_52872150/article/details/127402562

移动端电影项目

项目搭建
- 项目搭建
项目路由
清除默认样式
各个组件的配置
axios的引入与封装

项目搭建

创建vue2项目：vue create movie-app
安装路由：npm install [email protected]
使用less语法：npm install [email protected]和less解析器npm install [email protected]

项目路由

路由分析图

在这里插入图片描述

路由配置

src / router /index.js文件配置

import Vue from 'vue'   //引入vue 
import VueRouter from 'vue-router'   //引入vue-router
Vue.use(VueRouter)  //使用vue-route

//下面是路由集合routes,由多个路由组成
const routes=[
 {
        //重定向：不管是什么乱七八糟的路径，都会匹配到film组件的路径
        path:'*',
        redirect:'/film'
    },
    {
   
        path:'/film',
        redirect:'/film/nowplaying',//当路径为film组件时候，就重定向到热映组件
        component:()=>import('../views/FilmMovie') //路由懒加载写法，需要这个组件时，再进行加载
    }
]

//创建路由实例，并且导出
export default new VueRouter({
   
    routes,
    mode:'hash'  //路由模式为哈希模式
})

main.js路口文件引入

import router from './router/index.js' //引入
new Vue({
   
  router,  //路由实例
  render: h => h(App),
}).$mount('#app')

清除默认样式

可以直接在app组件里写,没有设置scope,代表作用于全局组件

<style>
html,body{
    
  margin:0;
  padding:0;
}
ul,p,h3{
    
  padding: 0;
  margin: 0;
}
li{
    
  list-style: none;
}
</style>

各个组件的配置

轮播图：FilmSwiper组件

下载swipper插件：npm install [email protected]
如何使用swiper：查看swiper官网AP文档
因为有多个地方用到了轮播图，所以把它封装成一个组件

几个注意点

在mounted生命周期中创建swiper实例，因为需要获取图片dom等，需要等dom都挂载完毕之后才开始创建swiper实例

mounted() {
     
  new Swiper(".swiper-container", {
     
    autoplay: true, //可选选项，自动滑动
    pagination: {
     
      el: ".swiper-pagination",
    },
  });
},

轮播图的图片来自于filmmovie组件，所以使用<slot></slot>来进行filmmovie组件向swiper组件传dom
在封装的swiper组件中需要引入如下文件

 //引入swiper的js
 import Swiper from "swiper/bundle";

  //引入swiper的css
 import "swiper/swiper-bundle.min.css";

底部导航栏：FilmTabbar组件

全局组件：在APP组价里引用该组件
字体图标的引入

文件下载：下载的文件解压之后放在public文件夹下。

引入：在index.html文件里引入

<link rel="stylesheet" href="/iconfont/iconfont.css">

使用：
- iconfont解压后的文件，找到demo_fontclass.html文件并点击，会出现如下页面
- 找到想要的图标，并相应的class即可，例如下面就是第一个图标的引入
```
<i class="iconfont  icon-all"></i>  

```