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

2023-08-02 23:56:04 137

简介

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公用组件，全局组件
|--javascriptJS相关操作处理
|--ajaxaxios封装的请求拦截
|--utils全局封装的工具类
|--datas模拟数据，临时存放
|--router路由，统一管理
|--storevuex,统一管理
|--views视图目录

配置css预处理器

1.安装依赖

npminstalllessless-loader--sava-dev

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

{
test:/\.less$/,
loader:"style-loader!css-loader!less-loader"
}

配置vux

1.安装依赖

npminstallvuxvux-loader--save

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

constvuxLoader=require('vux-loader')//把vux-loader引入
module.exports=vuxLoader.merge(webpackConfig,{
//把新旧配置进行merge（放到页面最底部）
plugins:['vux-ui']
})

3.局部注册使用





import{Group,Cell}from'vux'//引入所需组件
exportdefault{
name:'App',
components:{
//注册组件
Group,
Cell
}
}

移动端适配

1.安装依赖

npminstallpx2rem-loader--save-dev

2.在build/utils进行如下配置

constpx2remLoader={
loader:'px2rem-loader',
options:{
remUnit:100
}
}

functiongenerateLoaders(loader,loaderOptions){
constloaders=options.usePostCSS?[cssLoader,postcssLoader,px2remLoader]:[cssLoader,px2remLoader]

if(loader){
loaders.push({
loader:loader+'-loader',
options:Object.assign({},loaderOptions,{
sourceMap:options.sourceMap
})
})
}

//ExtractCSSwhenthatoptionisspecified
//(whichisthecaseduringproductionbuild)
if(options.extract){
returnExtractTextPlugin.extract({
use:loaders,
fallback:'vue-style-loader'
})
}else{
return['vue-style-loader'].concat(loaders)
}
}

3.在main.js设置html跟字体大小

letcale=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做缓存判断

axios请求封装

1.设置请求拦截和响应拦截

constPRODUCT_URL='https://xxxx.com'
constMOCK_URL='http://xxxx.com'
lethttp=axios.create({
baseURL:process.env.NODE_ENV==='production'?PRODUCT_URL:MOCK_URL
})
//请求拦截器
http.interceptors.request.use(
config=>{
//设置token，Content-Type
vartoken=sessionStorage.getItem('UserLoginToken')
config.headers['token']=token
config.headers['Content-Type']='application/json;charset=UTF-8'
//请求显示loading效果
if(config.loading===true){
vm.$loading.show()
}
returnconfig
},
error=>{
vm.$loading.hide()
returnPromise.reject(error)
}
)
//响应拦截器
http.interceptors.response.use(
res=>{
vm.$loading.hide()
//token失效，重新登录
if(res.data.code===401){
//重新登录
}
returnres
},
error=>{
vm.$loading.hide()
returnPromise.reject(error)
}
)

2.封装get和post请求方法

functionget(url,data,lodaing){
returnnewPromise((resolve,reject)=>{
http
.get(url)
.then(
response=>{
resolve(response)
},
err=>{
reject(err)
}
)
.catch(error=>{
reject(error)
})
})
}

functionpost(url,data,loading){
returnnewPromise((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实例的原型链上
exportdefault{
install(Vue,options){
Vue.prototype.util={
method1(val){
...
},
method2(val){
...
},
}
}

2.在main.js通过vue.use()注册

importutilsfrom'./js/utils'
Vue.use(utils)

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