Vue

 

2024-02-18

脚手架

create-vite

create-vite

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

Terminal window
1
npm create vite@latest
2
pnpm create vite
3
bun create vite

create-vue

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

Terminal window
1
npm create vue@latest

create-preset

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

Terminal window
1
npm create preset
2


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

初始化

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

1
import { createApp } from 'vue'
2
import App from './App.vue'
3
import router from './router'
4
import store from './store'
5
import pluginA from 'pluginA'
6
import pluginB from 'pluginB'
7
import pluginC from 'pluginC'
8


9
createApp(App)
10
  .use(store)
11
  .use(router)
12
  .use(pluginA)
13
  .use(pluginB)
14
  .use(pluginC)
15
  .mount('#app')

生命周期

Vue 2 生命周期Vue 3 生命周期执行时间说明
beforeCreatesetup组件创建前执行
createdsetup组件创建后执行
beforeMountonBeforeMount组件挂载到节点上之前执行
mountedonMounted组件挂载完成后执行
beforeUpdateonBeforeUpdate组件更新之前执行
updatedonUpdated组件更新完成之后执行
beforeDestroyonBeforeUnmount组件卸载之前执行
destroyedonUnmounted组件卸载完成后执行
errorCapturedonErrorCaptured当捕获一个来自子孙组件的异常时激活钩子函数

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

1
import { defineComponent, onBeforeMount, onMounted } from 'vue'
2


3
export default defineComponent({
4
  setup() {
5
    console.log(1)
6


7
    onBeforeMount(() => {
8
      console.log(2)
9
    })
10


11
    onMounted(() => {
12
      console.log(3)
13
    })
14


15
    console.log(4)
16
  },
17
})

插件

常识

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