会员中心页面完成
- 1.跳转会员中心组件
router-link 触发路由(App.vue中)
main.js设置路由规则 2.会员中心中跳转交易订单页面
3.查看订单页面
- 对类的判断
:class="order.orderinfo.status>=2?'active':''"
; - 时间过滤器 (定义的全局过滤器
.. | dateFmt("YYYY-MM-DD HH:mm:ss")
); - v-if 来判断订单status;
如果遇到
order.orderinfo.status
undefined报错,v-if="order.orderinfo"
只需判断对象前面两级有值即可;返回
this.$router.go(-1)
路由
- query 获取参数
/orderInfo?orderId=23&goodsId=..
this.$route.query.xx
- key=value形式,
&
拼接
- key=value形式,
- params 获取参数
/orderInfo/:orderId/:goodsId
this.$route.params.xx
- value形式,
/
拼接
- value形式,
嵌套路由
路由的流程:
- 路由路径
<router-link to=""></router-link>
- 路由占位符
<router-view></router-view>
- 设置路由规则
const router = new VueRouter({ routes:[path:"/..",component:..] })
- 挂载到根实例
const vue= new Vue({el:"#app",router})
- 路由路径
组件注册:
- 全局注册
Vue.component("component-a",{template:"...",data(){},methods:{}})
必须在根实例Vue创建之前完成
*kebab-case (短横线分隔命名) PascalCase (驼峰式命名)
*- html中
<component-a></component-a>
- 局部注册
- 定义:const componentA={…}
- 注册:在
component
选项中定义你想要使用的组件new Vue({el:"#...",component:{'component-a': ComponentA}})
- 全局注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<style>
.layout {
width: 600px;
margin: 100px auto;
}
.left {
width: 200px;
height: 500px;
float: left;
border: 1px solid red;
}
.right {
width: 380px;
height: 500px;
float: right;
border: 1px solid green;
}
.top {
height: 100px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app">
<router-link to="/menu">菜单</router-link>
<router-view></router-view>
</div>
</body>
</html>
<script type="text/html" id="templateId">
<div class="layout">
<div class="left">左边菜单<br/><br/>
<router-link to="/menu/login">登录组件</router-link><br/><br/>
<router-link to="/menu/register">注册组件</router-link>
</div>
<div class="right">
<div class="top">
顶部内容
</div>
<div class="content">
<br/>
<router-view></router-view>
</div>
</div>
</div>
</script>
<script>
//注册
const menu={
template:'#templateId'
}
const login={
template:"<div>这是一个登录页面</div>"
}
const register={
template:"<div>这是一个注册页面</div>"
}
//设置路由规则
const router = new VueRouter({
routes: [{
path: '/menu',
component: menu,
children: [
{path:'login',component:login},
{path:'register',component:register},
]
}]
})
new Vue({
el: "#app",
router
})
</script>
把路由和vuex打包成模块
- 按照模块化方式抽取
- 利用模块化 是从缓存池中拿出的原理
webpack基本打包
1.在根目录创建webpack.config.prod.js文件(实际在开发版中添加些东西)
- 增加output ; 去除devServer
2.在package.json添加一个script标签(脚本),方便webpack打包
3.压缩bundle.js文件
- 项目代码es6—>es5 兼容更多浏览器
- 安装包 babel-core babel-loader babel-preset-env
- loader中配置
- 项目根目录下创建.babelrc 文件,增加presets代码
4.设置为生产环境
new webpack.DefinePlugin
5.压缩index.html文件
// HtmlWebpackPlugin 插件中
minify: {
removeComments: true, //压缩注释
minifyJS: true, //压缩js
minifyCSS: true, //压缩css
collapseWhitespace: true, //去除空格
}
今日所安装的第三方包
第一次安装
包:babel-core babel-loader babel-preset-env
引用场景:对我们项目中的代码转成es5的代码
安装方式:cnpm i babel-core babel-loader babel-preset-env -D