1.安装  路由模块  及  状态管理模块

npm install vue-router --savenpm install vuex --save

2.自定义  TabBar  组件

src / components / TabBar.vue

TabBar.vue

3.自定义  工具类

src / utils / util.js

util.js

/** * 工具类 */let utilFunc = {    initIconFont () {        let domModule = weex.requireModule('dom');        domModule.addRule('fontFace', {            'fontFamily': "iconfont",            'src': "url('http://at.alicdn.com/t/font_404010_jgmnakd1zizr529.ttf')"        });    },    setBundleUrl(url, jsFile) {        const bundleUrl = url;        let host = '';        let path = '';        let nativeBase;        const isAndroidAssets = bundleUrl.indexOf('your_current_IP') >= 0 || bundleUrl.indexOf('file://assets/') >= 0;        const isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;        if (isAndroidAssets) {            nativeBase = 'file://assets/dist';        } else if (isiOSAssets) {            // file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/            // file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/            nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);        } else {            const matches = /\/\/([^\/]+?)\//.exec(bundleUrl);            const matchFirstPath = /\/\/[^\/]+\/([^\s]+)\//.exec(bundleUrl);            if (matches && matches.length >= 2) {                host = matches[1];            }            if (matchFirstPath && matchFirstPath.length >= 2) {                path = matchFirstPath[1];            }            nativeBase = 'http://' + host + '/';        }        const h5Base = './index.html?page=';        // in Native        let base = nativeBase;        if (typeof navigator !== 'undefined' && (navigator.appCodeName === 'Mozilla' || navigator.product === 'Gecko')) {            // check if in weexpack project            if (path === 'web' || path === 'dist') {                base = h5Base + '/dist/';            } else {                base = h5Base + '';            }        } else {            base = nativeBase + (!!path? path+'/':'');        }        const newUrl = base + jsFile;        return newUrl;    },    getUrlSearch(url,name) {        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");        var r = url.slice(url.indexOf('?')+1).match(reg);        if (r != null) {            try {                return decodeURIComponent(r[2]);            } catch (_e) {                return null;            }        }        return null;    }};export default utilFunc;　　

4.其他页面

src / pages / Home / Home.vue

例如：Home.vue

5.配置 路由

src / router / index.js

index.js

/** * 配置路由 */import Router from 'vue-router'// 首页import Home from '../pages/Home/Home.vue'// 专题import Topic from '../pages/Topic/Topic.vue'// 分类import Class from '../pages/Class/Class.vue'// 购物车import Shop from '../pages/Shop/Shop.vue'// 个人import My from '../pages/My/My.vue'Vue.use(Router)export default new Router({    // mode: 'abstract',    routes: [        { path: '/', redirect: '/home' },        { path: '/home', component: Home },        { path: '/topic', component: Topic },        { path: '/class', component: Class },        { path: '/shop', component: Shop },        { path: '/my', component: My }    ]})

6.主页面  引入 工具类  及  TabBar 组件

src / App.vue

App.vue

7.定义  入口文件  entry.js

src / entry.js

/** * 入口文件 */import App from './App.vue'import router from './router'// 创建应用程序实例new Vue(Vue.util.extend({ el: '#root', router }, App));router.push('/');

8.在  webpack.config.js 中配置 入口文件

/***************** 配置入口文件 start *****************/const entry = {index: pathTo.resolve('src', 'entry.js')};const weexEntry = {index: pathTo.resolve('src', 'entry.js')};/****************** 配置入口文件 end ******************/

9.项目 结构

10.效果图

注：#root 报错

如果你使用的是 entry.js 作为入口文件，就需要删除 webpack.conf.js 文件中的 getEntryFileContent 和 walk 方法。