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

本文介绍了如何基于vue-cli创建一个移动端H5开发模板,包括配置css预处理器less,集成UI组件库vux,解决移动端适配,设置路由缓存,封装axios请求和工具函数,以及组件封装如toast和dialog。
摘要由CSDN通过智能技术生成

简介

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',

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值