當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue+vant搭建移动端框架

發布時間：2024/1/1 vue 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue+vant搭建移动端框架小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

主要內容

1.vant/rem移動端適配的解決方案
2. vue/cli二次配置及優化處理
3.基于注冊動態模式實現loading
4.掌握vuex永久化存儲

1 創建一個vue項目

1.1安裝vue-cli:

npm install -g @vue/cli

1.2初始化項目

vue create vue-vant

(1)選擇手動配置
空格切換選中狀態
插件選擇這邊選擇了（Babel、Router、Vuex、Css預處理器、Linter / Formatter 格式檢查）
Babel:支持es6語法轉換
TypeScript:微軟提供的js超集
Progressive Web App (PWA) Support:漸進式的網頁應用程序。
Router:路由
Vuex:Vuex是Vue.js應用程序的狀態管理模式+庫
CSS Pre-processors:Sass/Less預處理器
Linter / Formatter:代碼風格檢查
Unit Testing:支持單元測試
E2E Testing:支持E2E測試
(2)
路由模式選擇：是否使用history模式的路由(yes)
選擇一個css預處理器(Less)
選擇一個eslint配置，這邊選擇Airbnb
選擇在什么時候進行eslint校驗，選擇Lint on save保存時檢查
選擇將這些配置寫入到什么地方( In package.json)
是否保存這份預設配置(n)
到此等待依賴完成

1.3啟動項目

cd vue-vant
npm run serve

2.通過npm安裝

npm I vant -S

參考vant官網快速上手教程： https://youzan.github.io/vant/#/zh-CN/quickstart

3.引入組件

自動按需引入(推薦)
3.1安裝babel-plugin-import插件
babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式
#安裝插件

npm i babel-plugin-import -D

3.2添加配置
在babel.config.js 中添加配置

{"plugins": [["import", {"libraryName": "vant","libraryDirectory": "es","style": true}]] }

3.3引入vant組件
如在全局引入懶加載組件
src/main.js

//引入組件 import {Lazyload} from 'vant' Vue.use(Lazyload)

引入組件后發現報錯：是因為項目開啟了eslint檢查
解決辦法：在項目根目錄新建vue.config.js文件，去除在保存的時候檢查代碼的功能, 配置完后記得重新npm run serve啟動。
vue.config.js

