vue+vant 移动端H5 商城项目_01
生活随笔
收集整理的這篇文章主要介紹了
vue+vant 移动端H5 商城项目_01
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 一、·Rem 布局適配
- 1. 安裝 amfe-flexible
- 2. px轉(zhuǎn)化rem
- 3. 全局配置
- 4. 重置樣式表
- 5. 引入重置樣式表
- 二、組件安裝和配置與封裝
- 2.1. 安裝less 預(yù)編譯語言
- 2.2. 安裝vant-ui
- 2.3. 端口自定義配置
- 三、axios 工具封裝
- 3.1. 下載安裝axios
- 3.2. axios導(dǎo)入
- 3.3. 創(chuàng)建axios 實(shí)例攔截器配置
- 3.4. 攔截器配置
- 3.5. 創(chuàng)建請求api
- 3.6. 跨域代理配置
技術(shù)選型
| vue | ^2.6.11 | 數(shù)據(jù)處理框架 |
| vue-router | ^3.5.3 | 動態(tài)路由 |
| 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 | 項(xiàng)目腳手架 |
vue-cli + vant+ less +axios 開發(fā)
一、·Rem 布局適配
1. 安裝 amfe-flexible
lib-flexible 用于設(shè)置 rem 基準(zhǔn)值
在main.js 主入口文件引入 amfe-flexible, 它會自動設(shè)置html的font-size為屏幕寬度除以10，也就是1rem等于html根節(jié)點(diǎn)的font-size。假如設(shè)計(jì)稿的寬度是750px，此時1rem應(yīng)該等于75px。假如量的某個元素的寬度是150px，那么在css里面定義這個元素的寬度就是 width: 2rem
進(jìn)入項(xiàng)目根目錄，執(zhí)行以下命令：
npm i -S amfe-flexible- 在public/index.html文件中的head中引入以下適配內(nèi)容
2. px轉(zhuǎn)化rem
安裝 第三方插件 postcss-pxtorem
會自動將css代碼中的px單位根據(jù)規(guī)則轉(zhuǎn)換成rem 單位
注意: 如果css樣式中 有不需要轉(zhuǎn)成rem 的單位，只需將單位寫成大寫PX 即可。
- 注意需要安裝5.11 版本，否則報(bào)錯
3. 全局配置
- 在項(xiàng)目根目錄創(chuàng)建vue.config.js文件，設(shè)置如下配置
注意：修改完項(xiàng)目根目錄下的配置文件后，一定要重啟項(xiàng)目，這樣配置文件才生效
module.exports = {lintOnSave: false, // eslint-loader 是否在保存的時候檢查css: {loaderOptions: {postcss: {plugins: [// 把px單位換算成rem單位require("postcss-pxtorem")({// 換算的基數(shù) 375的設(shè)計(jì)稿，換算基數(shù)就是37.5rootValue: 37.5,selectorBlackList: [".van"], // 要忽略的選擇器并保留為px。propList: ["*"], //可以從px更改為rem的屬性。minPixelValue: 1 // 設(shè)置要替換的最小像素值。})]}}} }4. 重置樣式表
在src/assets/下面新建css目錄，并在css目錄下面新增reset.css樣式文件
內(nèi)容容下：
5. 引入重置樣式表
在src目錄下的main.js 文件中, 引入重置樣式表,去掉標(biāo)簽的默認(rèn)樣式
- 引入重置樣式表
二、組件安裝和配置與封裝
2.1. 安裝less 預(yù)編譯語言
npm install less -S npm install less-loader@5.0.0 -S編譯成css, 在main.js 引入less并使用
import less from 'less' Vue.use(less)vue文件中使用案例：
- 代碼中使用
注意：此處安裝less-loader 版本需是5.x版本,否則報(bào)錯,默認(rèn)安裝的是最新版本,所以安裝需指定版本號
2.2. 安裝vant-ui
官網(wǎng)地址： https://vant-contrib.gitee.io/vant/#/zh-CN/
項(xiàng)目目錄下安裝vant：
npm i vant -Sor
yarn add vant說明：可以在package.json文件中看到上面效果即安裝成功。
- 在main.js 文件中引入vant 對應(yīng)的js和css 文件
也可以在對應(yīng)組件的script標(biāo)簽中按需導(dǎo)入（不推薦，手動引入很麻煩）
import Vue from "vue"; import { Button } from "vant"; import "vant/lib/button/style"; Vue.use(Button);- vant ui 測試
在src下App.vue頁面，新增如下內(nèi)容：
啟動項(xiàng)目,即可看到效果
npm run servehttp://localhost:8080/
說明：
1.如果可以正常顯示按鈕代表vant ui引入成功
2.為了方便臨時采用全局導(dǎo)入方案；但是，由于vant寶體積大，項(xiàng)目中期會采用插件刑事自動按需導(dǎo)入
2.3. 端口自定義配置
默認(rèn)即可
如果想要更改8080端口，可以在根目錄下新建 vue.config.js 中：
三、axios 工具封裝
3.1. 下載安裝axios
npm install axios3.2. axios導(dǎo)入
在src目錄下的創(chuàng)建utils目錄, 并在utils下創(chuàng)建request.js 文件.
// 導(dǎo)入axios import axios from 'axios';3.3. 創(chuàng)建axios 實(shí)例攔截器配置
在src/utils/request.js 文件中創(chuàng)建axios實(shí)例
// 使用自定義配置新建一個axios 實(shí)例，對axios 做一些基礎(chǔ)配置 const instance = axios.create({baseURL: 'http://kumanxuan1.f3322.net:8001/',timeout: 5000,headers: { 'X-Custom-Header': 'foobar' } });3.4. 攔截器配置
在src/utils/request.js 文件中新增請求攔截器和響應(yīng)攔截器
// 添加請求攔截器 instance.interceptors.request.use(function (config) {//請求之前執(zhí)行該函數(shù)， 一般在該處設(shè)置token let token = localStorage.getItem("token");if (token) {config.headers["token"] = token}// 在發(fā)送請求之前做些什么return config; }, function (error) {// 對請求錯誤做些什么return Promise.reject(error); });//響應(yīng)攔截器 instance.interceptors.response.use(response => {//1.非200響應(yīng)//2.token過期//3.異地登陸//4.非對象加密的解密return response.data }) export default instance3.5. 創(chuàng)建請求api
在src下創(chuàng)建https文件夾，并添加http.js，用于臨時存儲全部的接口的請求api，為了維護(hù)方便，后期會按照模塊劃分，創(chuàng)建與模塊對應(yīng)的xxx.js。
https/http.js
在src目錄下創(chuàng)建https 目錄, 目錄下創(chuàng)建http.js 文件,該文件主要用來管理所有的http請求的,如下:
// 所有的請求都放在該目錄 import instance from "../utils/request"; //首頁所有請求 //1. 獲取首頁數(shù)據(jù)列表 export function getIndexList() {return instance.get('/index/index') }//]專題頁 Topic //專題請求 export function getTopicList(params) {return instance({url: '/topic/list',method: 'get',params}) }//6. 分類頁 Category // 全部分類數(shù)據(jù)接口 export function GetChannelDataApi(params) {return instance({url: '/api/catalog/index',method: 'get',params}) } // 獲取當(dāng)前分類數(shù)據(jù) 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}) }// 搜索頁 // 根據(jù)關(guān)鍵字搜索接口 export function GetSearchData(params) {return instance.get('/goods/list', {params}) }// 詳情頁 //根據(jù)id查詢對應(yīng)數(shù)據(jù)接口 export function getDetailData(params) {return instance.get('/goods/detail', {params}) }//詳情頁相關(guān)產(chǎn)品 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.分類數(shù)據(jù)獲取 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}) }// ?獲取品牌詳情數(shù)據(jù)列表請求 export function GetBrandList(params) {return instance({url: '/brand/detail',method: 'get',params}) }// ?獲取分頁品牌詳情中的產(chǎn)品列表 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) }// ?獲取購物車產(chǎn)品數(shù)量 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}) }// 切換購物車商品選中狀態(tài)功能接口（含全選 export function ToggleCartCheckedData(params) {return instance({url: '/cart/checked',method: 'post',data: params}) }3.6. 跨域代理配置
根目錄下的 vue.config.js 進(jìn)行配置：
module.exports = {devServer: {port: 8080,proxy: {'/api': {target: "http://kumanxuan1.f3322.net:8001/",pathRewrite: {'^/api': ''}}}} }由于配置文件修改了，這里一定要記得重新 npm run serve ！！
總結(jié)
以上是生活随笔為你收集整理的vue+vant 移动端H5 商城项目_01的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue v-if,v-else-if,v
- 下一篇： vue vant Area组件使用详解