vue+vant 移动端H5 商城项目

在这里插入图片描述

文章目录

- - - - 一、·Rem 布局适配
      - 1. 安装 amfe-flexible
        2. px转化rem
        3. 全局配置
        4. 重置样式表
        5. 引入重置样式表
      - 二、组件安装和配置与封装
      - 2.1. 安装less 预编译语言
        2.2. 安装vant-ui
        2.3. 端口自定义配置
      - 三、axios 工具封装
      - 3.1. 下载安装axios
        3.2. axios导入
        3.3. 创建axios 实例拦截器配置
        3.4. 拦截器配置
        3.5. 创建请求api
        3.6. 跨域代理配置

技术选型

组件	版本	说明
vue	^2.6.11	数据处理框架
vue-router	^3.5.3	动态路由
vant	^2.12.37	移动端UI
axios	^0.24.0	前后端交互
amfe-flexible	^2.2.1	Rem 布局适配
postcss-pxtorem	^5.1.1	Rem 布局适配
less	^4.1.2	css编译
less-loader	^5.0.0	css编译
vue/cli	~4.5.0	项目脚手架

vue-cli + vant+ less +axios 开发

一、·Rem 布局适配

1. 安装 amfe-flexible

lib-flexible 用于设置 rem 基准值

在main.js 主入口文件引入 amfe-flexible, 它会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

进入项目根目录，执行以下命令：

npm i -S amfe-flexible

在public/index.html文件中的head中引入以下适配内容

 <head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"></head>

2. px转化rem

安装第三方插件 postcss-pxtorem
会自动将css代码中的px单位根据规则转换成rem 单位

注意: 如果css样式中有不需要转成rem 的单位，只需将单位写成大写PX 即可。

注意需要安装5.11 版本，否则报错

npm i postcss-pxtorem@5.1.1

3. 全局配置

在项目根目录创建vue.config.js文件，设置如下配置

注意：修改完项目根目录下的配置文件后，一定要重启项目，这样配置文件才生效

module.exports = {lintOnSave: false, // eslint-loader 是否在保存的时候检查css: {loaderOptions: {postcss: {plugins: [// 把px单位换算成rem单位require("postcss-pxtorem")({// 换算的基数 375的设计稿，换算基数就是37.5rootValue: 37.5,selectorBlackList: [".van"], // 要忽略的选择器并保留为px。propList: ["*"], //可以从px更改为rem的属性。minPixelValue: 1 // 设置要替换的最小像素值。})]}}}
}

4. 重置样式表

在src/assets/下面新建css目录，并在css目录下面新增reset.css样式文件
内容容下：

@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

5. 引入重置样式表

在src目录下的main.js 文件中, 引入重置样式表,去掉标签的默认样式

引入重置样式表

import '@/assets/css/reset.css'

二、组件安装和配置与封装

2.1. 安装less 预编译语言

npm install less -S
npm install less-loader@5.0.0  -S

编译成css, 在main.js 引入less并使用

import less from 'less'
Vue.use(less)

vue文件中使用案例：

代码中使用

<style lang='less' scoped></style>

注意：此处安装less-loader 版本需是5.x版本,否则报错,默认安装的是最新版本,所以安装需指定版本号

2.2. 安装vant-ui

官网地址： https://vant-contrib.gitee.io/vant/#/zh-CN/

项目目录下安装vant：

npm i vant -S

yarn add vant

说明：可以在package.json文件中看到上面效果即安装成功。

在main.js 文件中引入vant 对应的js和css 文件

//导入所有组件。
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

也可以在对应组件的script标签中按需导入（不推荐，手动引入很麻烦）

import Vue from "vue";
import { Button } from "vant";
import "vant/lib/button/style";
Vue.use(Button);

vant ui 测试
在src下App.vue页面，新增如下内容：

<div class="home"><p>Home组件测试vant组件</p><van-button type="primary">主要按钮</van-button>
</div>

启动项目,即可看到效果

npm run serve

http://localhost:8080/

说明：
1.如果可以正常显示按钮代表vant ui引入成功
2.为了方便临时采用全局导入方案；但是，由于vant宝体积大，项目中期会采用插件刑事自动按需导入

2.3. 端口自定义配置

默认即可
如果想要更改8080端口，可以在根目录下新建 vue.config.js 中：

module.exports = {devServer: {port: 5000}
}

三、axios 工具封装

3.1. 下载安装axios

npm install axios

3.2. axios导入

