Vue实战项目个人总结

根据网上别人提供的视频，我模仿着做了一个适用于手机端的电影网站，参考链接为：
https://www.bilibili.com/video/BV1u4411Y7t4?p=5

开发项目流程
1.项目需求分析
2.项目工期评估
3.项目责任划分
前端：

1. 静态页面制作
2. 前端框架选型（选择vue之类的框架）
3. 前端页面架构（文件的划分，架构的模式等等）

后端：

1. 数据库开发
2. API接口文档
3. 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>