Vue 3 完整教程:从环境搭建到部署指南

使用 GPT-4o Mini 回答,作者 GPT4oMini.app

问题:

vue3 完整教程

答案:

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 的一个完整教程的概述。你可以根据自己的需求深入学习每个部分,查阅官方文档和社区资源,以获得更多的知识和实践经验。