基于vue+vant搭建移动端通用架子

时间 2019-11-05

标签基于 vue+vant vue vant 搭建移动通用架子栏目无线繁體版

原文原文链接

项目初衷

开发一个H5的通用架子，让前端同窗开箱即用，迅速投入战斗。css

截止到2019-10-29 10:25，已经被fork了34次，若是您在使用过程当中还但愿能给我提issue,或者直接加我微信13216698987 ❤️ ❤️ ❤️html

扫码预览：

项目源码在文章结尾处，记得查收哦~

主要功能

经常使用目录别名
Vant/Rem适配
scss支持、_mixin.scss、_variables.scss
页面切换动画+keepAlive
页面标题
自动注册：自动注册路由表/自动注册Vuex/svg图标引入
mock server
axios封装、api管理
用户鉴权
vuex-loading
vo-pages/dayjs/vconsole
生产环境优化

经常使用目录别名

Vant/Rem适配

按照Vant官网推荐自动按需引入组件，一样，Vant官网中也有对Rem适配的推荐配置，按照官网说明的使用。须要注意的是postcss的配置中，autoprefixer下的browsers须要替换成overrideBrowserslist，不然会有报错信息。具体如图
前端

scss支持、_mixin.scss、_variables.scss

选择scss做为css预处理，并对mixin、variables、common.scss做全局引入。vue

css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: !!IS_PRODUCTION,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    // 启用 CSS modules for all css / pre-processor files.
    modules: false,
    loaderOptions: {
      sass: {
        data: '@import "style/_mixin.scss";@import "style/_variables.scss";@import "style/common.scss";' // 全局引入
      }
    }
  }
复制代码

页面切换动画+keepAlive

利用vuex存取/更新页面切换方向，配合vue的transition作页面切换动画，router设置keepAlive判断页面是否须要缓冲。webpack

// vuex中
state: {
  direction: 'forward' // 页面切换方向
},
mutations: {
  // 更新页面切换方向
  updateDirection (state, direction) {
    state.direction = direction
  }
},
// App.vue
<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view class="router"></router-view>
      </keep-alive>
      <router-view class="router" v-else></router-view>
    </transition>
  </div>
</template>
复制代码

页面标题

在vue-router页面配置中添加meta的title信息，配合vue-router的beforeEach注册一个前置守卫用户获取到页面配置的titleios

// get-page-title.js
import defaultSettings from '@/settings'

const title = defaultSettings.title || 'H5Vue'

export default function getPageTitle (pageTitle) {
  if (pageTitle) {
    return `${pageTitle} - ${title}`
  }
  return `${title}`
}
// permission.js
router.beforeEach((to, from, next) => {
  // set page title
  document.title = getPageTitle(to.meta.title)
}
复制代码

自动注册

先来了解一下require.context():git

你能够经过 require.context() 函数来建立本身的 context。github

能够给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录，以及一个匹配文件的正则表达式。web

webpack 会在构建中解析代码中的 require.context() 。正则表达式

上面的是官网原话，可能你跟我同样没太看懂，说白了，他能够用来导入模块。

来看一下如何使用，个人router下的文件结构是这样的：

// 利用require.context()自动引入article.js和user.js
const routerContext = require.context('./', true, /\.js$/)
routerContext.keys().forEach(route => {
  // 若是是根目录的 index.js 、不处理
  if (route.startsWith('./index')) {
    return
  }
  const routerModule = routerContext(route)
  /** * 兼容 import export 和 require module.export 两种规范 */
  routes = routes.concat(routerModule.default || routerModule)
})
复制代码

须要额外注意的是，404页面须要在自动引入后向路由数组concat上去，不然会提早匹配到404页面。

对于vuex也一样引入，记得把引入的vuex按照文件名注册为对应的模块中。

mock server

Mock server部分可直接参看vue-element-admin的mock方案

axios封装

axios部分，配置了baseUrl、超时时间，利用拦截器对header添加了用户的Token，方便下一步的用户鉴权，并对错误作了Toast提示。具体错误的code须要视各业务而定，本项目只作为示例参考。

用户鉴权

在vue-router的beforeEach中，添加用户鉴权功能。当用户登陆后使用cookie持续化保存用户token，并赋值到vuex，后续可利用token获取用户信息。具体代码以下图：

vuex-loading

在vuex3.1.0中对vuex.subscribeAction作了改动，使其拥有了before/after钩子函数。

// subscribeAction官网示例
store.subscribeAction({
  before: (action, state) => {
    console.log(`before action ${action.type}`)
  },
  after: (action, state) => {
    console.log(`after action ${action.type}`)
  }
})
复制代码

有了它，配合vuex的插件功能，实现对应action的状态监听也再也不是难题。

点击查看具体实现代码

参照自vue 在移动端体验上的优化解决方案

// 使用方法
computed: {
  ...mapState({
    loading: state => state['@@loading'].effects['test/onePlusAction']
  })
}
// 其中 test对应的是vuex中的模块名，onePlusAction对应模块内的actions
复制代码

具体效果：

列表页（vo-pages的使用）

列表页这里，使用了本人本身写的组件vo-pages，详细使用可查看一款易用、高可定制的vue翻页组件

实现效果：

生产环境优化

上线前，得优化一下资源了，该项目作了以下几步操做

通用库改用CDN
关闭sourcemap防止源码泄露
丑化html/css/js
生成gzip
移除掉debugger/console
利用webpack-bundle-analyzer作资源分析，提供进一步优化的数据分析想对性能、资源了解更多的，推荐Vue SPA 项目webpack打包优化指南这篇文章。

花了很多时间开发了这个项目，但愿能提升您的H5开发效率。也欢迎你们跟我一块儿交流学习。