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

html5 移动端开发模板,搭建一个vue-cli的移动端H5开发模板简介vue-mobile是是基于vue-cli实现的移动端H5开发模板,其中已经搭建好基本的开发框架,可帮助您实现快速开发。技术栈:vue+vux+axios+less功能搭建项目目录配置css预处理器配置UI组件库vux解决移动端适配配置页面路由缓存axios请求封装工具类函数封装toast组件封装dialog组件封装底部导航组件封装列表页demo表单页…

大家好,又见面了,我是你们的朋友全栈君。

简介

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

技术栈:vue + vux + axios + less

功能

搭建项目目录

配置 css 预处理器

配置 UI 组件库 vux

解决移动端适配

配置页面路由缓存

axios 请求封装

工具类函数封装

toast 组件封装

dialog 组件封装

底部导航组件封装

列表页 demo

表单页 demo

搭建项目目录

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

src 主要源码目录

|– assets 静态资源,统一管理

|– components 公用组件,全局组件

|– javascript JS相关操作处理

|– ajax axios封装的请求拦截

|– utils 全局封装的工具类

|– datas 模拟数据,临时存放

|– router 路由,统一管理

|– store vuex, 统一管理

|– views 视图目录

复制代码

配置 css 预处理器

安装依赖

npm install less less-loader –sava-dev

复制代码在 build/webpack.base.conf.js 里进行以下配置

{

test: /\.less$/,

loader: “style-loader!css-loader!less-loader”

}

复制代码

配置 vux

安装依赖包

npm install vux vux-loader –save

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

const vuxLoader = require(‘vux-loader’) //把vux-loader引入

module.exports = vuxLoader.merge(webpackConfig, {

//把新旧配置进行merge(放到页面最底部)

plugins: [‘vux-ui’]

})

复制代码局部注册使用

;

import { Group, Cell } from ‘vux’ //引入所需组件

export default {

name: ‘App’,

components: {

//注册组件

Group,

Cell

}

}复制代码

移动端适配

安装依赖

npm install px2rem-loader –save-dev

复制代码在 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)

}

}

复制代码在 main.js 设置 html 跟字体大小

let cale = window.screen.availWidth > 750 ? 2 : window.screen.availWidth / 375

window.document.documentElement.style.fontSize = `${100 * cale}px`

复制代码

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

路由配置

通过配置路由对象的 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)

}

}

]

复制代码在 app.vue 做缓存判断

复制代码

axios 请求封装

设置请求拦截和响应拦截

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)

}

)

复制代码封装 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 }

复制代码把 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) {

},

}

}

复制代码在 main.js 通过 vue.use()注册

import utils from ‘./js/utils’

Vue.use(utils)

复制代码

组件封装

在开发项目过程中,通常会用到很多功能和设计相类似的组件,为了避免重复造轮子,我们经常会用到一些第三方组件,比如 vux,vant。但是这样会引入太多没用到的组件,造成打包体积过大。所以我们有必要封装一些基础的组件用于开发。

toast 和 dialog 组件封装

toast 和 dialog 组件基本是每一个移动端项目都会用到的,下面我将介绍如何封装这两个组件,并发布到 npm 供下载使用。

必备知识储备

vue 的基础知识

Vue.extend 构造器

$mount 手动挂载实例

vue 组件的传值传参

理解 Vue 构造函数及 prototype

webpack 打包

npm 基础知识

最终我们要达到这样的效果,从 npm 下载依赖包,直接调用

this.$toast({ msg: ‘手机号码不能为空’ })

this.$toast({

msg: ‘成功提示’,

type: ‘success’

})

this.$dialog({

title: ‘删除提示’,

text: ‘是否确定删除此标签?’,

showCancelBtn: true,

confirmText: ‘确认’,

confirm(content) {

alert(‘删除成功’)

}

})

复制代码

效果图如下。具体封装过程可参考文章:

6844904005265522696

c328e91ad5898ca84d109beed21bf3b6.png

相关文章

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/151970.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号