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

简介

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 ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]								 
 1/3    1 2 3 下一页 尾页