一文带你从零开始搭建vue3项目

前言

Vue 3 是一款快速、小巧、易上手的前端框架，是Vue.js框架的最新版本。它具有较高的性能，提供更好的开发者体验，可帮助我们更快速地构建出一个高性能的web应用。

本文将为大家详细讲解如何从零开始搭建Vue3项目以及如何创建组件、路由和状态管理等方面。

准备工作

要开始构建 Vue3 项目，需要安装 Node.js 及 npm，这里不再赘述。

接下来，我们需要全局安装 Vue CLI（Vue开发的标准工具）：

npm install -g @vue/cli

检查 Vue CLI 是否安装成功，使用以下命令：

vue -V

显示版本号即为成功。

创建项目

使用 Vue CLI 创建我们的 Vue3 项目：

vue create vue3-demo

回车后，在创建选项中选择默认即可。

等待项目创建完成后，进入项目：

cd vue3-demo

然后，启动我们的项目：

npm run serve

如果没有报错，说明 Vue3 项目已经成功搭建好了。

创建组件

接下来，我们就可以开始创建我们的Vue3组件了。

首先，在src/components/中，创建一个 HelloWorld.vue 文件，添加以下代码：

<template>
  <div>{{ msg }}</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

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

<style>
</style>

这个组件名为 HelloWorld，内部定义了一个名为 msg 的 props 并将其展示在了页面上。

接下来，我们需要在 App.vue 中引入这个组件，修改代码如下：

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Vue 3!" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'

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

<style>
</style>

这样，我们就创建了一个包含了自定义组件 HelloWorld 的 Vue3 项目。

创建路由

接下来，我们需要创建路由。在 Vue3 中，我们需要使用 vue-router 来实现路由。

首先，我们需要安装 vue-router：

npm install vue-router@next

然后，在src/目录下创建 router/index.ts 文件：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

这样，我们就创建了一个Home组件，并定义它的默认路由为高亮。接下来，需要在我们的项目中启用路由：

在 main.ts 文件中修改代码：

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

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

这样，我们就完成了路由的创建。

状态管理

Vue.js 3 推出了新的状态管理工具 Vuex 4，我们可以使用它来实现全局状态的管理。

首先，安装 Vuex 4：

npm install vuex@next

在 src/store/index.ts 中编写 store 代码:

import { createLogger, createStore, Store, useStore as baseUseStore } from 'vuex'
import { InjectionKey } from 'vue'

// interface AppState {
//   count: number
// }

// 定义放哪儿
export const key: InjectionKey<Store<unknown>> = Symbol()

// 注册 modules
const modules = {}

// create store instance
const store = createStore({
  plugins: import.meta.env.DEV ? [createLogger()] : [],
  modules
})

export default store

// 使用
export function useStore() {
  return baseUseStore(key)
}

最后，在 main.ts 中使用 store：

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

createApp(App)
  .use(store, key)
  .use(router)
  .mount('#app')

至此，我们已经成功创建 Vue3 项目，包含了组件、路由和状态管理。