详解搭建一个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 获得选中文本内容的方法
Feb 15 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
js实现表格单列按字母排序
Aug 12 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
重置版宣传动画
2020/04/09 魔兽争霸
获得Google PR值的PHP代码
2007/01/28 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
js仿微博动态栏功能
2017/02/22 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python实现配置文件备份的方法
2015/07/30 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
益模软件Java笔试题
2012/03/27 面试题
药学专业大专生的自我评价
2013/12/12 职场文书
医院实习介绍信
2014/01/12 职场文书
校本教研工作制度
2014/01/22 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
2014年教师工作总结
2014/11/10 职场文书
法定代表人证明书
2014/11/28 职场文书
通知格式
2015/04/27 职场文书
《三国志》赏析
2019/08/27 职场文书
Python中的变量与常量
2021/11/11 Python
Nginx利用Logrotate实现日志分割
2022/05/20 Servers