深刻Vue後臺管理開發(2)css,rem初始化

環境變量與模式

在一個產品的前端開發過程當中，通常來講會經歷： 本地開發、測試腳本、開發自測、測試環境、預上線環境 才能正式的發佈，對應不一樣的環境可能都會有所差別，好比服務器地址、接口地址、websorket地址...等等。在各個環境切換的時候，須要不一樣的配置參數，全部就能夠用環境變量和模式來管理切換。

.env              # 在全部環境中被載入
.env.local        # 在全部環境中被載入，但會被 git 忽略
.env.[mode]       # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
複製代碼

自定義的變量vue_APP開頭，兩個特殊的變量：

• NODE_ENV會是development、production或test中的一個。具體的值取決於應用運行的模式。
• BASE_URL會和vue.config.js中的baseUrl選項相符，即你的應用會部署到的基礎路徑。 如這裏定義的.env

NODE_ENV = 'development'
BASE.URL = './'
VUE_APP_BASE_API = 'https://easy-mock.com/'
複製代碼

在項目中能夠用process.env.VUE_APP_*，如process.env.VUE_APP_BASE_API獲取到定義的值

css 初始化

1.normalize.css 目的：

• 保護有用的瀏覽器默認樣式而不是徹底去掉它們
• 通常化的樣式：爲大部分HTML元素提供
• 修復瀏覽器自身的bug並保證各瀏覽器的一致性
• 優化CSS可用性：用一些小技巧
• 解釋代碼：用註釋和詳細的文檔來

# npm i normalize.css
// main.js
import "normalize.css/normalize.css";
複製代碼

2.引入本身經常使用的 css 樣式，global.css或者common.scss等

import '@/style/common.scss'
複製代碼

rem 佈局

rem 即 root em，是依據設備根元素的相對大小來動態設置大小的方式，這裏，咱們根據設備的大小不一樣動態改變 rem 的大小

// index.html
contractio();
window.onresize = function () {
    contractio();
}
// 自適應計算
function contractio() {
    // 獲取設備寬度
    var deviceWidth = document.documentElement.clientWidth || window.innerWidth
    // 獲取窗口內部高度
    var wH = window.innerHeight
    // 獲取窗口內部寬度
    var wW = window.innerWidth
    // 表示 1920 的設計圖，使用 100px 的默認值
    var whdef = 100/1920 
    // 當隨着窗口的寬度變小，rem 的大小也會隨之改變
    var rem = wW * whdef
    // 設置根元素大小
    document.documentElement.style.fontSize = rem + 'px'
}
複製代碼

這樣設置之後，若是你的設備寬度是1920px，那麼此時 1rem=100px，而若是設備寬度是 960px，那麼此時 1rem=50px。 而後在開發工具中進行以下設置：

• 下載 cssrem 轉化工具

• 在 文件/首選項/設置 裏搜索 cssrem 將 Root Font Size大小設置爲 100

• 正常的使用 px 爲單位

• ctrl+shift+p選擇將該頁的 px 單位大小轉化爲 rem 單位的大小，大小就會自動變了，換算的相對大小爲剛纔設置的 100

---

持續更新中

參考基於vue-cli3.0構建功能完善的移動端架子

僅供我的學習總結使用，若有侵權，請聯繫