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>
