Vue速成day06--美团案例的设计与实现

1、项目分析及创建项目

vue init webpack meituan

2、清空工作

1、删除了assets
2、删除了components文件夹下的helloworld
3、删除了router文件夹下index.js中的关于helloworld的引入和路由注册信息
4、初始了app.vue

3、配置目录

-src
	-assets 静态资源
		-css    .css
		-js     .js
		-img    图片
	-common 公共组件
	-components 拼接页面的组件
	-page 路由组件
	-filter 过滤器
	-router 路由
	 index.js 路由规则
	-util 工具类
	App.vue 根组件
	main.js 入口文件

4、重置样式和rem

1、创建assets/css/reset.css
2、创建assets/js/rem.js
3、在main.js中引入

// 引入reset.css和rem.js
import "./assets/css/reset.css"
import "./assets/js/rem.js"

4、vscode下载插件"px to rem"，到设置->搜索px to rem，将最后一栏改成100。alt+z这个快捷键可以实现px与rem之间的转换

5、配置一级路由信息

1、在page下创建了相关组件login、index、movie、movieDetail、food、foodDetail
2、在App.vue中定义了路由出口

 <!-- 路由出口 -->
 <router-view></router-view>

3、在router/index.js定义路由规则

routes: [
    {
      path:"/login",
      component:login
    },
    {
      path:"/index",
      component:index
    },
    {
      path:"/movie",
      component:movie
    },
    {
      path:"/movieDetail",
      component:movieDetail
    },
    {
      path:"/food",
      component:food
    },
    {
      path:"/foodDetail",
      component:foodDetail
    },
    {
      path:"*",
      redirect: "/login"
    }
  ]

6、login.vue

<div>
  <h2>登录</h2>
  <div>
    账号：<input type="text">
  </div>
  <div>
    密码：<input type="text">
  </div>
  <button>登录</button>
  <router-link to="/index">去大首页</router-link>
</div>

7、index.vue

1、设置了footer的css样式
2、定义了二级路由出口

    <!-- 二级路由出口 -->
    <router-view></router-view>

3、在components下创建了相关组件home、order、mine
4、配置二级路由规则

{
  path:"/index",
  component:index,
  children:[
    {
      path:"home",
      component:home
    },
    {
      path:"order",
      component:order
    },
    {
      path:"mine",
      component:mine
    },
    {
      path:"",
      redirect: "home"
    }
  ]
}

5、实现底部导航、加选中的样式

<footer>
  <router-link to="/index/home" active-class="active">首页</router-link>
  <router-link to="/index/order" active-class="active">订单</router-link>
  <router-link to="/index/mine" active-class="active">我的</router-link>
</footer>

8、导航

1、router-link

点击完成跳转，如果有条件判断的话就不能使用router-link

2、编程式导航

this.$router.push()    添加一条新的历史记录
this.$router.replace()    用新的历史记录替换当前历史记录
this.$router.go()   要返回几层页面

9、封装全局组件

1、在common/index.js中整合所有的组件
import vBack from "../common/vBack"
import vSearch from "../common/vSearch"
export default{
  vBack:vBack,
  vSearch
}

2、在main.js中，for循环注册相关的组件
import commonComponents from "./common/index"
for(let key in commonComponents){
  Vue.component(key,commonComponents[key])
}

10、movie.vue

1、模拟数据

 movies: [{
     id: 1,
     name: '我和我的祖国',
     price: 58.8
   },
   {
     id: 2,
     name: '我和我的家乡',
     price: 39.0
   },
   {
     id: 3,
     name: '大话西游',
     price: 22.2
   }
 ]

2、遍历数据渲染页面

 <!-- 传参1 -->
 <ul>
   <li class="item" is="router-link" :to="'/movieDetail?id='+item.id" v-for="item in movies" :key="item.id">
     <p>名称：{{item.name}}</p>
     <p>价格：{{item.price}}</p>
   </li>
 </ul>
 <hr>
 <!-- 传参2 -->
 <ul>
   <li class="item1" v-for="item in movies" :key="item.id" @click="toMovieDetail(item.id)">
     <p>名称：{{item.name}}</p>
     <p>价格：{{item.price}}</p>
   </li>
 </ul>

3、针对于传参二

methods: {
  toMovieDetail(id){
    this.$router.push("/movieDetail?id="+id)
  }
}

4、在movieDetail.vue中接收数据

this.$route.query.id

11、food.vue

1、模拟数据

foods: [{
    foodId: 1,
    name: '麻辣烫',
    price: 15.50
  },
  {
    foodId: 2,
    name: '火锅',
    price: 85.00
  },
  {
    foodId: 3,
    name: '海鲜自助',
    price: 234.50
  }
]

2、遍历数据渲染页面

<ul>
  <li class="item" v-for="item in foods" :key="item.foodId" @click="toFoodDetail(item.foodId)">
    <p>名称：{{item.name}}</p>
    <p>价格：{{item.price | priceFilter}}</p>
  </li>
</ul>

3、页面跳转，并携带外卖的id，采用的是动态路由传参

methods: {
  toFoodDetail(id) {
    this.$router.push("/foodDetail/" + id)
  }
}

4、修改路由规则

{
  path:"/foodDetail/:id",
  component:foodDetail
}

5、在foodDetail中接收数据

this.$route.params.id

12、路由小结

1、$route和$router
$route 是路由信息
$router 是路由对象，用来做路由跳转
2、路由传参
	2.1?传参
	"/foodDetail?id=2&age=77"
	获取参数：this.$route.query.id
	2.2动态路由传参
	"/foodDetail/"+id
	修改规则：{path:"/foodDetail/:id"}
	获取参数：this.$route.params.id

13、封装全局过滤器

1、创建单个过滤器

export default function(price){
  return price.toFixed(2)
}

2、在filter/index.js中整合所有过滤器

import priceFilter from "./priceFilter"

export default {
  priceFilter:priceFilter
}

3、在main.js中引入，统一处理

import filters from "./filter/index"
for(let key in filters){
  Vue.filter(key,filters[key])
}

14、animate.css

1、安装

npm i animate.css --save

2、在main.js中引入

import "animate.css"

3、使用

<transition enter-active-class="animate__animated animate__bounceInDown">
  <router-view></router-view>
</transition>

15、生命周期

切换路由的时候，会触发生命周期的执行。例如：离开"/index/home"，进入"/index/order"，那么home组件会触发销毁，order会触发创建和挂载

16、字体图标

1、在阿里矢量图标库下载你想要的的图标
2、将iconfont.css放入assets/css文件夹中
3、将一些字体文件放入到assets/fonts文件夹中
4、因为路径的变化，修改iconfont.css里面的引入文件路径
5、在main.js中引入iconfont.css

import "./assets/css/iconfont.css"

6、使用

<i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>