vue2.x vant2.x H5 移动端脚手架
生活随笔
收集整理的這篇文章主要介紹了
vue2.x vant2.x H5 移动端脚手架
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 一、前置準(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安裝/配置/測試
- 3.1. 安裝vant-ui
- 3.2. 引入與注冊(cè)
- 3.3. vant測試
- 四、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ò)
會(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 重置樣式表代碼:
2.5. 配置樣式表
在main.js 文件中, 引入重置樣式表reset.css,去掉標(biāo)簽的默認(rèn)樣式
// 引入重置樣式表 import '@/assets/css/reset.css'2.6. 安裝less
預(yù)編譯語言，編譯成css, 在main.js 引入使用
依次執(zhí)行：
注意：此處安裝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安裝/配置/測試
3.1. 安裝vant-ui
官網(wǎng)地址： https://vant-contrib.gitee.io/vant/#/zh-CN/
- 項(xiàng)目目錄下安裝vant：
或者
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測試
在src下的App.vue組件中的內(nèi)容，替換成以下內(nèi)容進(jìn)行測試
<template><div id="app"><H1>Home組件測試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 axios4.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 instance4.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-router5.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è)。
根據(jù)路由配置，在src目錄下的views 文件中，分別創(chuàng)建tabbar 對(duì)應(yīng)的組件文件。
components /AppTabBar.vue
5.5. 創(chuàng)建home頁面
在src/views下創(chuàng)建home文件夾，并創(chuàng)建Home.vue頁面
內(nèi)容如下：
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)容
6.3. 路由懶加載
在src/main.js中新增
// 引入vant 提供過的懶加載 import { Lazyload } from 'vant';Vue.use(Lazyload);總結(jié)
以上是生活随笔為你收集整理的vue2.x vant2.x H5 移动端脚手架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 控件设置相对位置_惊人的Divi转换控件
- 下一篇： vue 集成 sweetalert2 前