首页手记《vuex基础入门》补全老师跳过的代码

《vuex基础入门》补全老师跳过的代码

标签：

vuex

课程页面：https://www.imooc.com/learn/1157

课程刷到第三章时，老师有些页面模板就直接跳过了

这对跟做项目的学员或初学者有些不太友好

我这边整理下老师跳过的部分，希望能帮助有需要的同学

（注意：课程3-3、3-4、3-5都有跳过的，所以要先刷完上一节课，代码没问题后，再复制我给的老师跳过的代码，不然会报错，要是有出错的，建议参考老师的源代码排错）

课程3-3登录权限模块：

1、先安装vue以及vue-router

npm install vue vue-router --save-dev
或
cnpm install vue vue-router --save-dev(建议)

2、安装less 以及 less-loader

npm  install less less-loader --save-dev
或
cnpm  install less less-loader --save-dev

3、src目录下新增 router.js 文件

内容：

import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)
const router = new VueRouter({
    mode: "history",
    base: "/",
    routes: [
        {
            path: "/login",
            name: "login",
            component: () => import("./pages/login.vue")
        },
        {
            path: "/",
            name: "index",
            component: () => import("./pages/index.vue")
        }
    ]
})
export default router

4、App.vue 做如下修改

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>
<script>
export default {
    name: "app",
    components: {},
    computed: {
        count() {
            return this.$store.state.count;
        }
    },
    methods: {
        countIncrease() {
            this.$store.commit("countIncrease", 100);
        }
    }
};
</script>
<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

5、src下新建pages文件夹，里面新增 index.vue 及 login.vue 文件

index.vue 内容如下

<template>
    <div class="index">
        <h1>你好</h1>
        <p class="text">
            尊敬的
            <span style="color: red;">用户</span>，欢迎来到德莱联盟！
        </p>
        <div class>
            <card
                :course="item"
                v-for="(item, index) in courseList"
                :key="index"
            ></card>
        </div>
        <button class="footer-opt btn">充值</button>
    </div>
</template>
<script>
import card from "../components/card";
export default {
    components: {
        card
    },
    data() {
        return {
            courseList: []
        };
    },
    created() {
        // Mock
        this.courseList = [
            {
                id: "1",
                thumb:
                    "//img1.sycdn.imooc.com//5cb831fd0949d9f306000338-590-330.jpg",
                title: "学习vuex",
                description: "2312",
                charge: "",
                userStatus: 0,
                vipLevel: 0
            },
            {
                id: "2",
                thumb:
                    "//img1.sycdn.imooc.com//5cb831fd0949d9f306000338-590-330.jpg",
                title: "实战课程",
                description: "2312",
                charge: "实战课程",
                userStatus: 1,
                vipLevel: 0
            },
            {
                id: "3",
                thumb:
                    "//img1.sycdn.imooc.com//5cb831fd0949d9f306000338-590-330.jpg",
                title: "v12会员专享课程",
                description: "2312",
                charge: "v12会员专享",
                userStatus: 2,
                vipLevel: 12
            }
        ];
    },
    mounted() {},
    methods: {       
    }
};
</script>
<style>
.index {
    padding: 0 20px 20px;
    box-sizing: border-box;
    h1,
    .text {
        text-align: left;
    }
    .footer {
        position: absolute;
        bottom: 0;
        left: 20px;
    }
    .btn {
        width: 100%;
        height: auto;
        color: #fff;
        background: #373737;
        margin: 10px 0 20px;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 5px;
        font-size: 16px;
    }
}
</style>

login.vue

