vue3、tailwind.css、eventLoop事件循环、unocss原子化、函数式组件（h函数）、环境变量

tailwind.css官网 一个css框架 基于js写的css框架
https://www.tailwindcss.cn/
根据类名驱动css 跟bootstrap类似
vs安装插件 tailwind css（代码提示）
装包 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
生成配置文件 npx tailwindcss init -p
在src目录下新建tailwincss文件夹 index.css文件中分别放入
@tailwind base;
@tailwind components;
@tailwind utilities;
在main.ts中引入 import './tailwinCss/index.css'

eventLoop
异步任务分为宏任务微任务
宏任务：script整体代码、setTimeout、UI交互、ajax
微任务：Promise 

运行机制
所有同步任务会在主进程形成一个执行栈、主线程之外还有一个任务队列，这个任务队列执行的是异步任务，执行完当前宏任务中的所有微任务再去执行下一个宏任务，如此循环

unocss原子化
装包 cnpm i -S unocss
vite.config.ts 
导入 import unoCss from 'unocss/vite'
plugins里
unoCss({
    rules: [
      ['flex', {display: 'flex'}],
      ['red', {color: 'red'}]
    ]
  })
main.ts里
import 'uno.css'
使用： 在项目中类名加定义好的flex red就生效了
（支持正则）[正则,()=>{}]
 组合式 
 unoCss({
    rules: [
      ['flex', {display: 'flex'}],
      ['red', {color: 'red'}]
    ],
    shortcuts: {
      cike: ['flex', 'red']
    }
  })
  
  函数式组件 
  优势：跳过了模板的编译
  三种书写风格
  template 模板风格
  tsx dom混合js  
  函数式组件 一个个函数
  let render = () => {
  return h('div, {}, [
  h('span), {}, '1')
  ]
  )}
  h函数第一个蚕食是创建的节点，第二个蚕食是节点的属性，第三个参数是节点的内容
  const Btn = () => {
  return h('button', {
    class: '',
    id: '1',
    onClick: () => {console.log('click')}
  }, 'click')
}
模板中  <Btn></Btn>
此时这个函数式组件就做为了一个组件

环境变量
作用：让开发者区分不同的运行环境

BASE_URL 部署时的URL前缀
MODE 运行模式
DEV 开发环境
PROD 是否是build环境
SSR 是否是SSR服务端渲染模式

在根目录下新建
.env.development 开发模式配置
.env.production 生产环境配置
package.json中  "dev": "vite --mode development"
此时运行npm run dev运行的就是开发环境