搭建vue-cli移动端H5开发模板
介绍vue-mobile是基于vue-cli的移动端H5开发模板，其中搭建了基础开发框架，助您实现快速开发。技术栈：vue+vux+axios+less源码地址：github.com/Michael-lzg...功能搭建项目目录配置css预处理器配置UI组件库vux方案移动端适配配置页面路由缓存axios请求封装工具类函数封装toast组件封装对话框组件封装底部导航组件封装列表页面demo表单页面demo构建项目目录按照文件目录构建项目框架src主源码目录|--assets静态资源，统一管理|--components公共组件，全局组件|--javascriptJS相关操作处理|--ajaxaxios封装的请求拦截|--utils全局封装工具类|--datas模拟数据，暂存|--router路由，统一管理|--storevuex，统一管理|--views查看目录配置css预处理器1.安装依赖npminstalllessless-loader--sava-dev2.参考build/webpack.base.conf.js中如下代码进行配置{test:/\.less$/,loader:"style-loader!css-loader!less-loader"}配置vux1。安装依赖npminstallvuxvux-loader--save2。build/webpack.base.conf.js中的配置参考如下代码constvuxLoader=require('vux-loader')//将vux-loader引入module.exports=vuxLoader.merge(webpackConfig,{//合并新旧配置（放在页面底部）plugins:['vux-ui']})3.使用部分注册<import{Group,Cell}from'vux'//引入所需组件exportdefault{name:'App',components:{//注册组件Group,Cell}}移动端适配1.安装依赖在npm安装px2rem-loader--save-dev2。在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})})}//在指定该选项时提取CSS//（在生产构建期间就是这种情况）if(options.extract){returnExtractTextPlugin.extract({use:loaders,fallback:'vue-style-loader'})}else{返回['vue-style-loader'].concat(loaders)}}3.在main.js中设置html和字体大小letcale=window.screen.availWidth>750?2：window.screen.availWidth/375window.document.documentElement。style.fontSize=`${100*cale}px`这个是最简单的适配方式，后面有mobilerem适配的详细解释路由配置1、通过配置路由对象的meta[keepAlive]值来区分页面是否需要缓存routes:[{path:'/',name:'index',meta:{keepAlive:true},//需要缓存组件：resolve=>{require(['../views/index'],resolve)}},{path:'/list',name:'listr',meta:{keepAlive:false},//不需要缓存组件:resolve=>{require(['../views/list'],resolve)}}]2.在app.vue中做缓存判断<保持活动>
axios请求封装1.设置请求拦截和响应拦截constPRODUCT_URL='https://xxxx.com'constMOCK_URL='http://xxxx.com'create({baseURL:process.env.NODE_ENV==='production'?PRODUCT_URL:MOCK_URL})//请求拦截器http.interceptors.request.use(config=>{//settoken,Content-Typevartoken=sessionStorage.getItem('UserLoginToken')配置。headers['token']=tokenconfig.headers['Content-Type']='application/json;charset=UTF-8'//请求显示加载效果if(config.loading===true){vm.$loading.show()}returnconfig},error=>{vm.$loading.hide()returnPromise.reject(error)})//响应拦截器http.interceptors.response.use(res=>{vm.$loading.hide()//令牌无效，重新登录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.jsimport{get,post}from'./js/ajax'Vue.prototype.$http={get,post}工具类函数封装add方法到vue实例的原型链exportdefault{install(Vue,options){Vue.prototype.util={method1(val){...},method2(val){...},}}2.通过vue.use()在main.jsutils中注册导入from'./js/utils'Vue.use(utils)
