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

MrNow發表於2019-05-07

環境變數與模式

在一個產品的前端開發過程中，一般來說會經歷：本地開發、測試指令碼、開發自測、測試環境、預上線環境才能正式的釋出，對應不同的環境可能都會有所差異，比如伺服器地址、介面地址、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'
}
複製程式碼