简介
简介
简介
vue-mobile 是是基于 vue-cli 实现的移动端 H5 开发模板，其中已经搭建好基本的开发框架，可帮助您实现快速开发。 技术栈：vue + vux + axios + less源码地址：https://github.com/Michael-lzg/vue-mobilehttps://github.com/Michael-lzg/vue-mobile功能功能功能

搭建项目目录

配置 css 预处理器

配置 UI 组件库 vux

解决移动端适配

配置页面路由缓存

axios 请求封装

工具类函数封装

toast 组件封装

dialog 组件封装

底部导航组件封装

列表页 demo

表单页 demo

搭建项目目录
搭建项目目录配置 css 预处理器配置 UI 组件库 vux解决移动端适配配置页面路由缓存axios 请求封装工具类函数封装toast 组件封装dialog 组件封装底部导航组件封装列表页 demo表单页 demo搭建项目目录按如下文件目录搭建项目框架
src
主要源码目录
|-- assets
静态资源，统一管理
|-- components
公用组件，全局组件
|-- javascript
JS相关操作处理

|-- ajax
axios封装的请求拦截

|-- utils
全局封装的工具类

|-- datas
模拟数据，临时存放
|-- router
路由，统一管理
|-- store
vuex, 统一管理
|-- views
视图目录

src
主要源码目录
|-- assets
静态资源，统一管理
|-- components
公用组件，全局组件
|-- javascript
JS相关操作处理

|-- ajax
axios封装的请求拦截

|-- utils
全局封装的工具类

|-- datas
模拟数据，临时存放
|-- router
路由，统一管理
|-- store
vuex, 统一管理
|-- views
视图目录
配置 css 预处理器
配置 css 预处理器
配置 css 预处理器
1.安装依赖
npm install less less-loader --sava-dev

npm install less less-loader --sava-dev
2.在 build/webpack.base.conf.js 里参照如下代码进行配置
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
配置 vux
配置 vux配置 vux1.安装依赖
npm install vux vux-loader --save

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']
})

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
}
}






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

//注册组件

Group,

Cell
}
}

移动端适配
移动端适配移动端适配1.安装依赖
npm install px2rem-loader --save-dev

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)
}
}


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`

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)

}
}
]

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 请求封装
axios 请求封装axios 请求封装1.设置请求拦截和响应拦截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)
}
)

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 }


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) {

...

},
}
}

// 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()注册2.在 main.js 通过 vue.use()注册
import utils from './js/utils'
Vue.use(utils)

import utils from './js/utils'
Vue.use(utils)
以上就是本文的全部内容，希望对大家的学习有所帮助。