Tailwind CSS

Tailwind CSS 是一个高度可定制的 CSS 框架。

主要特点：

  • 实用优先的类名体系：它提供了大量的预定义类名，用于快速构建页面布局、设置文本样式、控制颜色、添加响应式设计等。例如，可以使用 bg-blue-500 来设置背景颜色为蓝色，text-lg 来设置较大的文本大小，flex 和 justify-between 等类名来快速实现 flex 布局的各种样式。
  • 响应式设计：内置了响应式设计的类名，可以轻松实现不同屏幕尺寸下的适配。比如 md:flex 表示在中等屏幕尺寸及以上显示为 flex 布局，sm:hidden 表示在小屏幕尺寸下隐藏元素。
  • 高度可定制：可以根据项目的具体需求进行高度定制。可以选择要包含的功能、颜色、字体大小等，从而减小生成的 CSS 文件大小，提高性能。

Read More

vue选项中name属性的作用

  1. 递归组件运用（指组件自身组件调用自身组件）
  2. keep-alive包裹动态组件时，会缓存不活动的组件实例，会出现include和exclude属性，包含或者排除指定name组件
  3. vue-tools插件调试，组件树中显示name

vue-cli4+中配置可选链操作符兼容

转载链接：https://www.cnblogs.com/zhangrenjie/p/15015684.html
延申阅读：可选链操作符、空值运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 安装依赖  npm install  @babel/plugin-proposal-optional-chaining -S
// @babel/plugin-proposal-nullish-coalescing-operator -S
// 在babel.config.js中  的 plugins中添加 "@babel/plugin-proposal-optional-chaining"

module.exports = {
  plugins: [
    '@babel/plugin-proposal-optional-chaining',  //可选链 ?.
    '@babel/plugin-proposal-nullish-coalescing-operator'  //空值合并 ??
  ]
}

// template中使用
// 插件开发
export default {
  install (Vue) {
    const optionalChaining = (obj, ...rest) => {
      let temp = obj
      for(const key in rest) {
        temp = temp?.[rest[key]]
      }
      return temp
    }
    vue.prototype.$chaining= optionalChaining
  }
}


// main.js
import Vue from 'vue'
import Chaining from 'chaining'

Vue.use(Chaining)

// *.vue
<template>
  <div>{{$$(obj, 'first', 'second') }}</div>
</template>