Vue学习之十一(会员中心页面完成,嵌套路由,完成webpack基本打包)

会员中心页面完成

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.statusundefined报错,v-if="order.orderinfo"只需判断对象前面两级有值即可;
返回 this.$router.go(-1)

路由

query 获取参数 /orderInfo?orderId=23&goodsId=.. this.$route.query.xx
- key=value形式, &拼接
params 获取参数/orderInfo/:orderId/:goodsId this.$route.params.xx
- 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

Vue学习之十一(会员中心页面完成,嵌套路由,完成webpack基本打包)

会员中心页面完成

路由

嵌套路由

把路由和vuex打包成模块

webpack基本打包

今日所安装的第三方包

猜你喜欢