一、项目介绍以及项目地址? ? ? ??
????????项目介绍：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文件
module.exports = {
publicPath: './',
assetsDir: './',
lintOnSave: false,
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',
component: () => import( '@/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>
|