根据网上别人提供的视频,我模仿着做了一个适用于手机端的电影网站,参考链接为:
https://www.bilibili.com/video/BV1u4411Y7t4?p=5
开发项目流程
1.项目需求分析
2.项目工期评估
3.项目责任划分
前端:
- 静态页面制作
- 前端框架选型(选择vue之类的框架)
- 前端页面架构(文件的划分,架构的模式等等)
后端:
- 数据库开发
- API接口文档
- API接口实现
一、初始化项目
静态布局demo(用来预览网页效果,里面的数据都为静态的数据)
数据接口api
Vue脚手架搭建
创建远程仓库
按照上图指示创建git远程仓库,并用git remote指令检测origin是否成功上传。
二、项目结构分析
首先执行
$vue create 项目名
然后设置这个项目的一些基础选项
以下为我这个项目选择的信息:
1.手动设置
2.选择babel,vuex,router,不要lint代码检测,PWA和测试
3.路由模式选择history mode(路由模式有两种,一种为hash,另一种为history)
4.css选择
5.package.json
6.预设选择:不保存
创建的项目目录如下:
views文件夹的组件为页面主体,即编写某一个页面就创建一个.vue文件放到views目录下。
而components中的组件则为页面中某个部分,例如一个搜索框或者一个顶部导航栏之类的,并且一般来说components中的组件都是具有较高的复用性。
routers文件夹下则是放各个页面的路由。
如上图所示,一个routers目下的index.js文件控制总的路由设置,其他文件夹下的index.js则控制对应页面的路由。
1.views和components目录分析
先来看一个views下的组件,
Movie目录下的index.vue组件内容如下:
<template>
<div id="main" >
<Header title="喵喵电影"></Header>
<div id="content">
<div class="movie_menu">
<router-link tag="div" to="/movie/city" class="city_name">
<span>{
{
$store.state.city.nm }}</span><i class="iconfont icon-icon-test "></i>
</router-link>
<div class="hot_swtich">
<router-link tag="div" to="/movie/nowPlaying" class="hot_item">正在热映</router-link>
<router-link tag="div" to="/movie/comingSoon" class="hot_item">即将上映</router-link>
</div>
<router-link tag="div" to="/movie/search" class="search_entry">
<i class="iconfont icon-fangdajing"></i>
</router-link>
</div>
<keep