详解搭建一个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 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
JS访问对象两种方式区别解析
Aug 29 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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版(3)
2006/10/09 PHP
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
微信小程序实现红包雨功能
2018/07/11 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
vue-devtools的安装和使用步骤详解
2019/10/17 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
python清除字符串里非数字字符的方法
2015/07/02 Python
Python使用gensim计算文档相似性
2016/04/10 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
婚礼上证婚人致辞
2015/07/28 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
Python 匹配文本并在其上一行追加文本
2022/05/11 Python