<template>
    <div class="login">
        <p class="login-title">
            <span class="login-title_left">Muke</span>
            <span class="login-title_right">Wang</span>
        </p>
        <div class="section">
            <input
                class="section-input"
                v-model="form.account"
                placeholder-class="input-holder"
                placeholder="请输入您的账号"
            />
        </div>
        <div class="section">
            <input
                class="section-input"
                type="password"
                v-model="form.password"
                placeholder-class="input-holder"
                placeholder="请输入您的密码"
            />
        </div>
        <button class="btn" @click="login">登录</button>
        <p class="login-text">版本归属@ytu所有</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            isHidden: false,
            isPassword: true,
            logs: [],
            form: {
                account: "",
                password: ""
            }
        };
    },
    created() {},
    mounted() {},
    methods: {
        onGotUserInfo() {},
        goRegister() {},
        ckeckLogin() {},
        login() {
            if (!this.form.account && !this.form.password) {
                alert("请填写账号密码");
                return false;
            }
        }
    }
};
</script>
<style>
.login {
    position: relative;
    top: 0;
    left: 0;
    padding: 0 45px;
    p {
        text-align: center;
    }
    &-title {
        color: #111111;
        font-size: 36px;
        padding: 40px 0 30px;
        &_left {
            padding: 0 15px;
        }
        &_right {
            background-color: #f29d38;
            border-radius: 5px;
            padding: 0 15px;
        }
    }
    .section {
        &-input {
            width: 100%;
            height: auto;
            border: none;
            margin-bottom: 30px;
            outline: none;
            font-size: 16px;
            line-height: 1.6;
            border-bottom: 1px solid #666;
        }
        .input-holder {
            color: #777777;
            font-size: 16px;
        }
    }
    .btn {
        width: 100%;
        height: auto;
        color: #fff;
        background: #373737;
        margin: 10px 0 20px;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 5px;
        font-size: 16px;
    }
    .btn-primary {
        color: #373737;
        background: #fff;
    }
    .login-text {
        position: fixed;
        left: 0;
        bottom: 60px;
        width: 100%;
        height: auto;
        font-size: 12px;
        color: #777777;
        text-align: center;
    }
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
</style>

6、components文件夹下新增 card.vue

<template>
    <div class="course-card">
        <div class="card-img">
            <img :class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="course.thumb" alt mode>
        </div>
        <div class="card-info">
            <div class="card-info__name">
                {{course.title}}
                <div class="card-info__desc" v-html="course.description"></div>
            </div>
            <div class="card-info__oth" v-if="course.charge">{{course.charge}}</div>
            <div class="card-info__oth" v-else>免费课程</div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        course: {
            type: Object,
            default: () => {}
        }
    },
    methods: {
    }
};
</script>
<style>
.course-card {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    .card-img {
        flex: 0 0 auto;
        img {
            width: 120px;
            height: auto;
            border-radius: 10px;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
        }
    }
    .card-info {
        display: flex;
        flex: 1;
        text-align: left;
        padding-left: 20px;
        margin-bottom: -5px;
        flex-direction: column;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        &__name {
            font-size: 16px;
        }
        &__desc {
            font-size: 12px;
            color: #797979;
        }
        &__oth {
            font-size: 12px;
            color: rgb(255, 153, 0);
            margin-bottom: 10px;
        }
    }
}
</style>

7、main.js 内容如下

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import router from './router'
Vue.config.productionTip = false
Vue.use(Vuex)
// 实例化一个vuex
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
countIncrease(state, number){
state.count = number
}
}
})
Vue.prototype.$store = store
new Vue({
store,
router,
  render: h => h(App),
}).$mount('#app')

完整目录如下，（store文件夹为空目录）

然后就可以跟学老师的3-3课程啦~

刷到3-4课程

1、pages文件夹下添加 userCenter.vue

