文章目錄

• • • • • 一、前置準(zhǔn)備
        • • 1. 技術(shù)選型
          • 2. 創(chuàng)建vue項(xiàng)目
        • 二、Rem 布局適配
        • • 2.1. px轉(zhuǎn)rem
          • 2.2. 設(shè)置 rem 基準(zhǔn)值
          • 2.3. 配置vue.config.js
          • 2.4. 重置樣式表
          • 2.5. 配置樣式表
          • 2.6. 安裝less
          • 2.7. 注冊(cè)less
          • 2.8. 代碼中使用
        • 三、vant安裝/配置/測(cè)試
        • • 3.1. 安裝vant-ui
          • 3.2. 引入與注冊(cè)
          • 3.3. vant測(cè)試
        • 四、axios 工具封裝
        • • 4.1. 下載安裝axios
          • 4.2. 創(chuàng)建axios實(shí)例
          • 4.3. 配置攔截器
          • 4.4. api管理
          • 4.5. 跨域代理配置
        • 五、動(dòng)態(tài)路由
        • • 5.1. 下載vue-router
          • 5.2. 組件注冊(cè)
          • 5.3. 主頁路由
          • 5.4. 實(shí)例掛載
          • 5.5. 創(chuàng)建home頁面
          • 5.6. 引入 AppTabBar
        • 六、優(yōu)化
        • • 6.1. 路由守衛(wèi)
          • 6.2. 異常修復(fù)
          • 6.3. 路由懶加載

一、前置準(zhǔn)備

1. 技術(shù)選型

技術(shù)選型

組件版本說明

vue	^2.6.11	數(shù)據(jù)處理框架
vue-router	^3.5.3	動(dòng)態(tài)路由
vant	^2.12.37	移動(dòng)端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ā)

2. 創(chuàng)建vue項(xiàng)目

使用vue-cli腳手架 ，采用vue2.x默認(rèn)安裝即可

vue ui

二、Rem 布局適配

2.1. px轉(zhuǎn)rem

安裝 amfe-flexible

在main.js 主入口文件引入 amfe-flexible, 它會(huì)自動(dòng)設(shè)置html的font-size為屏幕寬度除以10，也就是1rem等于html根節(jié)點(diǎn)的font-size。假如設(shè)計(jì)稿的寬度是750px，此時(shí)1rem應(yīng)該等于75px。假如量的某個(gè)元素的寬度是150px，那么在css里面定義這個(gè)元素的寬度就是 width: 2rem

npm i amfe-flexible -S

在public/index.html中替換標(biāo)簽

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

在main.js 引入amfe-flexible

import 'amfe-flexible';

2.2. 設(shè)置 rem 基準(zhǔn)值

安裝 第三方插件 postcss-pxtorem
注意需要安裝5.11 版本，否則報(bào)錯(cuò)

npm i postcss-pxtorem@5.1.1 -S

會(huì)自動(dòng)將css代碼中的px單位根據(jù)規(guī)則轉(zhuǎn)換成rem 單位

注意: 如果css樣式中 有不需要轉(zhuǎn)成rem 的單位，只需將單位寫成大寫PX 即可。

2.3. 配置vue.config.js

在項(xiàng)目根目錄創(chuàng)建vue.config.js文件，設(shè)置如下配置：

注意：修改完項(xiàng)目根目錄下的配置文件后，一定要重啟項(xiàng)目，這樣配置文件才生效

module.exports = {lintOnSave: false, // eslint-loader 是否在保存的時(shí)候檢查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è)置要替換的最小像素值。})]}}} }

2.4. 重置樣式表

在src/assets下創(chuàng)建css文件夾，新建reset.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;}

2.5. 配置樣式表

在main.js 文件中, 引入重置樣式表reset.css,去掉標(biāo)簽的默認(rèn)樣式

// 引入重置樣式表 import '@/assets/css/reset.css'

2.6. 安裝less

預(yù)編譯語言，編譯成css, 在main.js 引入使用
依次執(zhí)行：

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

注意：此處安裝less-loader 版本需是5.x版本,否則報(bào)錯(cuò),默認(rèn)安裝的是最新版本,所以安裝需指定版本號(hào)

2.7. 注冊(cè)less

//在main.js中,引入less并使用

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

2.8. 代碼中使用

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

三、vant安裝/配置/測(cè)試

3.1. 安裝vant-ui

