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 原文