vue+vant 移动端H5 商城项目_01
一、技术选型组件版本说明vue^2.6.11数据处理框架vue-router^3.5.3动态路由vant^2.12.37移动端UIaxios^0.24.0前后端交互amfe-flexible^2.2.1Rem 布局适配postcss-pxtorem^5.1.1Rem 布局适配less^4.1.2css编译less-loader^5.0.0css编译vue/cli~4.5.0项目脚手架vu...
文章目录
技术选型
组件 | 版本 | 说明 |
---|---|---|
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.5
rootValue: 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
or
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
说明:
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 !!
更多推荐
所有评论(0)