vue3+vite項(xiàng)目H5配置適配步驟詳解
vue3+vite項(xiàng)目配置適配H5
安裝插件
主要安裝一下兩個(gè)插件:
- amfe-flexible(主要用于動(dòng)態(tài)設(shè)置根元素字體大小(rem),以根據(jù)屏幕尺寸進(jìn)行自適應(yīng)布局)
- postcss-px-to-viewport-8-plugin(將px單位轉(zhuǎn)換為rem)
開始配置
第一步、安裝amfe-flexible插件
cnpm install amfe-flexible --save
第二步、在main.js中導(dǎo)入
import { createApp } from 'vue' import './style.css' import App from './App.vue' import 'amfe-flexible' createApp(App).mount('#app')
第三步、安裝postcss-px-to-viewport-8-plus
cnpm install postcss-px-to-viewport-8-plugin --save
第四步、配置vite.config.ts文件
export default defineConfig({ plugins: [vue()], css: { postcss: { plugins: [ postcsspxtoviewport({ unitToConvert: 'px', // 需要轉(zhuǎn)換的單位,默認(rèn)為"px" viewportWidth: 390, // 設(shè)計(jì)稿的視口寬度 unitPrecision: 5, // 單位轉(zhuǎn)換后保留的精度 propList: ['*'], // 能轉(zhuǎn)化為vw的屬性列表 viewportUnit: 'vw', // 希望使用的視口單位 fontViewportUnit: 'vw', // 字體使用的視口單位 selectorBlackList: [], // 需要忽略的CSS選擇器,不會(huì)轉(zhuǎn)為視口單位,使用原有的px等單位。 minPixelValue: 1, // 設(shè)置最小的轉(zhuǎn)換數(shù)值,如果為1的話,只有大于1的值會(huì)被轉(zhuǎn)換 mediaQuery: false, // 媒體查詢里的單位是否需要轉(zhuǎn)換單位 replace: true, // 是否直接更換屬性值,而不添加備用屬性 exclude: undefined, // 忽略某些文件夾下的文件或特定文件,例如 'node_modules' 下的文件 include: undefined, // 如果設(shè)置了include,那將只有匹配到的文件才會(huì)被轉(zhuǎn)換 landscape: false, // 是否添加根據(jù) landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape) landscapeUnit: 'vw', // 橫屏?xí)r使用的單位 landscapeWidth: 390 // 橫屏?xí)r使用的視口寬度 }) ] } } })
以上就是vue3+vite項(xiàng)目H5配置適配步驟詳解的詳細(xì)內(nèi)容,更多關(guān)于vue3 vite適配H5配置的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue 父組件給子組件傳值子組件給父組件傳值的實(shí)例代碼
這篇文章主要介紹了vue 父組件給子組件傳值,子組件給父組件傳值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04Vue2(三)實(shí)現(xiàn)子菜單展開收縮,帶動(dòng)畫效果實(shí)現(xiàn)方法
這篇文章主要介紹了vue實(shí)現(xiàn)收縮展開效果的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vuex 動(dòng)態(tài)注冊(cè)方法 registerModule的實(shí)現(xiàn)
這篇文章主要介紹了vuex 動(dòng)態(tài)注冊(cè)方法 registerModule的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07在Vue項(xiàng)目中用fullcalendar制作日程表的示例代碼
這篇文章主要介紹了在Vue項(xiàng)目中用fullcalendar制作日程表,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)過程詳解
前端的業(yè)務(wù)開發(fā)中會(huì)遇到不使用分頁(yè)方式來(lái)加載長(zhǎng)列表的需求,下面這篇文章主要給大家介紹了關(guān)于vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08