vue-cli4-vant：基于vue-cli4和vant的移动端开发模板

# vue-cli4-vant ## 简介 这是基于 vue-cli4 实现的移动端 H5 开发模板，其中包含项目常用的配置及组件封装，可供快速开发使用。 技术栈：vue-cli4 + webpack4 + vant + axios + less + postcss-px2rem ```js // 安装依赖 npm install // 本地启动 npm run dev // 生产打包 npm run build ``` ## 配置 vant vant 是一套轻量、可靠的移动端 Vue 组件库，非常适合基于 vue 技术栈的移动端开发。在过去很长的一段时间内，本人用的移动端 UI 框架都是 vux。后来由于 vux 不支持 vue-cli3，就转用了 vant，不得不说，无论是在交互体验上，还是代码逻辑上，vant 都比 vux 好很多，而且 vant 的坑比较少。 对于第三方 UI 组件，如果是全部引入的话，比如会造成打包体积过大，加载首页白屏时间过长的问题，所以按需加载非常必要。vant 也提供了按需加载的方法。babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。 1、安装依赖 ``` npm i babel-plugin-import -D ``` 2、配置 .babelrc 或者 babel.config.js 文件 ```js // 在.babelrc 中添加配置 { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] } // 对于使用 babel7 的用户，可以在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] }; ``` 3、按需引入 你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式 ```js import Vue from 'vue' import { Button } from 'vant' Vue.use(Button) ``` ## rem 适配 移动端适配是开发过程中不得不面对的事情。在此，我们使用 postcss 中的 px2rem-loader，将我们项目中的 px 按一定比例转化 rem，这样我们就可以对着蓝湖上的标注写 px 了。 我们将 html 字跟字体设置为 100px，很多人选择设置为 375px，但是我觉得这样换算出来的 rem 不够精确，而且我们在控制台上调试代码的时候无法很快地口算得出它本来的 px 值。如果设置 1rem=100px，这样我们看到的 0.16rem，0.3rem 就很快得算出原来是 16px，30px 了。 具体步骤如下； 1、安装依赖 ``` npm install px2rem-loader --save-dev ``` 2、在 vue.config.js 进行如下配置 ```js css: { // css预设器配置项 loaderOptions: { postcss: { plugins: [ require('postcss-px2rem')({ remUnit: 100 }) ] } } }, ``` 3、在 main.js 设置 html 跟字体大小 ```js function initRem() { let cale = window.screen.availWidth > 750 ? 2 : window.screen.availWidth / 375 window.document.documentElement.style.fontSize = `${100 * cale}px` } window.addEventListener('resize', function() { initRem() }) ``` ## axios 请求封装 1、设置请求拦截和响应拦截 ```js const PRODUCT_URL = 'https://xxxx.com' const MOCK_URL = 'http://xxxx.com' let http = axios.create({ baseURL: process.env.NODE_ENV === 'production' ? PRODUCT_URL : MOCK_URL, }) // 请求拦截器 http.interceptors.request.use( (config) => { // 设置token，Content-Type var token = sessionStorage.getItem('token') config.headers['token'] = token config.headers['Content-Type'] = 'application/json;charset=UTF-8' // 请求显示loading效果 if (config.loading === true) { vm.$loading.show() } return config }, (error) => { vm.$loading.hide() return Promise.reject(error) } ) // 响应拦截器 http.interceptors.response.use( (res) => { vm.$loading.hide() // token失效，重新登录 if (res.data.code === 401) { // 重新登录 } return res }, (error) => { vm.$loading.hide() return Promise.reject(error) } ) ``` 2、封装 get 和 post 请求方法 ```js function get(url, data, lodaing) { return new Promise((resolve, reject) => { http .get(url) .then( (response) => { resolve(response) }, (err) => { reject(err) } ) .catch((error) => { reject(error) }) }) } function post(url, data, loading) { return new Promise((resolve, reject) => { http .post(url, data, { loading: loading }) .then( (response) => { resolve(response) }, (err) => { reject(err) } ) .catch((error) => { reject(error) }) }) } export { get, post } ``` 3、把 get，post 方法挂载到 vue 实例上。 ```js // main.js import { get, post } from './js/ajax' Vue.prototype.$http = { get, post } ``` ## 工具类函数封装 1、添加方法到 vue 实例的原型链上 ```js export default { install (Vue, options) { Vue.prototype.util = { method1(val) { ... }, method2 (val) { ... }, } } ``` 2、在 main.js 通过 vue.use()注册 ```js import utils from './js/utils' Vue.use(utils) ``` 本文提供以下函数封装 - 获取 url 参数值 - 判断浏览器类型 - 判断 IOS/android - 校验手机号码 - 检验车牌号 - 校验车架号 - 检验身份证号码 - 日期格式化 - 时间格式化 - 城市格式化 - 压缩图片 - 图片转成 base64 ## vue-router 配置 平时很多人对 vue-router 的配置可配置了 path 和 component，实现了路由跳转即可。其实 vue-router 可做的事情还有很多，比如 - 路由懒加载配置 - 改变单页面应用的 title - 登录权限校验 - 页面缓存配置 #### 路由懒加载配置 Vue 项目中实现路由按需加载（路由懒加载）的 3 中方式： ```js // 1、Vue异步组件技术： { path: '/home', name: 'Home', component: resolve => reqire(['../views/Home.vue'], resolve) } // 2、es6提案的import() { path: '/', name: 'home', component: () => import('../views/Home.vue') } // 3、webpack提供的require.ensure() { path: '/home', name: 'Home', component: r => require.ensure([],() => r(require('../views/Home.vue')), 'home') } ``` 本项目采用的是第二种方式，为了后续 webpack 打包优化。 #### 改变单页面应用的 title 由于单页面应用只有一个 html，所有页面的 title 默认是不会改变的，但是我们可以才路由配置中加入相关属性，再在路由守卫中通过 js 改变页面的 title ```js router.beforeEach((to, from, next) => { document.title = to.meta.title }) ``` #### 登录权限校验 在应用中，通常会有以下的场景，比如商城：有些页面是不需要登录即可访问的，如首页，商品详情页等，都是用户在任何情况都能看到的；但是也有是需要登录后才能访问的，如个人中心，购物车等。此时就需要对页面访问进行控制了。 此外，像一些需要记录用户信息和登录状态的项目，也是需要做登录权限校验的，以防别有用心的人通过直接访问页面的 url 打开页面。 此时。路由守卫可以帮助我们做登录校验。具体如下： 1、配置路由的 meta 对象的 auth 属性 ```js const routes = [ { path: '/', name: 'home', component: () => import('../views/Home.vue'), meta: { title: '首页', keepAlive: false, auth: false }, }, { path: '/mine', name: 'mine', component: () => import('../views/mine.vue'), meta: { title: '我的', keepAlive: false, auth: true }, }, ] ``` 2、在路由首页进行判断。当`to.meta.auth`为`true`(需要登录)，且不存在登录信息缓存时，需要重定向去登录页面 ```js router.beforeEach((to, from, next) => { document.title = to.meta.title const userInfo = sessionStorage.getItem('userInfo') || null if (!userInfo && to.meta.auth) { next('/login') } else { next()