简介
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.局部注册使用
<group>
<cell title="title" value="value" />
</group>
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 "htmlcode">
let cale = window.screen.availWidth > 750 "color: #ff0000">路由配置
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 做缓存判断
<div id="app">
<router-view v-if="!$route.meta.keepAlive"></router-view>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</div>
axios 请求封装
1.设置请求拦截和响应拦截
const PRODUCT_URL = 'https://xxxx.com'
const MOCK_URL = 'http://xxxx.com'
let http = axios.create({
baseURL: process.env.NODE_ENV === 'production' "htmlcode">
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) {
...
},
}
}
2.在 main.js 通过 vue.use()注册
import utils from './js/utils'
Vue.use(utils)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
最新资源