vue3 支持 jsx

1. 安装依赖

pnpm add @vitejs/plugin-vue-jsx

2. vite.config.ts 中引用插件

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"
// https://vitejs.dev/config/

export default defineConfig({
  plugins: [
    vue(),
    vueJsx({
      transformOn: true,
      mergeProps: true,
    })
  ],
})

3. 使用 jsx

import { defineComponent, ref } from "vue"
import "./App.scss"

const App = defineComponent({
  setup() {
    const count = ref(0)
    const onClick = () => {
      count.value++
    }

    return () => (
      <>
        <div class='page'>
          {count.value}
        </div>
        <button onClick={onClick}>增加</button>
      </>
    )
  },
})

export default App

CSS Module

任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件

/* example.module.css */
.red {
  color: red;
}

import classes from './example.module.css'
document.getElementById('foo').className = classes.red

手机调试 H5

Chrome 远程调试手机页面

1. 用 usb 连接手机和电脑
2. 手机开启 usb 调试
3. 手机打开要调试的页面 (ip地址 => http://192.x.x.1:端口号/)
   1. 手机浏览器输入 http://192.168.3.37:3000 访问我电脑上的网页
4. 打开 edge://inspect 或者 chrome://inspect/#devices 页面, 等待一会, 找到对应页面

vue-router 一个路由多个视图

应用场景: 可以对其中路由做动画

// routes.ts
export const routes: RouteRecordRaw[] = [
  { path: "/", redirect: "/welcome" },
  {
    path: "/welcome",
    component: Welcome,
    children: [
      { path: "", redirect: "/welcome/one" },
      // components 可以用对象的方式
      { path: "one", components: { main: First, footer: FirstActions } },
      { path: "two", components: { main: Second, footer: SecondActions } },
      { path: "three", components: { main: Third, footer: ThirdActions } },
      { path: "four", components: { main: Forth, footer: ForthActions } },
    ],
  }
]

// 视图使用
import { defineComponent, h, Transition, VNode } from 'vue';
import { RouteLocationNormalizedLoaded, RouterView } from 'vue-router';
import s from './Welcome.module.scss'
export const Welcome = defineComponent({
  setup: (props, context) => {
    return () => <div class={s.wrapper}>
      <header>
        <h1>xx记账</h1>
      </header>
      <main class={s.main}>
        // 使用对应的 name
        <RouterView name="main">
        </RouterView>
      </main>
      <footer>
        <RouterView name="footer" />
      </footer>
    </div>
  }
})

SvgSprite svg 雪碧图

useSwipe 滑动 hooks

import { computed, onMounted, onUnmounted, ref, Ref } from "vue"
type Point = { x: number; y: number }
export const useSwipe = (element: Ref<HTMLElement | null>) => {
  const start = ref<Point | null>(null)
  const end = ref<Point | null>(null)
  const swiping = ref(false)

  // 可以设置距离多少再移动
  const distance = computed(() => {
    if (!end.value || !start.value) return null
    return {
      x: end.value?.x - start.value?.x,
      y: end.value?.y - start.value?.y,
    }
  })
  const direction = computed(() => {
    if (!swiping) return null
    if (!distance.value) return null
    const { x, y } = distance.value
    if (Math.abs(x) > Math.abs(y)) {
      return x > 0 ? "right" : "left"
    } else {
      return y > 0 ? "down" : "up"
    }
  })

  const onStart = (e: TouchEvent) => {
    const { clientX, clientY } = e.touches[0]
    start.value = {
      x: clientX,
      y: clientY,
    }
    end.value = null
    swiping.value = true
  }

  const onMove = (e: TouchEvent) => {
    const { clientX, clientY } = e.touches[0]
    if (swiping.value) {
      end.value = {
        x: clientX,
        y: clientY,
      }
    }
  }

  const onEnd = (e: TouchEvent) => {
    swiping.value = false
    start.value = null
    end.value = null
  }

  onMounted(() => {
    if (!element.value) return null
    element.value.addEventListener("touchstart", onStart)
    element.value.addEventListener("touchmove", onMove)
    element.value.addEventListener("touchend", onEnd)
  })

  onUnmounted(() => {
    if (!element.value) return null
    element.value.removeEventListener("touchstart", onStart)
    element.value.removeEventListener("touchmove", onMove)
    element.value.removeEventListener("touchend", onEnd)
  })

  return {
    swiping,
    distance,
    direction,
  }
}

组件使用插槽(slots) 和 属性 props

// slots 使用
import { defineComponent } from "vue"
import s from "./button.module.scss"

interface ButtonProps {
  onClick: (e: MouseEvent) => void
}

export const Button = defineComponent<ButtonProps>({
  inheritAttrs: false, // 不让 vue 帮我自动继承属性
  // 插槽 context.slots
  setup: (props, context) => {
    return () => <button class={s.button}>{context.slots.default?.()}</button>
  },
})

// 具名插槽
import { defineComponent, PropType } from "vue"
import s from "NavBar.module.scss"
  
export const NavBar = defineComponent({
  setup: (props, context) => {
    const { slots } = context
    return () => (
      <div class={s.navbar}>
        <span class={s.icon_wrapper}>{slots.icon?.()}</span>
        <span class={s.title_wrapper}>{slots.default?.()}</span>
      </div>
    )
  },
})

// props 使用
import { defineComponent, PropType } from "vue"
import s from "./Icon.module.scss"

export type IconNames = "add" | "chart" | "clock" | "cloud"

export const Icon = defineComponent({
  // inheritAttrs: false,
  props: {
    name: {
      type: String as PropType<IconNames>,
      required: true,
    }
  },
  setup: (props) => {
    const { name } = props
    return () => (
      <svg class={s.icon}>
        <use xlinkHref={"#" + name}></use>
      </svg>
    )
  },
})

表情 搜索 emoji full list

• [表情](Full Emoji List, v15.0 (unicode.org))
• '\u{1F600}'

reactive & toRaw

// 创建响应式数据
const formData = reactive({
  name: '',
  sign: ''
})
const onSubmit = (e: Event) => {
  e.preventDefault()
  console.log("proxy", formData) // proxy
  console.log("proxy", toRaw(formData)) // json
}

// v-model 使用
<input v-model={formData.name} class={[s.formItem, s.input, s.error]}></input>