vue cli3專案的pc自適應布局 vw

vw布局的頁面是等比改變的(因為vw將螢幕等分為100份,在初始設計時某元素佔螢幕多少份,在其他螢幕上也是同樣的份數),比如我們在乙個750px的螢幕寬度中使用了vw,當我們把螢幕寬度改為1920的時候,網頁的整個樣式包括字型都會等比放大.vw布局我用於大屏監控資料展示.

下圖是750螢幕寬度下的頁面

下圖是1920螢幕寬度下的頁面

1.安裝postcss-px-to-viewport外掛程式,該外掛程式的作用是把專案中style標籤內的px在編譯後轉化為vw.我們在專案中寫px,在執行npm run serve後檢視介面會發現px已經轉化為vw了.

注意!對於非style標籤的px是無法轉化為vw的

npm install postcss-px-to-viewport -d

編輯器中用px

在網頁控制台上變為了vw

2.在package.json同級下新建檔案vue.config.js,在vue.config.js中配置如下

module.exports=)]}

}}    
}

dididi

dididi2
dididi3

vue cli3專案優化

做公司後台，使用了vue cli3和heyui做為基礎搭建。對專案做過的優化記錄如下 a.配置多變數環境 通過在package.json 裡的scripts配置項中新增 mode 來選擇不同的環境。中可以通過process.env.node env變數來訪問。b.專案新建vue.config.js，...

Vue cli3 專案優化

vue 專案完成後，因匯入了大量的或體積較大的依賴包以及外掛程式，導致專案變得非常臃腫。下面通過幾個方面來優化頁面的使用者體驗以及提公升頁面的響應速度。在專案中安裝使用nprogress依賴項，使使用者獲得更好的使用者體驗。使用後會在頁面載入時出現頁面頂部的進度條。效果如下 匯入 nprogress...

Vue Cli3專案配置

二 全域性sass配置 三 全域性css配置 四 基礎元件的自動化全域性註冊總結 使用vue cli3構建乙個初始的vue專案 cli3官方文件 1 在 vue.config.js 裡面頂部 路徑依賴 const path require path 查詢檔案方法 const resolve dir ...