module.exports = {lintOnSave: false //eslint-loader 是否在保存的時候檢查}

vue.config.js是vue-cli3之后新增的一個功能，再這個版本里面如果要配置webpack相關的屬性，就需要自己在項目根目錄新建vue.config.js這個文件，然后在該文件里面去寫入你需要的配置。
后面再對vue.config.js進行更詳細配置。

4.rem適配

Vant 中的樣式默認使用px作為單位，如果需要使用rem單位，推薦使用以下兩個工具：

postcss-pxtorem 是一款 postcss 插件，用于將單位轉化為 rem
lib-flexible 用于設置 rem 基準值

4.1安裝

npm install postcss-pxtorem lib-flexible --save-dev

4.2postcss配置
在項目目錄下新建文件postcss.config.js
postcss.config.js

//postcss的配置 module.exports = {plugins: {autoprefixer: {browsers: ['Android >= 4.0', 'iOS >= 8'],},'postcss-pxtorem': {rootValue: 37.5,propList: ['*'],},}, };

4.3引入 lib-flexible
main.js

//引入lib-flexible 用于設置rem基準值 import "lib-flexible/flexible"

rem詳解

1rem等于html根元素設定的font-size的px值，vantui設置rootValue： 37.5，則1rem 等于 37.5px 等于設備的寬度/10
切換不同的機型，根元素有不同的font-size，當寫css px樣式時，會被程序換算成rem達到適配使用vant組件，
需要按照rootValue：37.5來寫樣式

舉個例子：一張750px * 1334px圖片，在iphone6上鋪滿屏幕，其他機型適配
當rootValue：75，樣式width：750px；height：1334px；圖片會撐滿iphone6屏幕，切換其他機型圖片同樣撐滿屏幕
當rootValue：37.5，樣式width：375px；height：667px；圖片會撐滿iphone6屏幕

配置完如下圖所示說明配置成功

5.Tabbar標簽欄的使用

5.1初始化項目
App.vue

Home.vue

<template><div class="home"></div> </template><script>export default {name: 'Home',}; </script>

5.2引入
App.vue

5.3路由模式
標簽欄支持路由模式，用于搭配vue-router使用。路由模式下會匹配頁面路徑和標簽的to屬性，并自動選中對應的標簽
App.vue

<router-view/><van-tabbar route><van-tabbar-item replace to="/" icon="home-o">首頁</van-tabbar-item><van-tabbar-item replace to="/about" icon="orders-o">介紹</van-tabbar-item> </van-tabbar>

實現效果如下圖

6.Swipe輪播的使用

6.1引入
Home.vue

6.2圖片懶加載
當 Swipe 中含有圖片時，可以配合 Lazyload 組件實現圖片懶加載。
Home.vue

<van-swipe :autoplay="3000"><van-swipe-item v-for="(image, index) in images" :key="index"><img v-lazy="image" /></van-swipe-item> </van-swipe> import Vue from 'vue'; import { Lazyload } from 'vant';Vue.use(Lazyload);export default {data() {return {images: ['https://img.yzcdn.cn/vant/apple-1.jpg','https://img.yzcdn.cn/vant/apple-2.jpg',],};}, };

6.3 設置圖片樣式
Home.vue

<template><div class="home"><van-swipe :autoplay="3000"><van-swipe-item v-for="(image, index) in images" :key="index"><img v-lazy="image" /></van-swipe-item></van-swipe></div> </template><script> import { Swipe, SwipeItem} from "vant"; export default {name: 'Home',data() {return {images: ['https://img.yzcdn.cn/vant/apple-1.jpg','https://img.yzcdn.cn/vant/apple-2.jpg',],};},components: {[Swipe.name]: Swipe,[SwipeItem.name]: SwipeItem}, }; </script><style scoped>img{width: 100%;} </style>

最終效果如下圖：

7.配置多環境變量

7.1配置介紹

以 VUE_APP_ 開頭的變量，在代碼中可以通過 process.env.VUE_APP_ 訪問。
比如,VUE_APP_BASE_API = ‘development’ 通過process.env.VUE_APP_BASE_API訪問。 ??
除了 VUE_APP_* 變量之外，在你的應用代碼中始終可用的還有兩個特殊的變量NODE_ENV 和BASE_URL。

7.2在項目根目錄中新建.env， .env.development 和 .env.production，在文件中定義變量
.env.development 本地開發環境配置

NODE_ENV = "development"; BASE_URL = "/"; VUE_APP_BASE_API ="/dev-api";

.env.production 正式環境配置

NODE_ENV = "production"; BASE_URL = "/"; VUE_APP_BASE_API ="/prod-api";

.env 公共環境配置

NODE_ENV = "development"; BASE_URL = "/"; VUE_APP_BASE_API ="/dev-api"; VUE_APP_AA="aa"

7.3 vue.config.js配置
vue.config.js的具體配置參數可以參照vue-cli文檔地址：https://cli.vuejs.org/zh/config/#crossorigin
vue.config.js

// module.exports = { // lintOnSave: false //eslint-loader 是否在保存的時候檢查 // }console.log(process.env.NODE_ENV); const port = process.env.port || 9999;module.exports = {// 是否在開發環境下通過 eslint-loader 在每次保存時 lint 代碼 // (在生產構建時禁用 eslint-loader) 應該是!==,這里設置為===是為了不進行檢查lintOnSave: process.env.NODE_ENV === 'production',devServer:{port,open:true,// 前端應用和后端 API 服務器沒有運行在同一個主機上，// 你需要在開發環境下將 API 請求代理到 API 服務器proxy:{[process.env.VUE_APP_BASE_API]:{target:"http://localhost:8000/mock",// 接口的域名changeOrigin:true,// 開啟代理，在本地創建一個虛擬服務端pathRewrite:{[process.env.VUE_APP_BASE_API]:""}}}} }

8.配置alias別名

vue.config.js

const path = require('path'); function resolve(dir){return path.join(__dirname,dir); } module.exports = {configureWebpack:{resolve:{alias:{"@":resolve("src"),"components":resolve("src/components"),"utils":resolve("src/utils")}}} }

9.使用vuex實現按鈕功能

9.1添加按鈕
Home.vue

<template><div class="home"><van-button type="primary" @click="addOne">按鈕</van-button></div> </template> <script> import { Button } from "vant"; export default {name: 'Home',components: {[Button.name]: Button},methods: {//添加按鈕觸發事件addOne(){console.log("點擊了按鈕")}} }; </script>

9.2使用Vuex 實現點擊按鈕兩秒鐘后數字加1
store/index.js

import Vue from 'vue'; import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {},mutations: {},actions: {},modules: {}, });

main.js引入

import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store';new Vue({router,store,render: (h) => h(App), }).$mount('#app');

使用
store/index.js

import Vue from 'vue'; import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({//初始狀態, 存儲基本數據state: {number: 1},//更改store中狀態的方法mutations: {oneAsync(state, payload){state.number = state.number + payload}},//用于提交mutationactions: {oneAsync({commit}, payload){return new Promise((resolve, reject) => {window.setTimeout(() => {resolve()commit("oneAsync", payload)}, 2000)})}},//允許將單一的store拆分為多個storemodules: {}, });

Home.vue

<template><div class="home"><h1>當前數據是：{{$store.state.number}}</h1><van-button type="primary" @click="addOne" :loading="loading">按鈕</van-button></div> </template> <script> import { mapActions } from 'vuex'; export default {name: 'Home',components: {[Button.name]: Button},methods: {//mapActions: 創建組件方法分發actions// 將 `this.oneAsync()` 映射為 `this.$store.dispatch('oneAsync')`// store.dispatch 可以處理被觸發的 action 的處理函數返回的 Promise...mapActions(["oneAsync"]),addOne(){this.oneAsync(1)//加1}} }; </script>

實現效果如下，點擊按鈕兩秒后下圖當前數據將變為2:

vuex的理解：
vuex文檔： https://vuex.vuejs.org/zh/guide/

vuex是一個專門為vue.js開發的狀態管理模式，每一個vuex應用核心就是store(倉庫)。store基本上就是一個容器，它包含著你的應用中大部分的state(狀態)
vuex的狀態存儲是響應式的，當 vue組件中store中讀取狀態時候，若store中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
改變store中的狀態的唯一途徑就是顯示 commit(提交)mutation，這樣使得我們可以方便地跟蹤每一個狀態的變化。

主要有以下幾個模塊：
State: 定義了應用狀態的數據結構，可以在這里設置默認的初始狀態
Getter: 允許組件從Stroe中獲取數據，mapGetters輔助函數僅僅是將store中的 getter映射到計算屬性。
Mutation: 唯一更改store中狀態的方法，且必須是同步函數。
Action: 用于提交muatation, 而不是直接變更狀態，可以包含任意異步操作。
Module: 允許將單一的store拆分為多個 sotre且同時保存在單一的狀態樹中

10自定義 vuex-plugins-loading

插件功能: https://vuex.vuejs.org/zh/guide/plugins.html
subscribeAction: https://vuex.vuejs.org/zh/api/#subscribeaction

實現效果: 頁面在數據加載完成前展示loading

實現思路:vuex中注冊一個管理loading的module,通過綁定異步的action，將每個action的loading存在vuex中，這樣我在每個頁面只需要在vuex的store中拿相對應的action loading就能達到此目的

在src目錄下新建utils目錄，在utils目錄下再新建vuex-loading.js
utils/vuex-loading.js

引入并使用插件
store/index.js

import Vue from 'vue'; import Vuex from 'vuex'; //引入插件 import createLoadingPlugin from '../utils/vuex-loading';Vue.use(Vuex);export default new Vuex.Store({//使用插件plugins: [createLoadingPlugin()], });

Home.vue

<template><div class="home"><h1>當前數據是：{{$store.state.number}}</h1><van-button type="primary" @click="addOne" :loading="loading">按鈕</van-button>{{$store.state.myLoading.effect.oneAsync}}</div> </template> <script> import { Swipe, SwipeItem } from 'vant'; import { Button } from 'vant'; import { mapActions, mapState } from 'vuex'; export default {name: 'Home',computed: {//拿到action中的loading...mapState({loading:state=>state.myLoading.effect["oneAsync"]})},components: {[Swipe.name]: Swipe,[SwipeItem.name]: SwipeItem,[Button.name]: Button},methods: {//mapActions: 創建組件方法分發actions// 將 `this.oneAsync()` 映射為 `this.$store.dispatch('oneAsync')`// store.dispatch 可以處理被觸發的 action 的處理函數返回的 Promise...mapActions(["oneAsync"]),addOne(){this.oneAsync(1)}} }; </script>

11.vuex永久化存儲

vuex 是 vue的狀態管理器，存儲的數據是響應式的。但是并不會保存起來，刷新之后就回到了初始狀態，具體做法應該在vuex里數據改變的時候把數據拷貝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的數據，取出來再替換store里的state。

這里需要注意的是：由于vuex里，我們保存的狀態，都是數組，而localStorage只支持字符串，所以需要用JSON轉換。

store/index.js

import Vue from 'vue'; import Vuex from 'vuex'; //引入插件 import createLoadingPlugin from '../utils/vuex-loading';Vue.use(Vuex);//vuex永久化存儲 function vuexlocal(){return store =>{//看下本地是否保存數據//監視 subscribe// JSON.parse 將字符串轉化為對象// JSON.stringify 將 JavaScript 值轉換為 JSON 字符串let local = JSON.parse(localStorage.getItem("myVuex")) ||store.state;store.replaceState(local);store.subscribe((mutation,state)=>{let newState = JSON.parse(JSON.stringify(state));localStorage.setItem("myVuex",JSON.stringify(newState))})} }

總結

以上是生活随笔為你收集整理的vue+vant搭建移动端框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： s6 edge编译android,三星为
下一篇： html5倒计时秒杀怎么做,vue 设