安装

基于 vite 创建

vite是新一代前端构建工具

轻量快速的热重载（HMR），能实现极速的服务启动
对 TypeScript、JSX、CSS等支持开箱即用
真正的按需编译，不再等待整个应用编译完成

安装18.0或者更高版本的 Node.js

npm create vue@latest

Need to install the following packages:
create-vue@3.9.2
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue3_yhq
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Prettier 用于代码格式化？ ... 否 / 是

正在构建项目 D:\phpstudy_pro\vue3_yhq...

项目构建完成，可执行以下命令：

  cd vue3_yhq
  npm install
  npm run dev

npm notice
npm notice New minor version of npm available! 10.2.3 -> 10.5.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.0
npm notice Run npm install -g npm@10.5.0 to update!
npm notice

安装依赖

npm i

执行完之后会生成node_modules

目录结构

node_modules：项目依赖包
public：静态资源的公共目录
src：源代码文件
index.html：应用程序的入口文件

创建应用

应用实例

每个 Vue 应用都是通过createApp函数创建一个新的应用实例：

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

根组件

传入createApp的对象实际上是一个组件，每个应用都需要一个根组件，其他组件将作为其子组件。

如果使用的是单文件组件，可以直接从另一个文件中导入根组件。

// 引入createApp用于创建应用
import {createApp} from 'vue'

// 引入App根组件
import App from './App.vue'

createApp(App).mount('#app')

挂载应用

应用实例必须在调用.mount()方法后才会渲染出来。该方法接收一个容器参数，可以是一个实际的DOM元素或是一个CSS选择器字符串。

<div id="app"></div>

app.mount('#app')

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

.mount()方法应该始终在整个应用配置和资源注册完成后被调用。同时注意，不同于其他资源注册方法，它的返回值是根组件实例而非是应用实例。

核心语法

OptionsAPI与CompositionAPI

vue2的API设计是options（配置）风格的。
vue3的API设计是composition（组合）风格的。

OptionsAPI

Vue2中常常会需要在特定的区域（data，methods，watch，computed...）编写负责相同功能的代码。

Vue3核心技术

安装