官網(wǎng)地址： https://vant-contrib.gitee.io/vant/#/zh-CN/

• 項(xiàng)目目錄下安裝vant：

npm i vant -S

或者

yarn add vant

在package.json文件中看到上面效果即安裝成功

3.2. 引入與注冊(cè)

-? 在main.js 文件中引入vant 對(duì)應(yīng)的js和css 文件

//導(dǎo)入所有組件 import Vant from 'vant'; import 'vant/lib/index.css';Vue.use(Vant)

3.3. vant測(cè)試

在src下的App.vue組件中的內(nèi)容，替換成以下內(nèi)容進(jìn)行測(cè)試

<template><div id="app"><H1>Home組件測(cè)試vant組件</H1><van-button type="primary">主要按鈕</van-button><van-button type="info">信息按鈕</van-button><van-button type="default">默認(rèn)按鈕</van-button><van-button type="warning">警告按鈕</van-button><van-button type="danger">危險(xiǎn)按鈕</van-button></div> </template><script>export default {name: 'App',components: {} } </script><style lang='less' scoped> h1{color: #25a4bb;margin-bottom: 15px; } </style>

效果圖

四、axios 工具封裝

4.1. 下載安裝axios

npm install axios

4.2. 創(chuàng)建axios實(shí)例

在src目錄下創(chuàng)建utils目錄, 創(chuàng)建request.js 文件.

// 導(dǎo)入axios import axios from 'axios'; // 使用自定義配置新建一個(gè)axios 實(shí)例，對(duì)axios 做一些基礎(chǔ)配置 const instance = axios.create({baseURL: 'http://kumanxuan1.f3322.net:8001/',timeout: 5000,headers: { 'X-Custom-Header': 'foobar' } });export default instance

4.3. 配置攔截器

// 添加請(qǐng)求攔截器 instance.interceptors.request.use(function (config) {//請(qǐng)求之前執(zhí)行該函數(shù)， 一般在該處設(shè)置tokenlet token = localStorage.getItem("token");if (token) {config.headers["token"] = token}// 在發(fā)送請(qǐng)求之前做些什么return config; }, function (error) {// 對(duì)請(qǐng)求錯(cuò)誤做些什么return Promise.reject(error); });//響應(yīng)攔截器 instance.interceptors.response.use(response => {//1.非200響應(yīng)//2.token過期//3.異地登陸//4.非對(duì)象加密的解密return response.data })

4.4. api管理

在src目錄下創(chuàng)建https 目錄, 目錄下創(chuàng)建http.js 文件,該文件主要用來管理所有的http請(qǐng)求的,如下:

// 所有的請(qǐng)求都放在該目錄 import instance from "../utils/request";//1. 獲取首頁數(shù)據(jù)列表 export function getIndexList() {return instance.get('/index/index') }//2. 分類頁 Category // 全部分類數(shù)據(jù)接口 export function GetChannelDataApi(params) {return instance({url: '/api/catalog/index',method: 'get',params}) }// 3.根據(jù)關(guān)鍵字搜索接口 export function GetSearchData(params) {return instance.get('/goods/list', {params}) }//4.登陸 export function GoLogin(params) {return instance({url: '/auth/loginByWeb',method: 'post',data: params}) }//5.根據(jù)id查詢對(duì)應(yīng)數(shù)據(jù)接口 export function getDetailData(params) {return instance.get('/goods/detail', {params}) }

4.5. 跨域代理配置

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

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

五、動(dòng)態(tài)路由

5.1. 下載vue-router

npm install vue-router

5.2. 組件注冊(cè)

在src下創(chuàng)建router文件夾，并添加index.js，再次文件中安裝使用vue-router

import Vue from 'vue' import VueRouter from 'vue-router'Vue.use(VueRouter)

5.3. 主頁路由

// 配置項(xiàng)目路由 const router = new VueRouter({routes: [{path: '/',redirect: '/home' // 重定向},{path: '/home', //首頁name: 'Home',component: () => import('@/views/home/Home'),meta: {isShowTabbar: true}// children: [ // 二級(jí)路由 不能加'/' 加'/'表示一級(jí)路由// {// path: 'searchPopup',// component: () => import('@/views/home/search/searchPopup.vue'),// name: 'searchpopup',// meta: {// isshowtabbar: false// },// }// ],}] })

5.4. 實(shí)例掛載

main.js： router 掛載到根實(shí)例對(duì)象上
在main.js 文件中引入router 文件下的index.js 路由配置文件，并在根實(shí)例中注冊(cè)。

// 在 入口文件mian.js 引入路由文件 import router from '@/router/index.js'; new Vue({render: h => h(App),router // router 掛載到根實(shí)例對(duì)象上 }).$mount('#app')

根據(jù)路由配置，在src目錄下的views 文件中，分別創(chuàng)建tabbar 對(duì)應(yīng)的組件文件。
components /AppTabBar.vue

<template><div class="app-tab-bar"><!-- 下方導(dǎo)航 --><van-tabbarv-model="active"active-color="#ee0a24"inactive-color="#000"@change="onChange"shape="round"route><van-tabbar-item icon="home-o" to="/home">首頁</van-tabbar-item><van-tabbar-item icon="label-o" to="/topic">專題</van-tabbar-item><van-tabbar-item icon="apps-o" to="/category">分類</van-tabbar-item><van-tabbar-item icon="shopping-cart-o" to="/cart">購物車</van-tabbar-item><van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item></van-tabbar></div> </template><script> export default {name: "app-tab-bar",data () {return {active:0}},methods: {onChange(m) {this.active = m},}, }; </script><style></style>

5.5. 創(chuàng)建home頁面

在src/views下創(chuàng)建home文件夾，并創(chuàng)建Home.vue頁面
內(nèi)容如下：

<template><div><H1>Home組件測(cè)試vant組件</H1><van-button type="primary">主要按鈕</van-button><van-button type="info">信息按鈕</van-button><van-button type="default">默認(rèn)按鈕</van-button><van-button type="warning">警告按鈕</van-button><van-button type="danger">危險(xiǎn)按鈕</van-button></div> </template><script> export default {name: "Home" } </script><style lang='less' scoped> h1{color: #25a4bb;margin-bottom: 15px; } </style>

5.6. 引入 AppTabBar

將AppTabBar.vue導(dǎo)入app.vue 跟組件，將App.vue內(nèi)容覆蓋即可

<template><div id="app"><!-- 路由匹配到的組件將顯示在這里 --><router-view> </router-view><!-- 底部tabbar 組件 --><AppTabBar v-show="$route.meta.isShowTabbar"></AppTabBar></div> </template><script> import AppTabBar from "@/components/AppTabBar";export default {name: 'App',components: {AppTabBar,},} </script> <style lang='less' scoped></style>

啟動(dòng)項(xiàng)目

npm run serve

六、優(yōu)化

6.1. 路由守衛(wèi)

在router 目錄下的index.js 文件中，設(shè)置路由前置守衛(wèi)，代碼案例如下，用來判斷購物車頁面只能在用戶登錄的情況下才能查看。

// 路由前置守衛(wèi) router.beforeEach((to, from, next) => {// 有token就表示已經(jīng)登錄// 想要進(jìn)入購物車頁面，必須有登錄標(biāo)識(shí)token// console.log('to:', to)// console.log('from:', from)let token = localStorage.getItem('token')if (to.path == '/cart') {// 此時(shí)必須要有tokenif (token) {next(); // next()去到to所對(duì)應(yīng)的路由界面} else {Vue.prototype.$toast('請(qǐng)先登錄');// 定時(shí)器setTimeout(() => {next("/user"); // 強(qiáng)制去到"/user"所對(duì)應(yīng)的路由界面}, 1000);}} else {// 如果不是去往購物車的路由，則直接通過守衛(wèi)，去到to所對(duì)應(yīng)的路由界面next()} })

6.2. 異常修復(fù)

編程式導(dǎo)航在跳轉(zhuǎn)到與當(dāng)前地址一致的URL時(shí)會(huì)報(bào)錯(cuò)，但這個(gè)報(bào)錯(cuò)不影響功能：
在src/router/index.js中新增以下內(nèi)容

// 該段代碼不需要記，理解即可 // 在vue-router在3.1.0版本之后，push和replace方法會(huì)返回一個(gè)promise對(duì)象，如果跳轉(zhuǎn)到相同的路由，就報(bào)promise uncaught異常 const originalPush = VueRouter.prototype.push; VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch((err) => err); };

6.3. 路由懶加載

在src/main.js中新增

// 引入vant 提供過的懶加載 import { Lazyload } from 'vant';Vue.use(Lazyload);

總結(jié)

以上是生活随笔為你收集整理的vue2.x vant2.x H5 移动端脚手架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。