Vue 3 是一个流行的前端框架，用于构建用户界面和单页应用程序。以下是一个关于 Vue 3 的完整教程，涵盖了基础知识、组件、路由、状态管理等内容。
1. 环境搭建
首先，你需要安装 Node.js 和 npm（Node 包管理器）。然后，你可以使用 Vue CLI 来创建一个新的 Vue 3 项目。
npm install -g @vue/cli
vue create my-vue3-app
在创建过程中，选择 Vue 3 配置。
2. 项目结构
创建项目后，你会看到以下结构：
my-vue3-app/
├── node_modules/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ ├── main.js
├── package.json
└── ...
3. Vue 3 基础
3.1 创建组件
在 src/components 目录下创建一个新的组件 HelloWorld.vue：
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
props: {
msg: String
}
}
</script>
<style scoped>
h1 {
color: blue;
}
</style>
3.2 使用组件
在 App.vue 中使用 HelloWorld 组件：
<template>
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld
}
}
</script>
4. 响应式数据
Vue 3 引入了 Composition API，可以更灵活地管理状态。
<template>
<div>
<input v-model="message" placeholder="Type something..."/>
<p>{{ message }}</p>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const message = ref('')
return {
message
}
}
}
</script>
5. 路由
使用 Vue Router 来管理应用的路由。
npm install vue-router@4
在 src/router/index.js 中配置路由：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
在 main.js 中引入路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
6. 状态管理
使用 Vuex 来管理全局状态。
npm install vuex@next
在 src/store/index.js 中配置 Vuex：
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
count: 0
}
},
mutations: {
increment(state) {
state.count++
}
}
})
export default store
在 main.js 中引入 Vuex：
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#app')
7. 组件间通信
7.1 父子组件通信
使用 props 和事件：
<!-- Parent.vue -->
<template>
<Child @childEvent="handleChildEvent"/>
</template>
<script>
import Child from './Child.vue'
export default {
components: { Child },
methods: {
handleChildEvent(data) {
console.log(data)
}
}
}
</script>
<!-- Child.vue -->
<template>
<button @click="sendEvent">Click me</button>
</template>
<script>
export default {
methods: {
sendEvent() {
this.$emit('childEvent', 'Hello from Child')
}
}
}
</script>
7.2 兄弟组件通信
可以使用 Vuex 或 Event Bus。
8. 组合 API
使用组合 API 来组织逻辑：
import { ref } from 'vue'
export function useCounter() {
const count = ref(0)
const increment = () => {
count.value++
}
return { count, increment }
}
9. 插件和库
你可以使用许多插件和库来扩展 Vue 3 的功能，例如：
- Vue Router
- Vuex
- Axios（用于 HTTP 请求）
- Vuelidate（用于表单验证）
10. 部署
构建项目并部署到服务器：
npm run build
将 dist 文件夹中的内容上传到你的服务器。
结语
以上是 Vue 3 的一个完整教程的概述。你可以根据自己的需求深入学习每个部分，查阅官方文档和社区资源，以获得更多的知识和实践经验。