用vue+vueRouter+vuex+vue编写的单页面手机端项目框架
非常适合H5项目···
咱们开始吧!
main.js
import Vue from 'vue' import Vuex from 'vuex' import FastClick from 'fastclick' import {WechatPlugin, AjaxPlugin, LoadingPlugin, ToastPlugin, AlertPlugin} from 'vux' import router from './router' import App from './App' /** * 加载插件 */ Vue.use(Vuex) Vue.use(WechatPlugin) Vue.use(AjaxPlugin) Vue.use(LoadingPlugin) Vue.use(ToastPlugin) Vue.use(AlertPlugin) /** * 设置vuex */ const store = new Vuex.Store({}) store.registerModule('vux', { state: { loading: false, showBack: true, title: '', number: '' }, mutations: { updateLoading (state, loading) { state.loading = loading }, updateShowBack (state, showBack) { state.showBack = showBack }, updateTitle (state, title) { state.title = title }, updateNumber (state, number){ let num = '' if(number <= 0){ state.number = num }else { num = number.toString() state.number = num } } } }) /** * 公用组件 */ Vue.prototype.updateTitle = function (value) { this.$store.commit('updateTitle', value) } /** * 日志输出开关 */ Vue.config.productionTip = true /** * 点击延迟 */ FastClick.attach(document.body) /** * 创建实例 */ new Vue({ store, router, render: h => h(App) }).$mount('#app-box')
import Vue from 'vue' import VueRouter from 'vue-router' /** * 加载模块 */ Vue.use(VueRouter) /** * 路由配置 */ const router = new VueRouter({ base: __dirname, likActiveClass: 'link-active', routes: [ { path: '/init', name: 'init', component: resolve => require(['../components/init.vue'], resolve), children: [ { path: 'personal/userInfo', name: 'userInfo', component: resolve => require(['../components/personal/userInfo.vue'], resolve), meta: {title: '主页'} }, { path: 'home', name: 'home', component: resolve => require(['../components/home.vue'], resolve), meta: {title: '主页'} } ] }, { path: '/', name: 'login', component: resolve => require(['../components/login.vue'], resolve), meta: {title: '登录'} } ] }) /** * 路由出口 */ export default router
index.vue
里面的top和bottom是自己写的组件,可以删掉(还是贴上代码吧!)id="Init">class="top">
top.vue
bottom.vueid="Top">slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :left-options="{showBack: showBack, backText: ''}" :right-options="{showMore: true}" @on-click-more="showMenus = true">{{title}} v-transfer-dom>v-model="showMenus" position="right"> style="width:200px;">v-for="(menu,value) in menuList" :title="menu.title" :value="menu.value" @click.native="goToUrl(menu.url)" :class="menu.class" v-bind:key="menu.key"> |
这两个组件在init里面用到了selected link="/init/home"> slot="icon" src="static/bottom/icon_nav_button.png"> slot="label">home
show-dot> slot="icon" src="static/bottom/icon_nav_msg.png"> slot="label">Message
selected link="/init/personal/userInfo"> slot="icon" src="static/bottom/icon_nav_article.png"> slot="label">userInfo
badge="2"> slot="icon" src="static/bottom/icon_nav_cell.png"> slot="label">News
init.vue
id="Init">class="top">
这段代码里面有个
也就是说,后面的页面到加载到
比如http://····················#/init/personal/userInfo 路径里面有init
好了上述是框架主要代码了,了解vue的一眼就懂了。我也是做个笔记而已。
附上框架效果图
最后附上git地址(这个很重要) https://github.com/Apache-Ra/vue-wechat-demo.git (不定期更新)
不理解的地方请留意