Vue3入门教程：从零开始搭建你的第一个Vue3项目

本文详细介绍了如何从零开始搭建第一个Vue3项目，包括Vue3的安装、项目创建、组件使用以及路由与状态管理的配置。文章还涵盖了Vue3的响应式原理和Composition API的使用方法。此外，提供了项目部署和调试的实用技巧。

了解Vue3的基本概念

Vue.js 是一个用于构建用户界面的渐进式框架。Vue的设计目标是尽量保持核心库的简洁，因此它采用了模块化设计，将功能划分为一系列可选的插件。Vue3是Vue.js的最新版本，它在性能、API一致性、TypeScript支持等方面做了许多改进和优化。

Vue3与Vue2的区别

Vue3相比Vue2做了很多改进，包括但不限于：

• 更快的性能：Vue3通过Tree Shaking、SSR优化、更短的更新时间等措施提升了性能。
• 更简洁的API：Vue3对API进行了简化，移除了旧版本中的一些不必要的选项，如生命周期钩子的简化。
• Composition API：引入了新的组合式API，可以更灵活地组织代码。
• 更强的TypeScript支持：Vue3对TypeScript有更好的支持，提供了更好的类型推断和更强大的类型系统。
• 更好的模板解析器：Vue3的模板解析器更快且更小，解析速度提高了30%。
• 更好的兼容性：Vue3对ES模块和ES2015+语法有更好的支持。

安装Node.js和Vue CLI

首先安装Node.js。Vue CLI是Vue.js的官方脚手架工具，可以使用它来快速创建Vue项目。Vue CLI需要Node.js环境，所以请确保已经安装了Node.js。

1. 访问Node.js官方网站，下载并安装最新版本的Node.js。
2. 安装Vue CLI。打开命令行工具，输入以下命令来全局安装Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过vue --version命令检查Vue CLI是否安装成功。

创建一个Vue3项目

使用Vue CLI创建一个Vue3项目：

1. 打开命令行工具，进入你想要创建项目的目录，然后输入以下命令来创建一个新的Vue3项目：

vue create my-vue3-project

1. 在创建项目的过程中，会弹出一个选项让你选择预设的项目模板。建议选择Manually select features，这样你可以选择创建Vue3项目。

2. 选择Vue3后，继续选择其他你需要的特性，如Babel、Router、Vuex等。

3. 创建完成后，进入项目目录，启动开发服务器：

```bash.
cd my-vue3-project
npm run serve

此时，你的第一个Vue3项目就已经搭建完成了，并且可以在本地的`http://localhost:8080/`地址访问。

## Vue3项目结构与基础组件

### 项目文件结构解析

当使用Vue CLI创建一个Vue3项目后，项目结构大致如下：

my-vue3-project/
│
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ ├── main.js
│ └── router/
│ └── index.js
├── .browserslistrc
├── .editorconfig
├── .env
├── .gitignore
├── babel.config.js
├── jest.config.js
├── package.json
└── README.md

- `node_modules/`：存放第三方模块包。
- `public/`：存放静态资源，如`index.html`。
- `src/`：存放项目的源码。
  - `assets/`：存放静态资源，如图片。
  - `components/`：存放自定义组件。
  - `App.vue`：项目的根组件。
  - `main.js`：项目的入口文件。
  - `router/`：存放路由配置文件。
- 其他配置文件：如`.browserslistrc`，`.editorconfig`，`package.json`等。

`main.js`示例代码：

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

App.vue示例代码：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

创建和使用组件

Vue的组件是构建用户界面的基本单元。一个Vue组件包括三个主要部分：模板（HTML）、脚本（JavaScript）和样式（CSS）。下面是一个简单的Vue组件的例子：

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

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

<style scoped>
h1 {
  color: #42b983;
}
</style>

在src/components/目录下创建一个名为HelloWorld.vue的文件，将上述代码写入文件中。

在App.vue中引入并使用这个组件：

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

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

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

父子组件通信

父组件可以通过props向子组件传递数据，子组件可以通过$emit方法向父组件传递数据。下面是一个例子：

在父组件App.vue中：

<template>
  <div id="app">
    <ChildComponent message="Hello from parent"/>
  </div>
</template>

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

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

在子组件ChildComponent.vue中：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

如果子组件需要向父组件传递数据，可以在子组件中使用this.$emit方法：

<template>
  <div>
    <button @click="sendMessage">Send message</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  },
  methods: {
    sendMessage() {
      this.$emit('custom-event', 'Hello from child')
    }
  }
}
</script>

在父组件中监听这个事件：

<template>
  <div id="app">
    <ChildComponent @custom-event="handleMessage" message="Hello from parent"/>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(data) {
      console.log(data) // 输出 "Hello from child"
    }
  }
}
</script>

使用Props传递数据

Props是Vue组件之间的通信的一种方式，父组件可以将数据传递给子组件。下面是一个例子：

在父组件App.vue中：

<template>
  <div id="app">
    <ChildComponent message="Hello from parent"/>
  </div>
</template>

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

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

在子组件ChildComponent.vue中：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

通过在父组件中传递props的方式，子组件可以访问到父组件传递的数据。

响应式系统介绍

