Web 前端开发，如何使用 Vue 呢，当然我这里说的是使用 Vue3。

你是否会有此疑问，Vue3 可否直接使用呢？是的，Vue 3 可以直接使用！Vue 3 是一个现代化的 JavaScript 框架，设计得非常轻量且易于集成。你可以通过多种方式直接使用 Vue 3，无论是简单的 HTML 页面还是复杂的单页应用（SPA），根据个人需求选择。

下面我们一起看看直接使用 Vue 3 的方式：

1. 通过 CDN 引入 Vue 3

如果你只是想快速尝试 Vue 3，可以直接在 HTML 文件中通过 CDN 引入 Vue 3。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>

// 使用 Vue 3

const { createApp } = Vue;

createApp({

data() {

return {

message: 'Hello Vue 3!'

};

},

methods: {

reverseMessage() {

this.message = this.message.split('').reverse().join('');

}

}

}).mount('#app');

</script>

说明：

• 通过 <script> 标签引入 Vue 3 的 CDN 文件。
• 使用 createApp 创建 Vue 实例，并将其挂载到 DOM 元素（如 #app）。
• 这是一个最简单的 Vue 3 示例，适合快速原型开发。

2. 通过 npm 安装 Vue 3

如果你正在使用构建工具（如 Vite 或 Webpack），可以通过 npm 安装 Vue 3，并在项目中直接使用。

安装 Vue 3

npm install vue@next

在项目中使用 Vue 3

// main.js

import { createApp } from 'vue';

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

// 创建 Vue 应用并挂载到 #app

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

说明：

• 使用 createApp 创建 Vue 应用。
• 将根组件（如 App.vue）挂载到 DOM 元素（如 #app）。

3. 使用 Vite 快速创建 Vue 3 项目

Vite 是一个现代化的前端构建工具，支持 Vue 3 的快速开发。

创建 Vue 3 项目

npm create vite@latest my-vue-app --template vue

启动开发服务器

cd my-vue-app

npm install

npm run dev

说明：

• Vite 会自动生成一个 Vue 3 项目结构。
• 你可以在 src/App.vue 中编写 Vue 组件。
• 开发服务器支持热重载（HMR），修改代码后页面会自动更新。

4. 使用 Vue CLI 创建 Vue 3 项目

Vue CLI 是 Vue 官方提供的脚手架工具，支持创建 Vue 3 项目。

安装 Vue CLI

npm install -g @vue/cli

创建 Vue 3 项目

vue create my-vue-app

• 在创建项目时，选择 Vue 3 作为默认版本。

启动开发服务器

cd my-vue-app

npm run serve

5. 直接使用 Vue 3 的组合式 API

Vue 3 引入了 组合式 API（Composition API），可以更灵活地组织代码。

示例

import { createApp, ref } from 'vue';

createApp({

setup() {

const message = ref('Hello Vue 3!');

const reverseMessage = () => {

message.value = message.value.split('').reverse().join('');

};

return {

message,

reverseMessage

};

}

}).mount('#app');

说明：

• 使用 ref 创建响应式数据。
• 在 setup 函数中定义逻辑，并返回需要暴露给模板的数据和方法。

6. 直接使用 Vue 3 的单文件组件（SFC）

Vue 3 支持单文件组件（.vue 文件），可以将模板、逻辑和样式封装在一个文件中。

示例：App.vue

<script>

import { ref } from 'vue';

export default {

setup() {

const message = ref('Hello Vue 3!');

const reverseMessage = () => {

message.value = message.value.split('').reverse().join('');

};

return {

message,

reverseMessage

};

}

};

</script>

说明：

• 使用