vue3 vant 移動端應用（1）

2021-09-24 06:51:58 字數 1064 閱讀 5420

npm i vant -s主要問題如何按需引用、rem適配

按需引入

babel-plugin-import 會在編譯過程中將 import 的寫法自動轉換為按需引入的方式


//安裝命令


npm i babel-plugin-import -d


複製**
安裝之後新建立babel.config.js檔案



module.exports = , 'vant']


]}複製**
4.這樣就可以直接使用了,在main.js資料夾引入

import vue from 'vue'


import  from 'vant';


vue.use(button);


複製**
安裝兩個外掛程式

npm i postcss-pxtorem -s


npm i amfe-flexible -s


複製**
根據vue3提供的新配置方法，在vue-config.js中對css做配置：

const autoprefixer = require('autoprefixer');


const pxtorem = require('postcss-pxtorem');


module.exports = )]}


}}


}複製**
rootvalue  75.0的值其實就是代表ui設計稿的750px的畫素，引用的時候css直接寫寬750px就相當於100％，它會自動根據螢幕進行計算成rem，無需對原測量值進行rem的換算（這裡推薦37.5，結合2x的設計圖開發，因為vant的元件你會發現37.5更為適合）。

在main.js資料夾下引入

import 'amfe-flexible';


複製**
這樣就可以在html下對於font-size進行計算。達到自適應的，直接安照ui設計稿750px寫畫素單位，開發更加高效。

vue 移動端適配vant

下面我們分別將這兩個工具配置到專案中完成 rem 適配。一 使用 lib flexible 動態設定 rem 基準值 html 標籤的字型大小 1 安裝 npm i amfe flexible2 然後在 main.js 中載入執行該模組 import amfe flexible 二 使用 postc...

Vue移動端框架選型之 Vant

前端時間幫友人做了個外賣小應用，經歷了痛苦的ui框架選型，最終從最初選定的museui轉投有贊vant，以下是個人總結 vant提供了sku 省市選擇器等極具實用價值的業務元件，這點必須點個大寫的贊，其他框架鮮有把元件封裝到業務級別的 vant提供了一些看似冷門 其他框架較少提供 但是實際很常用的元...

Vant 移動端Vue元件庫的使用

1 通過 npm 安裝 2 npm i vant s3 通過 yarn 安裝 4 yarn add vant1 方式一 按需引入 安裝外掛程式 npm i babel plugin import d 先在.babelrc 中新增配置 在babel.config.js檔案裡寫進去下面這些 module...