视频电商网站实战 - 开始编写会员中心脚手架代码

这节课开始我们正式进入代码课。首先完成的是导航栏，那么在进入实际数据取数之前，我们要进行整个网站的脚手架代码。譬如编写自己的插件、建立通用函数库调用、API地址的存放等。

一个错误

上节课，我们运行webpack会提示一个错误：

Cannot find module 'vue-template-compiler'

这是没有安装，我们安装一下：

npm install vue-template-compiler --save-dev

今天 - 会员中心导航栏

0.相关文档
element：http://element.eleme.io/#/zh-CN/component/installation
Vue：http://cn.vuejs.org/v2/guide/
Vuex：http://vuex.vuejs.org/zh-cn/

1.编写会员中心首页模板pages/member/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户中心</title>
</head>
<body>
    <div class="container">
        <navbar></navbar>
    </div>
</body>
</html>

其中，<navbar></navbar>是我们的自定义的组件。

2..编写会员中心首页业务代码src/jtthink/member-index.js：

import Vue from 'vue';
import Vuex from 'vuex';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import navbar from './../components/member/navbar.vue';

Vue.use(Vuex);
Vue.use(ElementUI);


//注册组件
Vue.component('navbar',navbar);


//实例化Vue
new Vue({
    el:'.container',
});

3.在会员中心入口文件member-index.js中，用的的navbar组件src/components/member/navbar.vue，内容如下：

<template>
    <div>
        <el-menu theme="light" default-active="1" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>
    </div>
</template>

4.阶段性测试
这时我们访问:http://localhost:8080/member/index.html 查看效果

好的习惯

在实际项目开发中，我们经常会用的自己的写的公用函数库，这个函数库也可作为我们开发中的积累。
所以我们编写如下文件
1.jtthink/function.js，先写一个函数，内容如下：

export default{
    getVersion(){
        return '1.0';
    }
}

2.jtthink/global.js，创建共用的全局的插件(函数)，内容如下：

import functions from './function';
export  default{
    //Vue开发插件必须有的方法
    //参考文档:http://cn.vuejs.org/v2/guide/plugins.html
    install(Vue){
        Vue.prototype.functions = functions;
    }
}

只创建好文件还不行，还必须得引入，在member-index.js中：

import global from './global'; //我们自己写的全局插件
Vue.use(global);

3.上面我们已经写了一个getVersion函数，我们来使用一下吧。
navbar.vue里加入如下代码：

<script>
    export default{
        created(){
            alert(this.functions.getVersion());
        }
    }
</script>

4.浏览器测试，成功打印了getVersion()返回的内容

创建API配置库

1.src/config/APIConfig.js，这是一个配置文件，我们在这配置文件中定义好以后我们网络请求的地址，比如导航栏地址(导航栏数据从服务端获取)

export default{
    API_NavBar:'http://localhost/yiiservice/navbar.php'
}

2.然后我们要把这配置文件，加入到全局的global.js中来

import functions from './function';
import APIConfig from './../config/APIConfig';
export  default{
    //Vue开发插件必须有的方法
    //参考文档:http://cn.vuejs.org/v2/guide/plugins.html
    install(Vue){
        Vue.prototype.functions = functions;
        Vue.prototype.APIConfig = APIConfig;
    }
}

这样我们就可以通过this.APIConfig.API_NavBar拿到配置好的接口地址了。