侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 3年前   290

简介

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.局部注册使用

 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 / 375window.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 做缓存判断

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;'  // 请求显示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.jsimport { 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)

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

您可能感兴趣的文章:

  • AntV F2和vue-cli构建移动端可视化视图过程详解
  • 如何基于vue-cli3.0构建功能完善的移动端架子
  • 详解Vue-cli webpack移动端自动化构建rem问题
  • 详解基于vue-cli配置移动端自适应
  • 基于vue-cli配置lib-flexible + rem实现移动端自适应


  • 上一条:
    ajax跳转到新的jsp页面的方法
    下一条:
    html中设置让div中的内容超出后自动显示滚动条
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在js中使用URL类用来解析处理URL的示例代码(0个评论)
    • js中动画事件:requestAnimationFrame、transitionend、animation...(0个评论)
    • 在js中mouseover和 mouseenter的区别浅析(0个评论)
    • uniapp调用手机实现打电话录音功能示例代码(0个评论)
    • 在uniapp开发微信小程序中图片大小显示不正常解决方法(0个评论)
    • 近期文章
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 在go语言中用filepath.Match()函数以通配符模式匹配字符串示例(0个评论)
    • Laravel Response Classes 响应类使用优化浅析(0个评论)
    • mysql中sql_mode的各模式浅析(0个评论)
    • 百度文心一言今天发布,个人第一批内测体验记录,不好别打我(0个评论)
    • 嘿加密世界让我们谈谈在共识中将中本聪主流化(0个评论)
    • 在go语言中寻找两个切片或数组中的相同元素/共同点/交集并集示例代码(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客