在src目录下的创建utils目录, 并在utils下创建request.js 文件.

// 导入axios
import axios from 'axios';

3.3. 创建axios 实例拦截器配置

在src/utils/request.js 文件中创建axios实例

// 使用自定义配置新建一个axios 实例，对axios 做一些基础配置
const instance = axios.create({baseURL: 'http://kumanxuan1.f3322.net:8001/',timeout: 5000,headers: { 'X-Custom-Header': 'foobar' }
});

3.4. 拦截器配置

在src/utils/request.js 文件中新增请求拦截器和响应拦截器

// 添加请求拦截器
instance.interceptors.request.use(function (config) {//请求之前执行该函数， 一般在该处设置token let token = localStorage.getItem("token");if (token) {config.headers["token"] = token}// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});//响应拦截器
instance.interceptors.response.use(response => {//1.非200响应//2.token过期//3.异地登陆//4.非对象加密的解密return response.data
})
export default instance

3.5. 创建请求api

在src下创建https文件夹，并添加http.js，用于临时存储全部的接口的请求api，为了维护方便，后期会按照模块划分，创建与模块对应的xxx.js。

https/http.js

在src目录下创建https 目录, 目录下创建http.js 文件,该文件主要用来管理所有的http请求的,如下:

// 所有的请求都放在该目录
import instance from "../utils/request";
//首页所有请求
//1. 获取首页数据列表
export function getIndexList() {return instance.get('/index/index')
}//]专题页 Topic
//专题请求 
export function getTopicList(params) {return instance({url: '/topic/list',method: 'get',params})
}//6. 分类页 Category
// 全部分类数据接口
export function GetChannelDataApi(params) {return instance({url: '/api/catalog/index',method: 'get',params})
}
// 获取当前分类数据
export function GetFenleiDataApi(params) {return instance({url: '/catalog/current',method: 'get',params})
}//我的页面 User
//登陆
export function GoLogin(params) {return instance({url: '/auth/loginByWeb',method: 'post',data: params})
}// 搜索页
// 根据关键字搜索接口
export function GetSearchData(params) {return instance.get('/goods/list', {params})
}// 详情页
//根据id查询对应数据接口
export function getDetailData(params) {return instance.get('/goods/detail', {params})
}//详情页相关产品
export function GetGoodsRelatedData(params) {return instance({url: '/goods/related',method: 'get',params})
}// 2.搜索页 SearchPopup
// 历史记录列表和热门搜索列表
export function GetPopupData(params) {return instance({url: '/search/index',method: 'get',params})
}//删除历史记录
export function Clearhistory(params) {return instance({url: '/search/clearhistory',method: 'post',data: params})
}//搜索提示列表
export function GetSearchTipsListData(params) {return instance({url: '/search/helper',method: 'get',params})
}//4.分类数据获取 Channel
export function GetCateGoryData(params) {return instance({url: '/goods/category',method: 'get',params})
}
// 分类页面商品列表请求
export function GetCateGoryList(params) {return instance({url: '/goods/list',method: 'get',params})
}// 获取品牌详情数据列表请求
export function GetBrandList(params) {return instance({url: '/brand/detail',method: 'get',params})
}// 获取分页品牌详情中的产品列表
export function GetBrandListData(params) {return instance({url: '/goods/list',method: 'get',params})
}//购物车页 Cart
// 购物车列表
export function GetCartData(params) {return instance({url: '/cart/index',method: 'get',params})
}
// 加入购物车
export function AddToCart(params) {return instance.post('/cart/add', params)
}// 获取购物车产品数量
export function GetCartCountData(params) {return instance({url: '/cart/goodscount',method: 'get',params})
}// 加入购物车
export function UpdateCartData(params) {return instance({url: '/cart/update',method: 'post',data: params})
}// 删除购物车商品
export function DeleteCartData(params) {return instance({url: '/cart/delete',method: 'get',params})
}// 删除购物车商品
export function DeleteCartData2(params) {return instance({url: '/cart/delete',method: 'post',data: params})
}// 切换购物车商品选中状态功能接口（含全选
export function ToggleCartCheckedData(params) {return instance({url: '/cart/checked',method: 'post',data: params})
}

3.6. 跨域代理配置

根目录下的 vue.config.js 进行配置：

module.exports = {devServer: {port: 8080,proxy: {'/api': {target: "http://kumanxuan1.f3322.net:8001/",pathRewrite: {'^/api': ''}}}}
}

由于配置文件修改了，这里一定要记得重新 npm run serve ！！