详解搭建一个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 相关文章推荐
js 获取服务器控件值的代码
Mar 05 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 Javascript
浅析JS运动
Dec 28 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
Vue实现todo应用的示例
Feb 20 Vue.js
JavaScript使用canvas绘制坐标和线
Apr 28 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图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
在Django的通用视图中处理Context的方法
2015/07/21 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
Python中一般处理中文的几种方法
2019/03/06 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
python设置环境变量的作用和实例
2019/07/09 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python实现扫雷游戏的示例
2020/10/20 Python
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
护士毕业实习感言
2014/03/05 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
辞职信范文大全
2015/03/02 职场文书
2019个人半年工作总结
2019/06/21 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
Java异常体系非正常停止和分类
2022/06/14 Java/Android