vue3 0打包把px轉換rem

2021-10-01 10:38:59 字數 689 閱讀 4404

1.首先把安裝amfe-flexible,這裡使用npm install

nnpm i  amfe-flexible -s
2.在專案入口檔案main.js中引入amfe-flexible

import 'amfe-flexible'
3.在根目錄的index.html 的頭部加入手機端適配的meta**

4.在package.json頁面找到postcss新增

}}}如果使用ui框架就要根據元件的大小進行設定

之所以設為37.5,是為了引用像mint-ui這樣的第三方ui框架,因為第三方框架沒有相容px2rem ,將remunit的值設定為設計圖寬度(這裡為750px)75的一半,即可以1:1還原vant-ui的元件,否則會樣式會有變化,例如按鈕會變小。

既然設定成了37.5 那麼我們必須在寫樣式時,也將值改為設計圖的一半。

參考:

vue 生成發布包 Vue 3 0重磅發布!

vue.js 3.0 one piece 已正式發布,此框架新的主要版本提供了更好的效能 更小的 包體積 更好的 typescript 整合 用於處理大規模用例的新 api,並為框架未來的長期迭代奠定了堅實的基礎。3.0 版本的開發周期長達兩年多,期間產生了 30 rfcs 2600 commits...

vue cli3 0 打包並在本地檢視

根據以下命令對專案進行打包 npm run build命令執行完出現 done build complete.the dist directory is ready to be deployed.info check out deployment instructions at 看了一下,build...

Vue cli3 0打包部署到Nginx

vue cli3.0相比於vue cli2.0,僅從根目錄來看,最大的區別就是vue cli3.0少了build和config資料夾,前者用於專案構建 webpack 相關 後者用於專案開發環境配置。取而代之的是vue.config.js這個檔案,看起來目錄簡潔不少。圖1 vue cli3.0根目錄...