在Vue3中，响应式系统主要通过Proxy对象实现。Proxy可以用来拦截和自定义一些操作。例如，在Vue3中，可以通过Proxy来监听数据的变化，当数据发生变化时，Vue会自动更新视图。

使用ref和reactive创建响应式对象

在Vue3中，可以通过ref和reactive来创建响应式对象。

ref：用于创建一个包含值的响应式对象，主要用于基本类型的数据。

import { ref } from 'vue'

const count = ref(0)

reactive：用于将普通对象转换为响应式对象，主要用于复杂的数据结构（如对象或数组）。

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

注意：ref和reactive创建的对象是不同的，ref创建的对象包含一个.value属性，而reactive创建的对象直接就是一个响应式对象。

监听数据变化

在Vue3中，可以使用watch来监听数据的变化。watch可以监听ref或reactive创建的响应式数据。

import { ref, watch } from 'vue'

const count = ref(0)

watch(() => count.value, (newValue, oldValue) => {
  console.log('count changed', newValue, oldValue)
})

count.value++

响应式数据的生命周期

响应式数据的生命周期主要涉及到数据的创建、读取、修改和销毁。

• 数据创建：数据被初始化为一个响应式对象。
• 数据读取：当数据被访问时，会被标记为“访问”。
• 数据修改：当数据被修改时，视图会相应地更新。
• 数据销毁：当组件被卸载时，响应式数据会被销毁。

通常来说，开发者不需要直接关心响应式数据的生命周期，Vue会自动处理这些细节。

了解Composition API的基本概念

Composition API是Vue3引入的一种新的API集合，它的目标是提供一个更灵活、可复用的API方案。Composition API的核心是setup函数和ref、reactive等响应式API。

使用setup函数

setup函数是Composition API的核心，它是每一个Vue组件的入口。在setup函数内部，可以访问到props和context（包含attrs、slots、emit）。

import { ref } from 'vue'

export default {
  props: ['message'],
  setup(props) {
    const count = ref(0)
    return { count }
  }
}

在上述示例中，props参数包含了从父组件传递过来的数据，count是一个ref创建的响应式对象，最后返回的对象会成为组件的响应式状态和方法。

创建逻辑复用的Composition API

Composition API的一个重要特性是可以创建逻辑复用的API。例如，可以将一些公用的逻辑封装成一个函数，然后在不同的组件中复用这个函数。

import { ref } from 'vue'

function useCounter() {
  const count = ref(0)
  const increment = () => {
    count.value++
  }
  return { count, increment }
}

在组件中使用这个函数：

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

使用生命周期钩子

在Vue2中，生命周期钩子是直接写在组件选项里，而在Vue3中，可以通过onMounted、onUnmounted等函数来访问生命周期钩子。

import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const isMounted = ref(false)

    onMounted(() => {
      console.log('Component is now mounted')
      isMounted.value = true
    })

    onUnmounted(() => {
      console.log('Component is now unmounted')
      isMounted.value = false
    })

    return { isMounted }
  }
}

安装和配置Vue Router

Vue Router是Vue.js官方支持的状态管理库。首先安装Vue Router：

npm install vue-router@next

然后配置Vue Router：

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中引入并使用Vue Router：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

创建和导航路由

在Vue Router中，使用<router-link>标签来创建导航链接，并使用<router-view>来渲染组件：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

状态管理库Vuex的使用

Vuex是Vue.js官方提供的状态管理库。首先安装Vuex：

npm install vuex@next

配置Vuex：

import { createStore } from 'vuex'

export default createStore({
  state: () => ({
    count: 0
  }),
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    count: state => state.count
  }
})

在主入口文件main.js中引入并使用Vuex：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

在组件中使用Vuex：

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

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

Vuex与Composition API结合使用

在Composition API中使用Vuex，可以使用mapState和mapActions来映射状态和动作：

import { useStore } from 'vuex'
import { computed, ref, watch } from 'vue'

export function useCounter() {
  const store = useStore()
  const count = computed(() => store.state.count)
  const increment = () => store.dispatch('increment')
  return { count, increment }
}

在组件中使用这个函数：

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

<script>
import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}
</script>

项目构建与打包

使用Vue CLI构建项目：

npm run build

构建完成后，会在dist目录下生成一个index.html文件，以及其他静态资源文件。

部署Vue3项目到服务器

将dist目录下的文件上传到服务器，服务器需要支持静态文件服务，如Apache或Nginx。

scp -r dist/* user@your.server.com:/var/www/html/

使用Vue Devtools调试应用

Vue Devtools是一个浏览器扩展，可以帮助你调试Vue应用。它提供了许多功能，如查看组件树、检查响应式数据等。

常见错误排查与解决方法

• 404错误：确保index.html文件在服务器上正确配置。
• 跨域问题：确保服务器支持CORS。
• 数据不更新：检查响应式数据是否正确设置，使用watch监听数据变化。
• 组件未渲染：检查<router-view>是否正确配置，确保组件路径正确。
• TypeScript类型错误：检查tsconfig.json配置，确保类型正确。

希望以上内容能帮助你快速上手Vue3项目开发。更多详细信息和高级用法可以参考Vue官方文档。