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

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

            项目介绍：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 add amfe-flexible 

    yarn add postcss-pxtorem

    引入（main.js中）

    /* 引入移动端适配 */

    import 'amfe-flexible';

    新建postcss.config.js文件

    1. module.exports = {
    2.     publicPath: './',
    3.     assetsDir: './',
    4.     lintOnSave: false, //关闭eslint语法检测
    5.     css: {
    6.         loaderOptions: {
    7.             postcss: {
    8.                 plugins: [
    9.                     require('postcss-pxtorem')({
    10.                         rootValue: 37.5,
    11.                         propList: ['*']
    12.  
    13.                     })
    14.                 ]
    15.             }
    16.         }
    17.     },
    18. }

    三、引入vant组件库

    采用的是全局引入的方式

    安装依赖

    yarn add vant@latest-v2 -S

    导入全部组价

    1. import Vue from 'vue';
    2. import Vant from 'vant';
    3. import 'vant/lib/index.css';
    4.  
    5. Vue.use(Vant);

    四、Vuex模块化状态管理

    子模块代码

    1. const state = {
    2.     name: '勇敢小陈'
    3. }
    4. const getters = {
    5.  
    6. }
    7. const actions = {
    8.  
    9. }
    10. const mutations = {
    11.     operation(state, value) {
    12.         state.name += value
    13.     }
    14. }
    15.  
    16. const store_modular = {
    17.     namespaced: true,//开启命名空间，命名空间是为了解决方法可能出现命名重复的问题
    18.     state,
    19.     getters,
    20.     actions,
    21.     mutations
    22. }
    23. export default store_modular

    主模块引入子模块

    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    3. import store_modular from '@/store/store_modular/index.js'
    4. Vue.use(Vuex)
    5.  
    6. export default new Vuex.Store({
    7.   state: {
    8.   },
    9.   getters: {
    10.   },
    11.   mutations: {
    12.   },
    13.   actions: {
    14.   },
    15.   modules: {
    16.     store_modular
    17.   }
    18. })

    五、Vue Router模块化管理路由

    子模块代码

    1.  
    2. const router_modular = [
    3.     {
    4.         path: '/',
    5.         name: 'home',
    6.         component: () => import('@/views/HomeView')
    7.     },
    8.     {
    9.         path: '/about',
    10.         name: 'about',
    11.         // route level code-splitting
    12.         // this generates a separate chunk (about.[hash].js) for this route
    13.         // which is lazy-loaded when the route is visited.
    14.         component: () => import(/* webpackChunkName: "about" */ '@/views/AboutView.vue')
    15.     }
    16. ]
    17. export default router_modular

    主模块代码（配置全局路由守卫）

    1. import Vue from 'vue'
    2. import VueRouter from 'vue-router'
    3. import router_modular from '@/router/router_modular/index.js'
    4. Vue.use(VueRouter)
    5.  
    6. const routes = [
    7.   ...router_modular
    8. ]
    9.  
    10. const router = new VueRouter({
    11.   routes
    12. })
    13. //全局路由守卫
    14. router.beforeEach((to,from,next)=>{
    15.   console.log(to,from);
    16.   next()
    17. })
    18. router.afterEach((to,from)=>{
    19.   console.log(to,from);
    20. })
    21. export default router

    六、axios请求的封装

    新建request.js文件用于axios的简单封装

    1. /****   request.js   ****/
    2. // 导入axios
    3. import axios from 'axios'
    4. import config from '@/config/index';
    5. const baseUrl =
    6.   process.env.NODE_ENV === 'development'
    7.     ? config.baseUrl.dev
    8.     : config.baseUrl.pro;
    9. //1. 创建新的axios实例，
    10. const service = axios.create({
    11.   // 公共接口--这里注意后面会讲
    12.   baseURL:baseUrl,
    13.   // 超时时间 单位是ms，这里设置了3s的超时时间
    14.   timeout: 3 * 1000
    15. })
    16. // 2.请求拦截器
    17. service.interceptors.request.use(config => {
    18.   //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
    19.    config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
    20.    config.headers = {
    21.      'Content-Type':'application/json' //配置请求头
    22.    }
    23.    //如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
    24.    //const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
    25. //    if(token){
    26. //       config.params = {'token':token} //如果要求携带在参数中
    27. //       config.headers.token= token; //如果要求携带在请求头中
    28. //     }
    29.   return config
    30. }, error => {
    31.   Promise.reject(error)
    32. })
    33.  
    34. // 3.响应拦截器
    35. service.interceptors.response.use(response => {
    36.   //接收到响应数据并成功后的一些共有的处理，关闭loading等
    37.   
    38.   return response
    39. }, error => {
    40.    /***** 接收到异常响应的处理开始 *****/
    41.  
    42.   return Promise.resolve(error.response)
    43. })
    44. //4.导入文件
    45. export default service

    新建http.js进行请求方式的简单封装

    1. /****   http.js   ****/
    2. // 导入封装好的axios实例
    3. import request from './request'
    4.  
    5. const http ={
    6.     /**
    7.      * methods: 请求
    8.      * @param url 请求地址 
    9.      * @param params 请求参数
    10.      */
    11.     get(url,params){
    12.         const config = {
    13.             method: 'get',
    14.             url:url
    15.         }
    16.         if(params) config.params = params
    17.         return request(config)
    18.     },
    19.     post(url,params){
    20.         const config = {
    21.             method: 'post',
    22.             url:url
    23.         }
    24.         if(params) config.data = params
    25.         return request(config)
    26.     },
    27.     put(url,params){
    28.         const config = {
    29.             method: 'put',
    30.             url:url
    31.         }
    32.         if(params) config.params = params
    33.         return request(config)
    34.     },
    35.     delete(url,params){
    36.         const config = {
    37.             method: 'delete',
    38.             url:url
    39.         }
    40.         if(params) config.params = params
    41.         return request(config)
    42.     }
    43. }
    44. //导出
    45. export default http

    新建api文件进行请求路径的模块化处理

    1. import http from '../utils/http'
    2. // 
    3. /**
    4.  *  @parms resquest 请求地址 例如：http://197.82.15.15:8088/request/...
    5.  *  @param '/testIp'代表vue-cil中config，index.js中配置的代理
    6.  */
    7.  
    8. // get请求
    9. const testApi = {
    10. 	getListAPI(params) {
    11. 		return http.get('/api/joke/list', params)
    12. 	},
    13. 	postFormAPI(params) {
    14. 		return http.post('/api/user/reg', params)
    15. 	}
    16. }
    17. export default testApi

    七、简单的案例展示

    包含：vuex、vant、axios以及页面的交互业务处理

    1. <template>
    2.   <div class="content">
    3.     <div>{{ name }}</div>
    4.     <div>
    5.       <van-button type="primary" @click="operation('点赞关注')"
    6.         >点我更改信息</van-button
    7.       >
    8.     </div>
    9.     <div>
    10.       <van-field v-model="num" label="数量" /><van-button
    11.         type="primary"
    12.         @click="getList"
    13.         >发送请求获取笑话</van-button
    14.       >
    15.     </div>
    16.     <div style="width: 100%">
    17.       <van-list>
    18.         <van-cell v-for="item in list" :key="item" :title="item" />
    19.       </van-list>
    20.     </div>
    21.     <van-button loading type="info" loading-text="加载中..." />
    22.   </div>
    23. </template>
    24.  
    25. <script>
    26. import { mapState, mapMutations } from "vuex";
    27. import testApi from "@/api/test";
    28. export default {
    29.   computed: {
    30.     ...mapState("store_modular", ["name"]),
    31.   },
    32.   data() {
    33.     return {
    34.       num: 0,
    35.       list: [],
    36.     };
    37.   },
    38.   methods: {
    39.     ...mapMutations("store_modular", ["operation"]),
    40.     getList() {
    41.       if(this.num==0){
    42.         this.$toast.fail("数量不能为0");
    43.         return
    44.       }
    45.       this.$toast.loading({
    46.   message: '加载中...',
    47.   forbidClick: true,
    48.   duration:0
    49. });
    50.       testApi
    51.         .getListAPI({ num: this.num })
    52.         .then((res) => (this.list = res.data.data))
    53.         .catch((err) => console.log(err))
    54.         .finally(()=>{this.$toast.clear()});
    55.     },
    56.   },
    57. };
    58. </script>
    59.  
    60. <style>
    61. </style>

  • 相关阅读:
    Harmony SDK API 版本 与 Harmony OS 版本对照表，及如何查看鸿蒙手机Harmony SDK Api 版本
    【自动化测试框架】关于unitttest你需要知道的事
    Elasticsearch的介绍与安装
    前端埋点-分析用户在线时间
    Python leetcode468：验证ip地址，解法
    【Linux】进程数据结构
    eclipse导入jdbc教程（简洁）
    深度学习框架大战：究竟选择TensorFlow还是PyTorch？
    Mooctest
    Hadoop的HDFS的集群安装部署
  • 原文地址：https://blog.csdn.net/ct5211314/article/details/125497899