<template>
    <div class="user-center">
        <h1>用户中心</h1>
        <div class>
            <section class="user-info">
                <label for class="user-info-label">账号</label>
                <span class="user-info-value"></span>
            </section>
            <section class="user-info">
                <label for class="user-info-label">身份</label>
                <span class="user-info-value"></span>
            </section>
            <section class="vip-list">
                <ul class="container">
                    <li v-for="(item, index) in vipList" :key="index" class="list-item">
                        <div class="item-name">{{item.name}}</div>
                        <div class="item-content">
                            <span class="item-content__price">
                                {{item.charge}}元
                                <span class="item-content__date">/ 30天</span>
                            </span>
                            <button class="item-content__btn" @click="buy()">购买</button>
                        </div>
                    </li>
                </ul>
            </section>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            vipList: []
        };
    },
    mounted() {
        this.vipList = [
            { name: "vip会员", charge: "10.00", vipLevel: 0, userStatus: 1 },
            {
                name: "高级VIP1会员",
                charge: "50.00",
                vipLevel: 1,
                userStatus: 2
            },
            {
                name: "高级VIP3会员",
                charge: "100.00",
                vipLevel: 3,
                userStatus: 2
            },
            {
                name: "高级VIP9会员",
                charge: "1000.00",
                vipLevel: 9,
                userStatus: 2
            },
            {
                name: "高级VIP12会员",
                charge: "10000.00",
                vipLevel: 12,
                userStatus: 2
            }
        ];
    },
    methods: {
        recharge() {},
        upgrade() {},
        buy() {}
    }
};
</script>
<style>
.user-center {
    padding: 0 20px;
    box-sizing: border-box;
    .user-info {
        display: flex;
        align-items: center;
        line-height: 2;
        border-bottom: 1px solid #eee;
        justify-content: space-between;
        &-label,
        &-value {
            flex: 0 0 auto;
        }
    }
    .user-info:last-child {
        border-bottom: none;
    }
    .container {
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        box-sizing: border-box;
        .list-item {
            flex: 1;
            width: 100%;
            padding: 10px;
            text-align: left;
            box-sizing: border-box;
            margin-bottom: 20px;
            border-radius: 5px;
            list-style: none;
            box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
            background: linear-gradient(
                to left top,
                rgb(234, 124, 62),
                rgb(173, 26, 139)
            );
            .item-name {
                display: block;
                width: 100%;
                color: #ffe5db;
            }
            .item-content {
                display: flex;
                width: 100%;
                justify-content: space-between;
                align-items: center;
                padding: 5px 0;
                &__price {
                    flex: 1;
                    color: rgb(255, 153, 0);
                    font-size: 22px;
                    .item-content__date {
                        font-size: 14px;
                        color: #ffe5db;
                    }
                }
                &__btn {
                    flex: 0 0 auto;
                    font-size: 16px;
                    background: transparent;
                    opacity: 0.9;
                    // background: linear-gradient(to left top,red, rgb(111, 0, 255));
                    // border-top-right-radius: 30px;
                    // border-bottom-right-radius: 30px;
                    color: #fff;
                    // padding:5px 20px;
                    line-height: 2;
                    &::after {
                        border: none;
                    }
                }
            }
            .item-description {
                width: 100%;
                font-size: 12px;
                color: #ffe5db;
            }
        }
    }
    .btn {
        width: 100%;
        height: auto;
        color: #fff;
        background: #373737;
        margin: 10px 0 20px;
        padding: 15px;
        box-sizing: border-box;
        border-radius: 5px;
        font-size: 16px;
    }
}
</style>

2、router.js 修改内容

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
const router = new VueRouter({
    mode: "history",
    base: "/",
    routes: [
        {
            path: "/login",
            name: "login",
            component: () => import("./pages/login.vue")
        },
        {
            path: "/",
            name: "index",
            component: () => import("./pages/index.vue")
        },
        {
            path: "/userCenter",
            name: "userCenter",
            component: () => import("./pages/userCenter.vue")
        }
    ]
})
export default router

3-5部分

1、在pages文件夹下添加 course.vue 文件

<template>
    <div class="course">
        <h3 class="title">学习vuex</h3>
        <div class="content">
            <video class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.w3school.com.cn/i/movie.ogg" controls="controls"></video>
            <h3>简介</h3>
            <p class="content-p">是的拉萨肯德基拉斯熟练度空间阿萨德了,啦啦啦，我是卖报的小画家，哈哈哈哈。</p>
            <p class="note">
                <strong>注：</strong>分享即可获得免费的一个月vip权益
            </p>
        </div>
        <button class="share-btn">分享</button>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    methods: {
    }
};
</script>
<style>
.course {
    width: 100%;
    height: auto;
    padding: 16px;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    .title {
    }
    .content {
        text-align: left;
        video {
            width: 100%;
        }
        &-p {
            margin-bottom: 20px;
        }
        .note {
            color: #666;
        }
    }
    .share-btn {
        position: fixed;
        bottom: 20px;
        left: 5%;
        width: 90%;
        margin: 16px 0;
        border: none;
        line-height: 3;
        border-radius: 4px;
        font-size: 16px;
        color: #fff;
        background: #373737;
    }
}
</style>

2、router.js 修改内容

import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
const router = new VueRouter({
    mode: "history",
    base: "/",
    routes: [
        {
            path: "/login",
            name: "login",
            component: () => import("./pages/login.vue")
        },
        {
            path: "/",
            name: "index",
            component: () => import("./pages/index.vue")
        },
        {
            path: "/userCenter",
            name: "userCenter",
            component: () => import("./pages/userCenter.vue")
        },
        {
            path: "/course/:id",
            name: "course",
            component: () => import("./pages/course.vue")
        }
    ]
})
export default router

其他可参考老师上传的课程源码