Vue搭建移动端h5项目（已开源，附带git地址）Vant+Vue Router+Vuex+axios封装+案例交互+部分代码说明

一、项目介绍以及项目地址        

        项目介绍：vue2搭建。项目通过amfe-flexible与postcss-pxtorem实现移动端适配；通过Vant ui作为项目的组件库；通过Vuex管理数据状态，进行模块化管理；通过Vue Router配置项目路由，进行模块化管理；封装axios进行数据的请求，以及一些页面逻辑的交互和简单的代码说明。

    项目地址：h5-vant

二、通过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 add amfe-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 add vant@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 visited.
        component: () => 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   ****/
// 导入axios
import 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 = params
        return request(config)
    },
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config = {
            method: 'put',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    delete(url,params){
        const config = {
            method: 'delete',
            url:url
        }
        if(params) config.params = params
        return 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-button
        type="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>

转自csdn 原文