一、项目介绍以及项目地址
项目介绍：vue2搭建。项目通过amfe-flexible与postcss-pxtorem实现移动端适配；通过Vant ui作为项目的组件库；通过Vuex管理数据状态，进行模块化管理；通过Vue Router配置项目路由，进行模块化管理；封装axios进行数据的请求，以及一些页面逻辑的交互和简单的代码说明。
项目地址：h5-vant
联系博主：如有问题可联系博主=》QQ：1596892941 VX：weiyi1596892941
项目说明：如果项目需要直接拿去用，如果想研究一下就向下观看。如果有其他想法请留言或者联系我（期待大家提出的需求以及优化意见）。
二、通过amfe-flexible与postcss-pxtorem实现移动端适配
通过amfe-flexible与postcss-pxtorem实现移动端适配
1.介绍amfe-flexible
amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。
2.介绍postcss-pxtorem
postcss-pxtorem是postcss的插件，用于将像素（px）单元生成rem单位。
安装
yarn addamfe-flexible
yarn add postcss-pxtorem
引入（main.js中）
/* 引入移动端适配 */
import 'amfe-flexible';
新建postcss.config.js文件
module.exports = {publicPath: './',assetsDir: './',lintOnSave: false, //关闭eslint语法检测css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({rootValue: 37.5,propList: ['*']})]}}},}
三、引入vant组件库
采用的是全局引入的方式
安装依赖
yarn addvant@latest-v2 -S
导入全部组价
import Vue from 'vue';import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);
四、Vuex模块化状态管理
子模块代码
const state = {name: '勇敢小陈'}const getters = {}const actions = {}const mutations = {operation(state, value) {state.name += value}}const store_modular = {namespaced: true,//开启命名空间，命名空间是为了解决方法可能出现命名重复的问题state,getters,actions,mutations}export default store_modular
主模块引入子模块
import Vue from 'vue'import Vuex from 'vuex'import store_modular from '@/store/store_modular/index.js'Vue.use(Vuex)export default new Vuex.Store({state: {},getters: {},mutations: {},actions: {},modules: {store_modular}})
五、Vue Router模块化管理路由
子模块代码
const router_modular = [{path: '/',name: 'home',component: () => import('@/views/HomeView')},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is ponent: () => import(/* webpackChunkName: "about" */ '@/views/AboutView.vue')}]export default router_modular
主模块代码（配置全局路由守卫）
import Vue from 'vue'import VueRouter from 'vue-router'import router_modular from '@/router/router_modular/index.js'Vue.use(VueRouter)const routes = [...router_modular]const router = new VueRouter({routes})//全局路由守卫router.beforeEach((to,from,next)=>{console.log(to,from);next()})router.afterEach((to,from)=>{console.log(to,from);})export default router
六、axios请求的封装
新建request.js文件用于axios的简单封装
/**** request.js ****/// 导入axiosimport axios from 'axios'import config from '@/config/index';const baseUrl =process.env.NODE_ENV === 'development'? config.baseUrl.dev: config.baseUrl.pro;//1. 创建新的axios实例，const service = axios.create({// 公共接口--这里注意后面会讲baseURL:baseUrl,// 超时时间 单位是ms，这里设置了3s的超时时间timeout: 3 * 1000})// 2.请求拦截器service.interceptors.request.use(config => {//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换config.headers = {'Content-Type':'application/json' //配置请求头}//如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie//const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下// if(token){// config.params = {'token':token} //如果要求携带在参数中// config.headers.token= token; //如果要求携带在请求头中//}return config}, error => {Promise.reject(error)})// 3.响应拦截器service.interceptors.response.use(response => {//接收到响应数据并成功后的一些共有的处理，关闭loading等return response}, error => {/***** 接收到异常响应的处理开始 *****/return Promise.resolve(error.response)})//4.导入文件export default service
新建http.js进行请求方式的简单封装
/**** http.js ****/// 导入封装好的axios实例import request from './request'const http ={/*** methods: 请求* @param url 请求地址 * @param params 请求参数*/get(url,params){const config = {method: 'get',url:url}if(params) config.params = paramsreturn request(config)},post(url,params){const config = {method: 'post',url:url}if(params) config.data = paramsreturn request(config)},put(url,params){const config = {method: 'put',url:url}if(params) config.params = paramsreturn request(config)},delete(url,params){const config = {method: 'delete',url:url}if(params) config.params = paramsreturn request(config)}}//导出export default http
新建api文件进行请求路径的模块化处理
import http from '../utils/http'// /*** @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...* @param '/testIp'代表vue-cil中config，index.js中配置的代理*/// get请求const testApi = {getListAPI(params) {return http.get('/api/joke/list', params)},postFormAPI(params) {return http.post('/api/user/reg', params)}}export default testApi
七、简单的案例展示
包含：vuex、vant、axios以及页面的交互业务处理
<template><div class="content"><div>{{ name }}</div><div><van-button type="primary" @click="operation('点赞关注')">点我更改信息</van-button></div><div><van-field v-model="num" label="数量" /><van-buttontype="primary"@click="getList">发送请求获取笑话</van-button></div><div style="width: 100%"><van-list><van-cell v-for="item in list" :key="item" :title="item" /></van-list></div><van-button loading type="info" loading-text="加载中..." /></div></template><script>import { mapState, mapMutations } from "vuex";import testApi from "@/api/test";export default {computed: {...mapState("store_modular", ["name"]),},data() {return {num: 0,list: [],};},methods: {...mapMutations("store_modular", ["operation"]),getList() {if(this.num==0){this.$toast.fail("数量不能为0");return}this.$toast.loading({message: '加载中...',forbidClick: true,duration:0});testApi.getListAPI({ num: this.num }).then((res) => (this.list = res.data.data)).catch((err) => console.log(err)).finally(()=>{this.$toast.clear()});},},};</script><style></style>
Vue搭建移动端h5项目（已开源 附带git地址）Vant+Vue Router+Vuex+axios封装+案例交互+部分代码说明
