亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3+vite項(xiàng)目H5配置適配步驟詳解

 更新時(shí)間:2023年10月26日 10:14:14   作者:張旭超  
這篇文章主要為大家介紹了vue3+vite項(xiàng)目H5配置適配步驟詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

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í)例代碼

    這篇文章主要介紹了vue 父組件給子組件傳值,子組件給父組件傳值,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04
  • Vue實(shí)現(xiàn)列表跑馬燈效果

    Vue實(shí)現(xiàn)列表跑馬燈效果

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)列表跑馬燈效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue2(三)實(shí)現(xiàn)子菜單展開收縮,帶動(dòng)畫效果實(shí)現(xiàn)方法

    Vue2(三)實(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-04
  • 解決vue addRoutes不生效問題

    解決vue addRoutes不生效問題

    這篇文章主要介紹了解決vue addRoutes不生效問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2020-08-08
  • vuex 動(dòng)態(tài)注冊(cè)方法 registerModule的實(shí)現(xiàn)

    vuex 動(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制作日程表的示例代碼

    這篇文章主要介紹了在Vue項(xiàng)目中用fullcalendar制作日程表,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • Vue開發(fā)環(huán)境的搭建全過程

    Vue開發(fā)環(huán)境的搭建全過程

    文章介紹了在網(wǎng)頁(yè)中使用Vue.js的四種方式:基本方式、腳手架方式(Vue2.0)、使用WebStorm集成環(huán)境創(chuàng)建vue-cli項(xiàng)目(Vue3.0)以及Vue項(xiàng)目的目錄結(jié)構(gòu),每種方式都有詳細(xì)的步驟和示例,幫助讀者快速上手Vue.js開發(fā)
    2024-11-11
  • 解決Echarts 顯示隱藏后寬度高度變小的問題

    解決Echarts 顯示隱藏后寬度高度變小的問題

    這篇文章主要介紹了解決Echarts 顯示隱藏后寬度高度變小的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2020-07-07
  • 使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例

    使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例

    今天小編就為大家分享一篇使用vue根據(jù)狀態(tài)添加列表數(shù)據(jù)和刪除列表數(shù)據(jù)的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2018-09-09
  • vue長(zhǎng)列表優(yōu)化之虛擬列表實(shí)現(xiàn)過程詳解

    vue長(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

最新評(píng)論