vue+vant 移动端H5 商城项目_01
生活随笔
收集整理的這篇文章主要介紹了
vue+vant 移动端H5 商城项目_01
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 一、·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中引入以下適配內容
2. px轉化rem
安裝 第三方插件 postcss-pxtorem
會自動將css代碼中的px單位根據規則轉換成rem 單位
注意: 如果css樣式中 有不需要轉成rem 的單位，只需將單位寫成大寫PX 即可。
- 注意需要安裝5.11 版本，否則報錯
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樣式文件
內容容下：
5. 引入重置樣式表
在src目錄下的main.js 文件中, 引入重置樣式表,去掉標簽的默認樣式
- 引入重置樣式表
二、組件安裝和配置與封裝
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文件中使用案例：
- 代碼中使用
注意：此處安裝less-loader 版本需是5.x版本,否則報錯,默認安裝的是最新版本,所以安裝需指定版本號
2.2. 安裝vant-ui
官網地址： https://vant-contrib.gitee.io/vant/#/zh-CN/
項目目錄下安裝vant：
npm i vant -Sor
yarn add vant說明：可以在package.json文件中看到上面效果即安裝成功。
- 在main.js 文件中引入vant 對應的js和css 文件
也可以在對應組件的script標簽中按需導入（不推薦，手動引入很麻煩）
import Vue from "vue"; import { Button } from "vant"; import "vant/lib/button/style"; Vue.use(Button);- vant ui 測試
在src下App.vue頁面，新增如下內容：
啟動項目,即可看到效果
npm run servehttp://localhost:8080/
說明：
1.如果可以正常顯示按鈕代表vant ui引入成功
2.為了方便臨時采用全局導入方案；但是，由于vant寶體積大，項目中期會采用插件刑事自動按需導入
2.3. 端口自定義配置
默認即可
如果想要更改8080端口，可以在根目錄下新建 vue.config.js 中：
三、axios 工具封裝
3.1. 下載安裝axios
npm install axios3.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 instance3.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+vant 移动端H5 商城项目_01的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue v-if,v-else-if,v
- 下一篇： Linux7/Redhat7/Cento