移动端电影项目
项目搭建
项目搭建
- 创建vue2项目:
vue create movie-app
- 安装路由:
npm install vue-router@3.2.0
- 使用less语法:
npm install less@4.1.1
和less解析器npm install less-loader@7.3.0
项目路由
路由分析图
路由配置
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 swiper@6.2.0
- 如何使用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组件
- 文件下载:下载的文件解压之后放在public文件夹下。
- 引入:在index.html文件里引入
<link rel="stylesheet" href="/iconfont/iconfont.css">
- 使用:
- iconfont解压后的文件,找到demo_fontclass.html文件并点击,会出现如下页面
- 找到想要的图标,并相应的class即可,例如下面就是第一个图标的引入
<i class="iconfont icon-all"></i> <!-- iconfont是必须写的, icon-all是每个图标特有的。-->
- iconfont解压后的文件,找到demo_fontclass.html文件并点击,会出现如下页面
- 当点击对应区域时候,确保点击区域文字和图标的高亮效果
- 点击对应区域时候,进行不同页面的路由跳转。
- 在components文件夹下创建FilmTabbar.vue文件
- 布局思想:
-
一行三个菜单导航:使用flex弹性和模型布局
-
为了语义化:nav表示整体 / ul表示每个菜单导航 / li表示文字或者图标
-
进行路由跳转:使用声明式导航
<router-link></router-link>
,
使用到to
和tag
,active-classs
标签:这里是该路由标签的具体介绍及用法第一个跳转到电影页面,就是首页
第二个跳转到影院页面,views / CinameMovie.vue
第三个跳转到我的页面,views / LoginMovie.vue -
具体代码实现:
<nav> <ul> <router-link to="/film" tag="li" active-class="kerwinative"> <i class="iconfont icon-all"></i> <span>电影</span> </router-link
-