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