详解搭建一个vue-cli的移动端H5开发模板


Posted in Javascript onJanuary 17, 2020

简介

vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板,其中已经搭建好基本的开发框架,可帮助您实现快速开发。 技术栈:vue + vux + axios + less

源码地址:https://github.com/Michael-lzg/vue-mobile

功能

  • 搭建项目目录
  • 配置 css 预处理器
  • 配置 UI 组件库 vux
  • 解决移动端适配
  • 配置页面路由缓存
  • axios 请求封装
  • 工具类函数封装
  • toast 组件封装
  • dialog 组件封装
  • 底部导航组件封装
  • 列表页 demo
  • 表单页 demo
  • 搭建项目目录

按如下文件目录搭建项目框架

src                主要源码目录
|-- assets            静态资源,统一管理
|-- components          公用组件,全局组件
|-- javascript          JS相关操作处理
  |-- ajax           axios封装的请求拦截
  |-- utils           全局封装的工具类
  |-- datas           模拟数据,临时存放
|-- router            路由,统一管理
|-- store             vuex, 统一管理
|-- views             视图目录

配置 css 预处理器

1.安装依赖

npm install less less-loader --sava-dev

2.在 build/webpack.base.conf.js 里参照如下代码进行配置

{
 test: /\.less$/,
 loader: "style-loader!css-loader!less-loader"
}

配置 vux

1.安装依赖

npm install vux vux-loader --save

2.在 build/webpack.base.conf.js 里参照如下代码进行配置

const vuxLoader = require('vux-loader') //把vux-loader引入
module.exports = vuxLoader.merge(webpackConfig, {
 //把新旧配置进行merge(放到页面最底部)
 plugins: ['vux-ui']
})

3.局部注册使用

<group>
 <cell title="title" value="value" />
</group>

import { Group, Cell } from 'vux' //引入所需组件
export default {
 name: 'App',
 components: {
  //注册组件
  Group,
  Cell
 }
}

移动端适配

1.安装依赖

npm install px2rem-loader --save-dev

2.在 build/utils 进行如下配置

const px2remLoader = {
 loader: 'px2rem-loader',
 options: {
  remUnit: 100
 }
}

function generateLoaders(loader, loaderOptions) {
 const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

 if (loader) {
  loaders.push({
   loader: loader + '-loader',
   options: Object.assign({}, loaderOptions, {
    sourceMap: options.sourceMap
   })
  })
 }

 // Extract CSS when that option is specified
 // (which is the case during production build)
 if (options.extract) {
  return ExtractTextPlugin.extract({
   use: loaders,
   fallback: 'vue-style-loader'
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }
}

3.在 main.js 设置 html 跟字体大小

let cale = window.screen.availWidth > 750 ? 2 : window.screen.availWidth / 375
window.document.documentElement.style.fontSize = `${100 * cale}px`

这是最简单的适配方法,后续跟单独对移动端 rem 适配做详细解读。

路由配置

1.通过配置路由对象的 meta[keepAlive]值来区分页面是否需要缓存

routes: [
 {
  path: '/',
  name: 'index',
  meta: { keepAlive: true }, //需要缓存
  component: resolve => {
   require(['../views/index'], resolve)
  }
 },
 {
  path: '/list',
  name: 'listr',
  meta: { keepAlive: false }, //不需要缓存
  component: resolve => {
   require(['../views/list'], resolve)
  }
 }
]

2.在 app.vue 做缓存判断

<div id="app">
 <router-view v-if="!$route.meta.keepAlive"></router-view>
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
</div>

axios 请求封装

1.设置请求拦截和响应拦截

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('UserLoginToken')
  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 请求方法

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 实例上。

// main.js
import { get, post } from './js/ajax'
Vue.prototype.$http = { get, post }
工具类函数封装
添加方法到 vue 实例的原型链上
export default {
 install (Vue, options) {
  Vue.prototype.util = {
   method1(val) {
    ...
   },
   method2 (val) {
    ...
   },
 }
}

2.在 main.js 通过 vue.use()注册

import utils from './js/utils'
Vue.use(utils)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
比较搞笑的js陷阱题
Feb 07 Javascript
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
浅谈开发eslint规则
Oct 01 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 #jQuery
JS实现transform实现扇子效果
Jan 17 #Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 #jQuery
浅谈VUE中演示v-for为什么要加key
Jan 16 #Javascript
Vue引入Stylus知识点总结
Jan 16 #Javascript
js实现提交前对列表数据的增删改查
Jan 16 #Javascript
react实现移动端下拉菜单的示例代码
Jan 16 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
vuejs简单验证码功能完整示例
2019/01/08 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
python求pi的方法
2014/10/08 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
python文件的md5加密方法
2016/04/06 Python
Linux下通过python访问MySQL、Oracle、SQL Server数据库的方法
2016/04/23 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
简单了解django orm中介模型
2019/07/30 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
2014全国两会学习心得体会2000字
2014/03/10 职场文书
2014年副班长工作总结
2014/12/10 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
2015年幼儿园个人工作总结
2015/04/25 职场文书
关于环保的宣传稿
2015/07/23 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL