# REMARK.md
- 配置和参数详细说明文档
- 使用详见 README.md
--~---~---~---~---~---~---~-----~---~---~---~---~---~---~---~--~-----~---~-----~---~---~---~---~---~---~---~--~-----~---~-----~---~---~--
_使用篇_
# 传值
- 方法作为传递属性: 子组件可以传入一个 `method` 作为属性, 若未在 `props` 声明, 可通过 `$attrs` 访问. 多层级组件可使用 `$listener` 来抛出事件
- 子组件中 `v-model` 优雅地绑定父组件属性: `.sync` 和 `update:` 结合计算属性. `.sync` 其实是语法糖, 父组件会自动同步在子组件的 `update:` 抛出的值
1. 父组件使用 `.sync` 来自动接收子组件抛出的 `update:`. 子组件重新定义一个带有 `set / get` 的计算属性: `set` 抛出更新触发 `.sync`; `get` 取 `props` 值
2. 需要注意的是父组件必须要传入且用 `.sync` 修饰, 否则子组件 `update:` 没有接收, 链条就断了.
```
// 通过计算属性优雅地在子组件使用 `v-model` 绑定父组件的值
currentPage: {
get() {
return this.page
},
set(val) {
this.$emit('update:page', val)
}
}
```
- 若父组件是在 `created` 内使用 `this.$nextTick(() => { })`，其内部执行会晚于子组件的 `mounted` 方法。如在 `router-view` 嵌套的二级路由页面 `mounted` 晚于父组件 `$nextTick`
- `.sync` 处理对象更新
1. vue 不检测在子组件内更新对象的属性 (_封装 form 尤其有用_). 注意两个前提, 传入对象需要是 data 下第一层, 对象内部字段需要在父组件中进行声明
2. 可以在子组件抛出一个对象或者集合, 如对 `table` 的封装, 监听多选抛出对选集合数据: _父组件传入空集合, 子组件在多选选择事件内进行抛出_
- 路由声明式传参：`params` 下页面刷新不会丢失，被存储在路径中，并且变量名提前声明了. _路由无参数会进入 404, 且 push 推入路由页面需要使用 name 属性_
- 过滤器支持多参: 首参默认是数据源, 不能修改. 如 _全局过滤器_, 时间格式化和解析, 默认值: `YYYY-MM-DD HH:mm:ss`, 也可自定义传入 `fecha` 支持的格式
- 计算属性和 watch: 计算属性监听的值没有变化不会重新计算, 且可以同时监听多个属性, 唯一的问题是, 她需要被使用才会触发: 如果有这个需求可以使用 watch，一个 watch 只能监听一个属性
# 使用
- table 组件化: _动态作用域插槽和具名插槽, 分页计算属性和 props 的优雅结合_. 配置表单字段映射, 传入数据源和表头即可实现表单 (使用混入)
- navBar 组件化: 引入导航头, 自动计算偏移量, 将页面通过插槽载入到 navBar 组件内. 主容器设置 100% height 不设置 overflow, 若需要设置高度 100%以填充背景色, 设置其容器 height 100%即可
- index 入口: 由 `process.env.VUE_APP_PLATFORM` 集合的值决定: 若仅有 mob 入口为移动端, 否则为 admin. _若兼容两端则 index 根据设备自动跳转对应路由_
# 进阶
- bus
1. 配置了事件载体和事件触发 id, _使用 bus 将 key 声明为常量，便于追踪和管理_, 若有频繁触发使用节流控制(并抛出), 如 `flex-rem` 中的 `window.onresize`
2. 使用 `bus.$vm.$on`, 需要在 `destroyed() { bus.$vm.$off(bus.$sel.window_resize); }` 关闭监听. 若仅仅监听一次使用 `bus.$vm.$off`, 抛出事件 `bus.$vm.$emit`
```
// vue 支持 vue-hooks
created() {
bus.$vm.$on(bus.$sel.window_resize, () => { });
// vue 支持 vue-hooks
this.$on("hook:destroyed", () => {
bus.$vm.$off(bus.$sel.window_resize);
});
}
```
- 优化
1. **当数据赋值后不需要响应式, 使用 Object.freeze 冻结**: `this.item = Object.freeze(Object.assign({}, this.item))` _滤掉无用字段可用封装 `optimize` 库_
2. 一次性响应事件使用 v-once
3. 优先 v-show, 尽量不使用 v-if
4. 使用 keep-alive: 需要组件有 name, `plop` 方式下自动生成
5. v-if 不要和 v-for 同级: 若真是存在这个情况, 改用计算属性
- js 和 css 变量共享
1. css 到 js: 通过 `css-modules :export` 来实现, 如 `variables.styl` 导出 `:export { colorTheme: $-color-theme }`. 在 js 内 import 文件即可. _css 也可用_
2. js 到 css 最简单方式就是 vue 动态样式: 若需要实时响应, 可和 vuex 进行关联. 如 `App.vue` 内, _通过 vuex 实现了高分屏兼容 @media 布局: 控制显示设备_. **IE 不支持 `css var()`**
# 兼容
- `swiper` 最新版 `^5.3.8` 不支持 `IE10`, 选择兼容版本 `^3.4.2` 版本. 匹配 `vue-awesome-swiper` 版本 `^2.6.7"` (各个 swiper 版本间配置稍有不同)
- `skeleton`: 若骨架屏注入, 提示资源加载异常, 将 `.env` 中 `VUE_APP_SKELETON` 设置为空字符串即可. (_index.html_ 引入 `skeleton.css` 可不注释)
- `vue add quasar` 添加 `quasar` 组件库, 选择兼容 `IE 11`, 依赖和配置会自动注入
- 底部导航栏体验优化 **计算布局容器避免使用 `margin`**
1. 前言: 钉钉布局底部会留出操作安全区域, 当页面超过一屏时, 底部 `TabBar` 上下滑动时会移动, 且 `web` 页面自身的滑动和 `webview` 自带的滑动体验感极差, _尤其添加了下拉刷新_
2. 方案: 基于 `quasar` 的 `QScrollArea` 组件, 其还支持自定义滚动条. 计算出固定位置高度后, 余下部分留给使用 `QScrollArea` 进行包裹, 是兼容 `QPullToRefresh` 下拉刷新的
```
q-scroll-area.main-area(:thumb-style="thumbStyle" :bar-style="barStyle" :style="{height: areaH}")
data() {
return {
areaH: 0 // 自定义滑动区域, 优化体验
};
},
computed: {
// 自定义滚动区域 Bar 样式
thumbStyle() {
return {
right: "4px",
borderRadius: "5px",
backgroundColor: "#027be3",
width: "5px",
opacity: 0.75
};
},
barStyle() {
return {
right: "2px",
borderRadius: "9px",
backgroundColor: "#027be3",
width: "9px",
opacity: 0.2
};
}
},
async created() {
// 因为父组件内使用 `this.$nextTick(() => { })`
this.$nextTick(() => {
this.areaH =
document.body.clientHeight -
this.tabH -
this.$refs.dateDom.clientHeight +
"px";
});
},
```
3. 传值: 若父组件是在 `created` 内使用 `$nextTick`，其内部执行会晚于子组件的 `mounted` 方法。如在 `router-view` 嵌套的二级路由页面 `mounted` 晚于父组件 `$nextTick`
4. 效果: 页面部分区域滚动, 自定义滚动条, 兼容下拉刷新效果. 高度锁定了 `100%`, 因此页面滑动 `tabBar` 不会出现上下移动体验差情况. _若有可能, 通过各平台 jsApi 关闭 webview 的弹性效果_
```
import { ui as ddUI } from "dingtalk-jsapi";
mounted() {
// 锁定滑动, 自定义滑动区域
ddUI.webViewBounce.disable();
},
```
--~---~---~---~---~---~---~-----~---~---~---~---~---~---~---~--~-----~---~-----~---~---~---~---~---~---~---~--~-----~---~-----~---~---~--
_配置篇_
# plop
- 模板库在根目录下 `plop-templates`, 包含了组件, 页面和 `vuex`. `vue` 配置同于 `vue.json` 的 `snippets`. `vuex` 同于其 `modules` 下配置
- 配置 `plopfile.js` 文件, 并在 `package.json` 的 `scripts` 配置 `new`, 运行 `npm run new` 即可选择对应魔板和文件路径名称, 即可生成. _自动添加组件 `name`_
# 二级路由
1. `mob` 配置了 `tabBar` (使用路由模式: 不需要绑定 `active`. `vant` 跳转仅使用二级路由 `path` 即可), `admin` 配置了 `sideBar`, 由 `admin.js` 路由文件 reduce 处理后加载
2. 两个方式显示二级路由: `children` 内 `path` 前不添加 `/`, 则使用时需要 `一级path/二级路由path` 的格式; 若添加了 `/`, 则可直接使用其二级路由的 `path`,
3. `tabBar.js` 配合 `vant` 使用路由模式: 不需要绑定 `active`. `vant` 跳转仅使用二级路由 `path` 即可. `tab` 的活跃取决于当前绑定的路由, 不使用 `v-model`
# 关于 alias
1. 不为 src 下一级文件夹配置别名: 无太大实际意义; 为按需引入文件和文件夹配置, 如 `@import "~mixin"`, `m-background-image('~image/background-admin.png')`, ...
2. 关于路径前需要添加 `~` 标识说明: 配置了 webpack 输出路径为 `./`, _样式和图片文件_ 实质上是从编译包读取, 因此在 css 内引入需要添加, **注意: hmtl 内不能使用别名, 未进入编译**
# 关于环境变量
- 前言
1. 前言: `webpack` 运行会自动读取环境变量, 基于 `NodeJs`. `vue.config.js` 内使用 _ES5_ 语法不能通过 `import` 读取外部文件, 可用 `require`. (_process 不支持解构取值_)
2. 新建: 在 **根目录** 新建 `.env` 为全局环境变量, 运行 `package.json - scripts` 对应环境命令时, 先加载全局 .env, 再加载对应环境下变量, 同名变量后覆盖前
3. 命令: `serve / dev` 默认读取 `.env.development`, `build` 读取 `env.prod`. 若需要运行自定义环境, 在对应命令后追加 `--mode 对应环境配置文件名称`
4. 高级: `.local` 也可以加在指定模式的环境文件上，比如 .env.development.local 将会在 development 模式下被载入，且被 git 忽略 (配置秘钥会很有用)
- 使用
1. 格式: 变量命名格式为 `VUE_APP_*`, 取值通过 `process.evn.VUE_APP_*` 取对应的 key 即可. 修改变量需要重新 run 项目, webpack 重新读取, 否则不生效
2. 说明: 若变量只是在编译期间使用, 不限制格式. 如 vue.config.js 中 `ISANALYZ`. 若需要打到 dist 包内, 则必须符合 `VUE_APP_*`格式
3. 高级: 不同环境文件命令互不能加载: 配置代理 key 时, 需要所有在 build 下文件中赋值 `"", 空字符串`.
1. _未定义变量值为 undefined, 不为空字符串, 支持对象 (BOOL 不会转换, 会以字符串出现)_
2. `.env`是 `string` 化的值, 非合法 `json: string` 可使用 `includes` 函数, 单独效验使用正则
# 关于 proxy
- 配置: 如需要多个代理, `proxy` 为对象类型, 继续添加对应环境变量, 同理配置即可实现
```
// 本地代理
devServer: {
proxy: {
[env.VUE_APP_DEV_PROXY]: {
// target字段为空编译报错
target: env.VUE_APP_BASE_API,
changeOrigin: true,
pathRewrite: {
["^" + env.VUE_APP_DEV_PROXY]: ""
}
}
},
disableHostCheck: true
},
```
- 说明: 请求 target 和代理 key 配置在环境变量文件内, 若有关键不提交仓库信息, 可放入对应环境变量的 `.local` 文件内. _只需要修改开发环境文件中 `VUE_APP_DEV_PROXY` 即可_
```
// 开发代理
function _devProxy(url) {
return process.env.VUE_APP_DEV_PROXY + url;
}
```
# 关于 axios
不直接使用对 `axios` 的封装 `request`, 进行网络请求: thunk 包装调用, 在实际请求文件中导入 `request`. _对 axios 的封装是 create 新的对象_
- 使用
1. 请求格式 form/json 取决于 Content-Type：data 在 body, `详见 @/service/request:`. 发起请求不直接引用 `request`, 通过 `thunk` 包装调用
2. service 网络请求, 分文件模块化以管理不同业务请求. `request` 中新建了 axios 对象, 使用通过对应业务文件按需加载 (_不使用 `vue-router` 插件, 不在原型链添加 axios 对象_)
- 拦截器
1. 返回 reject: 未被捕获下会在控制台抛出报错: `Uncaught (in promise) Error: 错误信息`, _阻断代码继续执行, 不需要添加额外条件处理_
2. 捕捉 reject: 使用 `try...catch` 语法; 或在调用方法后追加 `.catch(err => {})` 进行捕获 (_被捕获后则控制台不会报错, 注意后续代码执行, 不会阻断代码继续执行_)
3. 实现 catch 捕获: 要注意添加 if (!res) return; (catch 后 await 得到的就是其返回的值, 没有返回即为 undefined). _res 的判断条件取决于 catch 返回抛出的值_
```
// 当前月事件分布 - 实现 catch 要注意添加 if (!res) return; (catch 后 await 得到的就是其返回的值, 没有返回即为 undefined)
async refreshMonthMark(params) {
const res = await monthRecordList(params).catch(() => false);
if (!res) return;
this.dateEvents = res.list.map(item => item.date.replace(/-/gi, "/"));
}
```
4. 调用封装的 `async` 方法, 内部没有返回 `Promise`, 是不支持 `await` 的: 如 `reLogin` 的实现, 内部返回 `Promise`, 通过 `bus` 实现监听. _在 `progress` 重置登录中 `bus` 抛出_
```
async created () {
await this.loginAuth(); // 登录验证: 返回Promise
this.inputCalendar(this.today) // 调用封装的async方法, 内部没有返回Promise, 是不支持await的: 若成功执行到reLogin后被挂起
await this.relogin() // 重试登录: 返回Promise => 每次登录失效的请求都会触发: 内部做一个throttle, 避免多个连续登录请求
this.inputCalendar(this.today) // 若收到登录失效回调: 刷新所有请求接口. 若正常请求成功, 被reLogin的await挂起
},
destroyed() {
bus.$vm.$off(bus.$sel.login_timeout);
}
// 登录过期重新登录: 每次登录失效的请求都会触发. throttle, 避免多个连续登录请求
relogin () {
return new Promise(resolve => {
const _reLogin = throttle(() => this._ddingLoginAuth(this, resolve), 300);
bus.$vm.$on(bus.$sel.login_timeout, () => _reLogin()); // 响应抛出登录失效
})
},
// 钉钉免登
loginAuth () {
if (this.token) return Promise.resolve();
return new Promise(resolve => {
const _this = this;
ready(function () {
_this._ddingLoginAuth(_this, resolve)
});
});
},
// 钉钉登录授权
_ddingLoginAuth (_this, resolve) {
runtime.permission.requestAuthCode({
corpId: process.env.VUE_APP_CorpId,
onSuccess: function (result) {
_this.loginIn({ authCode: result.code }).then(() => resolve());
}
});
},
```
- 提示效果 `@service/progres.js`
1. 「服务于通用而不是组件内部 」: 分平台全局提示 UI
2. 组件库优先于平台和设备: quasar 通用最优, 其次是优先移动端
```
import store from "@/store";
const progress = {};
const env = process.env;
const _this = Vue.prototype;
// 组件库优先于平台和设备: quasar 通用最优, 其次是优先移动端
const quasar = env.VUE_APP_PLATFORM.includes(env.VUE_APP_UI_QUASAR);
const vant = env.VUE_APP_PRIORITY !== "admin" && store?.state?.config?.native;
```
# 按需加载
- 配置差异和说明
1. 注意: cli4 配置 .babelrc 不识别, 需要在 babel.config.js 配置. _按需引入不需要全局引入 css: 配置成功引入会报错_
2. 编译: `presets`配置使用 cli 自带插件, 不需要使用 `es2015`. 若使用 `npm i babel-preset-es2015 -D` 依赖 (_-D 为 --save-dev, -S 进入 `dependencies`_)
3. 依赖: `element-ui` 依赖于 `babel-plugin-component`, `vant-ui` 依赖于 `babel-plugin-import`. _都是开发依赖_
4. 自动: `quasar` 通过 `vue add quasar` 自动添加. 关于 `quasar.variables.styl` 不能修改文件名称和路径: 因为 `loader` 对路径做了绑定和优化, 需要引入才会生效
**babel.config.js**
```
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
"@babel/syntax-dynamic-import" /*异步加载*/,
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
},
"element-ui"
],
[
"import",
{
libraryName: "vant",
libraryDirectory: "es",
style: false // 主题和样式重置设置 false 减少包体积
},
"vant"
],
[
"transform-imports",
{
quasar: {
transform: "quasar/dist/babel-transforms/imports.js",
preventFullImport: true
}
}
]
]
};
```
- 重置主题和样式
1. 全局样式: 在 `App.vue` 中导入通用和样式重置: `@import '~@/styles/loader/common'`, `@import '~@/styles/loader/browser.reset'`
2. 移动端使用: `navBar` 组件导入移动端重置: 禁用长按复制粘贴: 在 `navBar` 载入 `@import '~@/styles/loader/navBar.reset'`
3. `element-ui` 使用 `sass`, 需要下载 `node-sass` 和 `sass-laoder` 开发依赖, 新建一个后缀为 _.scss 而不是 .sass 的文件_, 在 main.js 引入, 不是 App.vue
4. `vant-ui` 使用 `less`, 需要下载 `less` 和 `less-laoder` 开发依赖, _配置: `loaderOptions` 自动导入、`main.js` 导入主题、`.babel.config.js` 减少包体积_
5. `vant-ui`在`main.js`中`import "vant/lib/index.less";`引入主题. 且在`vue.config.js`配置`loaderOptions`进行样式重置; 在`babel.config.js`配置`style: false`以减少包体积
6. `quasar` 通过 `vue add quasar` 添加 `quasar` 组件库, 配置手动加载组件, `styles` 预编译, `icons` 使用 `recommend`, 选择兼容 `IE 11`, 依赖和配置会自动注入
7. `quasar` _因不能修改 `quasar.variables.styl` 文件名和路径_, 因此配置主题重置于此文件, 并在 `mian,js` 添加编译以引入 (`quasar.styl` 和 `quasar` 通过配置后删除)
**main.js**
```
// 按需引入组件库 & 主题和样式重置
/* IFTRUE_ELEMENT */
import "@/config/loader/element.ui";
import "@/styles/loader/element.variables"; // 主题和样式重置
/* FITRUE_ELEMENT */
/* IFTRUE_VANT */
import "@/config/loader/vant.ui";
import "vant/lib/index.less"; // 需引入主题: 且在 vue.config.js 配置 loaderOptions 进行样式重置; babel.config.js 配置 style: false 以减少包体积
/* FITRUE_VANT */
/* IFTRUE_QUASAR */
import "@/config/loader/quasar.ui";
import "@/styles/quasar.variables"; // 备注: 不能修改文件名称和路径: loader对路径做了绑定和优化, 需要引入才会生效 (vue add quasar 自动添加)
/* FITRUE_QUASAR */
```
**vue.config.js**
```
// vant-ui 主题覆盖 less (条件编译) //
let vantVariables = {};
/* IFTRUE_MOB */
vantVariables = {
modifyVars: {
hack: `true; @import "~@/styles/loader/vant.variables";`
}
};
/* FITRUE_MOB */
// es5语法, 导出一份拷贝: 修改需要重新运行
module.exports = {
// css配置: 自动加载 loaderOptions 对 stylus 和 less 都无效
css: {
less: vantVariables
},
configureWebpack: config => {
// quasar: vue add quasar 自动添加
pluginOptions: {
quasar: {
importStrategy: "manual",
rtlSupport: false
}
},
transpileDependencies: ["quasar"]
}
}
```
# 骨架屏
- 依赖 `vue-skeleton-webpack-plugin` 注入骨架屏. 环境变量 `VUE_APP_SKELETON` 控制是否加载骨架屏
```
// vue骨架屏插件配置
if (env.VUE_APP_SKELETON) {
config.plugins.push(
new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
app: resolve("src/config/skeleton/conf")
}
},
minimize: true,
quiet: true
})
);
}
```
- 可通过 `https://github.com/famanoder/dps` 插件生成骨架屏, 将页面导入到 `@/config/skeleton` 即可; 或使用 `vue-content-loader` 组件库, _mob 可使用 vant 组件_
- 更建议使用全局 loading gif 替换, 将图片打包为 base64 注入到代码: 骨架屏是打包注入, 此时不能访问 window. _根据条件编译, 可选择优先平台. 移动端端优先_
```
// 骨架屏是打包注入, 此时不能访问 window: 移动端优先
const compile = process.env.VUE_APP_PRIORITY === "mob";
// 骨架屏: 全局记录挂在方法
window.mountApp = () => {
app.$mount("#app");
window.mountApp = null;
};
// 骨架屏：当js晚于css加载完成，那直接执行渲染
if (window.STYLE_READY || process.env.VUE_APP_SKELETON) {
window.mountApp?.();
}
/* 骨架屏 (触发器): 服务于 index.hml, 触发自动挂载 vue 对象 -- skeleton.css */
```
# 条件编译
- 前言: `require` 支持 if, `import` 需要使用 `const x = () => import('') / import('').then()`, 返回 `Promise`, 且返回值被 `default` 包裹 . _引入就被 build, 因此更优是条件编译_
- 初衷: 不同平台按需加载对应模块, 定制化情况下减少包体积 (没有条件编译会打入包)
```
// 配置条件编译: js-conditional-compile-loader 下 npm 和 cnpm 不能混用
config.module.rules.push({
test: /\.js\$/,
include: [resolve("src"), resolve("test")],
use: [{
loader: "js-conditional-compile-loader",
options: {
isDebug: process.env.NODE_ENV == "development", // optional, this is default
// 自定义 flag: process.env.npm_config_flag
VANT: env.VUE_APP_PLATFORM.includes(env.VUE_APP_UI_VANT),
ELEMENT: env.VUE_APP_PLATFORM.includes(env.VUE_APP_UI_ELEMENT),
QUASAR: env.VUE_APP_PLATFORM.includes(env.VUE_APP_UI_QUASAR),
}
}
]
});
```
- 使用: 默认配置了 DEBUG. 在 `vue.config.js` 添加了 `MOB` 和 `ADMIN` 和 `UNI` 编译条件, 通过 `VUE_APP_PLATFORM` 集合控制加载不同组件库 (_配置见 `按需加载`_)
```
/* IFDEBUG // 开发环境下远程调试vconsole
import "@/config/loader/vconsole";
FIDEBUG */
```
- 路由: 结合路由处理, 可为不同编译条件下包路由和体积不同, 做到真正的按需加载, 保密及性能
```
const indexAuto = "/index"; // 若有重定向, 使用目标页面, 避免由redirect触发router切换后报错
const indexMob = "/loginIn";
const indexAdmin = "/login";
let index = indexAuto;
import mob from "./modules/mob";
import admin from "./modules/admin";
import universal from "./modules/universal";
const compile = process.env.VUE_APP_PRIORITY;
const routes = [];
if (compile === "mob") {
index = indexMob;
routes.push(...mob);
} else if (compile === "admin") {
index = indexAdmin;
routes.push(...admin);
} else {
if (compile === "universal") {
routes.push(...universal);
} else {
routes.push(...mob, ...admin, ...universal);
}
}
```
# 代码处理
- 前言: npm i uglifyjs-webpack-plugin@1 需要使用低版本, 新版本不识别 const 关键字 - 报 npm audit fix
- 方案: 使用 TerserPlugin 插件, 配置代码压缩和去除注释和打印
```
// 代码压缩去除打印: npm i uglifyjs-webpack-plugin@1 需要使用低版本, 新版本不识别 const 关键字 - 报 npm audit fix
minimizer: [
new TerserPlugin({
cache: false,
sourceMap: false,
parallel: true, // 使用多进程并行运行来提高构建速度。默认并发运行数：os.cpus().length - 1。
terserOptions: {
compress: {
drop_debugger: true, // 去除 debugger
drop_console: true, // 生产环境自动删除 console
dead_code: true // 去除不可达代码: 如 if (false) { ... }
},
warnings: false
}
})
];
```
--~---~---~---~---~---~---~-----~---~---~---~---~---~---~---~--~-----~---~-----~---~---~---~---~---~---~---~--~-----~---~-----~---~---~--
_样式篇_
# 关于高分屏导致@media 和栅格布局异常说明和处理
- css 颜色透明度：rgba(0, 0, 0, 0.6) / rgba("#000", 0.6)
- 因为高分屏 `flexRem.js` 设置了 `viewport` 高分屏缩放比例方案. 导致 `@media` 无效, `-none、-xs、-sm、-md、-lg、-xl` 无效. `col` 和 `row` 可用, 但不支持分设备
- **通过 `vuex` 配置了 `config` 文件, `vuex` 状态同步更新, 支持响应式动态绑定, 在 `App.vue` 全局进行响应**
1. `native` 是否移动端设备: 在 `flexRem` 的 `resize` 响应式更新. flexRem 窗口 resize 同步更新 `store.commit("config/SET_IS_NATIVE", isNative());`
2. `realWid` 还原 `document.body.clienWidth` 真实的宽度. 在 `setFlexRem` 中同步 `store.commit("config/SET_REAL_WID", document.body.clientWidth * scale);`
3. 通过 `getters` 缓存和响应需要监听变更窗口的临界点, _实现了类 @media 效果_, 响应式尺寸配置型
```
// computed
const getters = {
// 缓存realWid是否需要变更布局
media: state => {
const docWid = state.config.realWid;
return {
mob: docWid <= 734,
pad: docWid > 734 && docWid <= 1080,
pc: docWid > 1080
};
}
};
```
- 通过绑定动态 `class` 对象, 实现类似 `@media` 的效果
1. 在页面顶层容器 `App.vue` 上绑定动态样式 `div(id="app" :class="classMedia"). 容器包含关系, 样式自然全局有效
2. 将动态样式绑定在计算属性 `computed` 内, 和 `App.vue` 容器绑定. 如下监听 `this.$store.getters` 对于 `@media`计算属性的变化
```
```
3. 在设置通用样式控制现显示与隐藏, 若需要为指定自定义 `@media` 重置样式, 将样式写入对应类下即可, **注意权重, 建议直接复制修改对应值**
```
// 通过vuex实现了高分屏兼容@media布局: 控制显示设备, only 当前设备显示, not 当前设备隐藏(_注意理解 `only` 的含义_)
.media-mob
.only-pad, .only-pc, .not-mob
display none
.media-pad
.only-mob, .only-pc, .not-pad
display none
.media-pc
.only-pad, .only-mob, .not-pc
display none
// 移动设备, 监听运行环境是否移动设备
.device-native
.only-web, .not-native
display none
.device-web
.only-native, .not-web
display none
```
4. 若需要为指定自定义 `@media` 重置样式, 将样式写入对应类下即可
1. 若在指定设备重置样式, 样式重置没有 `only` 和 `not`, 不同设备类下进行重置, 多个设备取并集即可. **注意权重, 建议直接复制然后修改对应值**
2. 仅仅在 `mob` 显示: `q-menu.only-mob`, 仅不在 `mob` 显示: `q-tabs.not-mob`. 不要取并集如 `q-tabs.only-pad.only-pc` 可能两个设备下都不会显示. _注意理解 `only` 的含义_
```
// 通过 vuex 实现了高分屏兼容@media 布局
.media-pc, .media-pad
.layout
&-content
&:first-child
left 25%
&:last-child
right 25%
.media-mob
.layout
&-content
width 100%
```
4. `device-web` 和 `device-native` 检测. 也同样添加了 `only` 和 `not` 处理. 样式重置可以取并集. _参考上面第2 和第1 的说明_
```
// 仅web环境下添加: q-btn 的 hover 效果
.device-web
.q-btn
transition all 0.5s
position relative
overflow hidden
.q-btn:before
content ''
position absolute
top 0
left 0
width 100%
height 100%
z-index 1
transition all 0.5s
opacity 1
transform translate(-105%, 0)
border-right-width 1px
border-right-style solid
border-right-color rgba(0, 0, 0, 1)
background-color rgba(0, 0, 0, 0.25)
.q-btn:hover:before
opacity 0
transform translate(0, 0)
```
# 高分屏方案和 rem 适配
1. 针对不同移动机型做高分屏方案, 兼容 pc 端 dpr 为 1, 兼容@media 无效问题
2. 通过 px2rem 自动将 px 转为 rem. `基准值 100, 基准字号 14`, 可根据设计图实际调整, 配置在 `.env` 文件
3. 响应 `onsize` 方法动态更新尺寸, 更新方法 `setFlexRem` 做了防抖和节流
```
// setFlexRem 防抖和节流
import { debounce, throttle } from "@/utils/optimize";
import bus from "@/config/event-bus";
// 节流: 初始化和 onresize 加载时
const initLayout = throttle(isEmit => {
setFlexRem();
if (isEmit) bus.$vm.$emit(bus.$sel.window_resize); // 响应式更新
}, 400);
// 初始化
initLayout();
// 兼容 onresize 改变窗口全局调用: 防抖
window.onresize = debounce(() => initLayout(true), 200);
// 响应式需要调用resize事件以响应加载时更新
window.onload = () => {
bus.$vm.$emit(bus.$sel.window_onload);
bus.$vm.$emit(bus.$sel.window_resize);
};
// bus.$vm.$on(bus.$sel.window_resize, () => { }); // 响应resize
// bus.$vm.$on(bus.$sel.window_onload, () => { }); // 响应onload
```
# 关于 iconfont
- iconfont 地址:: 注意在 css 后缀下**format**会被单独格式化为一行, stylus 导入后不识别这个语法 (less OK), 因此不独立配置 iconfont.css 文件
# 关于 stylus @import
1. 存在 css 预编译时，@impor 导入 css 不需要添加 css-loader; **使用 css loaderOptions 而不是 style-resources-loader 实现自动加载**
2. _使用 stylus 引用绝对路径需要在路径前添加 ~ ，支持别名. 否则路径不识别_ (不建议使用相对路径); **按需加载, 主题已自动加载 (`初次不生效多刷新下`)**
3. 按需引入 `@import '~styles/extend'`, 若使用 `@extend` 时, _导入必须在 `@extend` 之前_. mixin 不受影响. **@extend 导入后可直接使用已定义样式**
4. _转义_: `Unicode` 模式下多色图标是无效的, 若有需求可使用 `Font class` 或 `Symbol`. **`Unicode` 下若图标需要在 `data` 传递到标签, 将 `` 替换为 `\ue606` 即可**
# 关于 css loaderOptions
- 配置文件
```
// css 配置: 自动加载 loaderOptions 对 stylus 和 less 都无效
css: {
extract: true,
sourceMap: false,
loaderOptions: {
// 自动加载仅导入主题: less sass stylus 方式不相同 - 细节详见 README.md
stylus: {
import: "~@styles/loader/variables.styl"
}
}
},
```
# style-resources-loader
- 前言
1. 前言：css 配置 `loaderOptions` 对, less sass stylus 方式不相同. 以下是使用 `style-resource-loader`自动加载 css 整理
1. 方式：不要使用 npm i style-resources-loader —save-dev，使用 vue add style-resources-loader 命令, 按提示选择 css 预编译语言, 配置路径
1. 注意：style-resources-loader 是兼容加载 css 的，当作对应的文件传入方式即可（在 css 预编译文件内，支持直接 @import .css 文件，_不需要添加 css-loader_）
- 说明
1. css 做了 chunk, 每次打包都会更新, 每一个页面 css 文件都是独立的
2. 在 style 标签内导入非 .css 文件, 是不能直接使用的, 因为 @import 仅仅是导入, 没有预编译, 也不能触发 loader 进行转译.
3. css 预编译 @import 是不能直接使用的, 需要通过继承/混入为当前文件下的类. 或通过 style-resource-loader 自动加载, 对应的 loader 后转译可以使用: _仅用于导入配置变量_
4. 若 vue 页面有 scoped 和非 scoped 的 style 标签, loader 私有化后打入到文件会因为 scoped 原因带出现有 id 和不带 id 的两套样式, 导致 chunk 文件过大, 且大多是无效重复样式
- 使用
1. 全局样式写为 css 文件, 如 resetcss 通过 App.vue 内引入, 不加 scoped. 打包仅产生一个 app.css 文件, 且是全局有效的. _reset 其它组件库也使用这种方式_
2. _css 预编译文件按需引入_, 通过混合和继承产生类后使用.
3. 主题即值类型通过 style-resources-loader 自动加载引入, _主题即变量不会触发打包 chunk_
4. 不要在页面内 scoped 和非 scoped 的 style 标签. _最根本的解决方案还是: 1. 自动加载仅导入主题; 2. 全局样式写为.css 在 App.vue 导入; 3. 预编译文件按需要引入_
- 配置
```
// 自动加载主题: 使用 vue add style-resources-loader 添加插件方式
pluginOptions: {
"style-resources-loader": {
preProcessor: "stylus",
// 自动加载仅导入主题: 支持 .css 文件，不需要添加 css-loader - 细节详见 README.md
patterns: [path.resolve(__dirname, "src/theme/index.styl")]
}
},
```
--~---~---~---~---~---~---~-----~---~---~---~---~---~---~---~--~-----~---~-----~---~---~---~---~---~---~---~--~-----~---~-----~---~---~--