Vue

脚手架 §

create-vite §

create-vite 是 Vite 官方推荐的一个脚手架工具，可以创建基于 Vite 的不同技术栈基础模板，支持通过 npm、pnpm 和 bun 进行安装：

npm create vite@latest
pnpm create vite
bun create vite

create-vue §

create-vue 是 Vue 官方推出的一个新脚手架，用以代替基于 Webpack 的 Vue CLI ，它可以创建基于 Vite 的 Vue 基础模板。

npm create vue@latest

create-preset §

create-preset 提供快速创建预设项目的能力，也可以用来管理的常用项目配置。

npm create preset
 
# 创建基于 Vite + TypeScript + Vue 3 + Pinia 的项目启动模板
preset init hello-vue3 --template vue3-ts-vite
cd hello-vue3
npm install
npm run dev

初始化 §

通过 createApp 执行 Vue 的初始化，另外 Vue 生态、外部插件、 UI 框架，统一都是由 use() 进行激活：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import pluginA from 'pluginA'
import pluginB from 'pluginB'
import pluginC from 'pluginC'
 
createApp(App)
  .use(store)
  .use(router)
  .use(pluginA)
  .use(pluginB)
  .use(pluginC)
  .mount('#app')

生命周期 §

Vue 2 生命周期	Vue 3 生命周期	执行时间说明
beforeCreate	setup	组件创建前执行
created	setup	组件创建后执行
beforeMount	onBeforeMount	组件挂载到节点上之前执行
mounted	onMounted	组件挂载完成后执行
beforeUpdate	onBeforeUpdate	组件更新之前执行
updated	onUpdated	组件更新完成之后执行
beforeDestroy	onBeforeUnmount	组件卸载之前执行
destroyed	onUnmounted	组件卸载完成后执行
errorCaptured	onErrorCaptured	当捕获一个来自子孙组件的异常时激活钩子函数

在 Vue 3 的 Composition API 写法里，每个生命周期函数都要先导入才可以使用，并且所有生命周期函数统一放在 setup 里运行：

import { defineComponent, onBeforeMount, onMounted } from 'vue'
 
export default defineComponent({
  setup() {
    console.log(1)
 
    onBeforeMount(() => {
      console.log(2)
    })
 
    onMounted(() => {
      console.log(3)
    })
 
    console.log(4)
  },
})

插件 §

• Chrome 插件：插件
• VS Code 插件：插件

常识 §

• SFC：以 .vue 为后缀的单文件组件（Single-File Components），即在一个文件里面编写 HTML、CSS 和 JS 代码。
• 文本插值：{{ msg }}，即在 Template 中插入变量
• HTML 属性绑定 v-bind：v-bind:id="myId"，简写 :id="myId，同名简写 :myId