html5 移动端开发模板,搭建一个vue-cli的移动端H5开发模板
简介
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('删除成功')
}
})
复制代码
效果图如下。具体封装过程可参考文章:
相关文章
html5 移动端开发模板,搭建一个vue-cli的移动端H5开发模板相关推荐
- 搭建一个VUE+Express前后端分离的开发环境
前置条件 请确保安装了node.window+R打开cmd,输入 node -v 查看node版本. 建议使用淘宝镜像代替npm,确保安装速度,接下来都会使用cnpm 一.搭建后台Express环境 ...
- MacOS 搭建一个vue项目(完整步骤)
搭建一个Vue项目 一.安装node环境 二.搭建vue项目环境 1.全局安装vue-cli 2.检查是否安装成功 3.创建一个基于 webpack 模板的新项目 4.安装依赖 5.启动项目 三.vu ...
- 从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一)
从零开始搭建一个vue项目 -- vue-cli/cooking-cli(一) 1.vue-cli搭建一个可靠成熟的项目 1.介绍 vue-cli 我是去年六月份接触的vue1.0,当时还是个菜逼,当 ...
- 如何搭建一个Vue项目和配置环境
如何搭建一个Vue项目和配置环境 一.Vue简介 Vue(读音/vju/, 类似于view) 是一套用于构建用户界面的渐进式框架, 发布于2014年2月.与其它大型框架不同的是, Vue被设计为可以自 ...
- 手把手教你从0开始搭建一个vue项目(完结)
前言 上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
- npm -- 如何在本地安装npm npm 相关命令 本地使用命令行搭建一个 vue 工程
npm 安装 1.下载 nodejs 在安装完 nodejs 之后,执行 npm -v ,就已经可以执行出结果了 注1:npm 和 cnpm 的区别 npm 是 nodejs 的包管理器,用于 nod ...
- 【前端】搭建一个VUE框架
大伙好,最近狠狠焦虑了,因为想搞前端技术岗找暑假实习担心自己能力不够,还是希望如果有同学大学期间就决定毕业找工作的话,一定要抓住机会大学期间狠狠锻炼本领噢,不要虚度光阴 说了点题外话,回到正题,焦虑的 ...
- Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda、vConsole)
Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vConsole) 目录 Vue 之 Vue Cli Html 移动端调试调试工具简单使用说明(Eruda.vCons ...
- vue入门级教程从零搭建一个vue项目
一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的镜像:ht ...
- 多个vue项目合并成一个_零基础搭建一个Vue项目,你学会了吗?
这几天利用业余时间做了一个个人项目,后端部分已经搭建好了还差一个前端,经过考虑前端利用Vue来搭建开发,因对Vue不是很熟悉,所以利用网络查找了相关的资料,成功的跑出了第一个Vue页面,写在此作为一个 ...
最新文章
- 【原创】rabbitmq-env.conf用户手册(翻译)
- The next Industry Standard in IT Monitoring, a python implementation Nagios like tool --- Shinken
- 雷军:小米将扩招5000名工程师!多个领域需要用到C++
- 从提香到戈雅:西班牙普拉多博物馆藏画展
- linux怎么安装git服务器,linux下安装git服务端
- html form callback,Promise异步编程模式总结初始化Promise对象统一错误处理PromisifyfromCallbackMongoose Promisify...
- 服务器2003光盘修复,windows光盘修复系统
- P7 黑客是如何发现女朋友出轨的,痛心的经历!
- 【推荐】工业互联网资料合集
- 图形界面操作pandas:计算变异系数(极差 四分位差 方差 标准差 协方差 变异系数)
- 【历史上的今天】1 月 18 日:微软的“技术布道者”;反盗版法案抗议行动;哈佛 Mark I 灵感起源
- linux 内核2.6.35.3,linux-2.6.35.3内核移植(s3c2440)
- Android源码-高质量开发库
- uvc control
- 自动驾驶职位选择和常见术语
- 汉字转化成拼音 汉字转化成拼音
- 无线运维的起源与项目建设思考
- 电路分析实验 01 - | 受控电流源电路的仿真测试
- 6大核心议题首度揭晓,2021下半年最强热点来了! | 2021世界区块链大会·杭州...
- TCGA数据下载方法简介
热门文章
- 网站博客搬家工具大全
- foobar 2000|foobar2000中文版32/64位下载 v1.3.16
- 《网管员世界》记者走基层采访实录
- Silverlight下载-Silverlight 1.1 Tools下载
- 易语言-万挂作坊4.X下载,有图有真相
- maven jersey mysql_Maven和Jersey Framework开发REST风格Web Service
- Samba使用大全(绝对经典)
- dnf韩服服务器维护中,DNF韩服官方居然自己在服务器上开了个“私服”深渊必掉史诗...
- JavaScript启示录
- Java 垃圾回收机制(GC)简述