深入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构建功能完善的移动端架子

仅供个人学习总结使用，如有侵权，请联系

转载于:https://juejin.im/post/5cd009e76fb9a031f90d67aa