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。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 CDN Example</title>
<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<button @click="reverseMessage">Reverse Message</button>
</div>
<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>
</body>
</html>
说明：
- 通过 <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
<template>
<div>
{{ message }}
<button @click="reverseMessage">Reverse Message</button>
</div>
</template>
<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>
<style scoped>
button {
margin-top: 10px;
}
</style>
说明：
- 使用 <template> 定义模板。
- 使用 <script> 定义逻辑。
- 使用 <style> 定义样式（scoped 表示样式仅作用于当前组件）。
最后，做一下小结
Vue 3 可以直接使用，无论是通过 CDN 引入、npm 安装，还是使用 Vite 或 Vue CLI 创建项目。Vue 3 的设计非常灵活，适合从简单的页面到复杂的单页应用开发。以下是几种常见的使用场景：
- 快速原型开发：通过 CDN 引入 Vue 3。
- 现代前端项目：使用 Vite 或 Vue CLI 创建 Vue 3 项目。
- 组合式 API：利用 setup 和 ref 等特性组织代码。
好了，如果你还没有尝试过 Vue 3，可以从 CDN 引入开始，快速体验它的强大功能！
爱学习的小伙伴，关注不迷路哟～