Vue 3 入门指南

1. 什么是 Vue 3？

Vue.js 是一个用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue 设计之初就是为了能逐步采用。它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。Vue 3 是 Vue 的最新版本，提供了更高的性能、增强的 TypeScript 支持和新的功能如组合式 API。

2. 安装 Vue 3

要开始使用 Vue 3，首先需要安装 Node.js 和 npm（Node 包管理器）。安装完成后，可以使用以下命令安装 Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过以下命令创建一个新的 Vue 项目：

vue create my-vue3-app

然后选择默认配置或根据需要进行配置。创建完成后，进入项目目录并启动开发服务器：

cd my-vue3-app
npm run serve

3. Vue 3 项目结构

一个典型的 Vue 3 项目结构如下：

my-vue3-app/
├── node_modules/
├── public/
│   ├── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.js
├── package.json

• public/index.html：应用的主 HTML 文件。
• src/App.vue：根组件。
• src/main.js：应用的入口文件。

4. 创建第一个 Vue 组件

在 src/components 目录下创建一个新组件 HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style scoped>
.hello {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}
</style>

然后在 App.vue 中引入并使用该组件：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5. 组合式 API

Vue 3 引入了组合式 API，使得我们能够更好地组织逻辑和复用代码。以下是一个简单的示例：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  }
}
</script>

6. Vue Router 和 Vuex

• Vue Router：用于处理单页面应用的路由。安装 Vue Router：

  npm install vue-router@next

  配置路由：

  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
  

• Vuex：用于状态管理。安装 Vuex：

  npm install vuex@next

  配置 Vuex：

  import { createStore } from 'vuex'
  
  const store = createStore({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++
      }
    },
    actions: {
      increment({ commit }) {
        commit('increment')
      }
    }
  })
  
  export default store
  

7. 部署应用

构建项目：

npm run build

构建完成后，生成的文件会放在 dist 目录下，可以将其部署到任何静态文件服务器上，如 Nginx 或 Apache。

总结

通过以上内容，你已经对 Vue 3 的基本使用有了初步了解。Vue 3 强大的功能和灵活的设计使得它非常适合用于构建现代的前端应用程序。希望你能够通过实践，进一步掌握和应用 Vue 3。