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...

gblfy

4033人浏览 · 2021-12-18 11:31:31

gblfy · 2021-12-18 11:31:31 发布

在这里插入图片描述

文章目录

技术选型

组件	版本	说明
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

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 ！！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^