如何使用Vue3+Vite+TS快速搭建一套实用的脚手架

下面我将对如何使用Vue3+Vite+TS快速搭建一套实用的脚手架进行详细讲解。

1. Vite简介

Vite是一个由Vue.js作者尤雨溪开发的基于ESM（ES模块）的构建工具，可以快速地搭建现代化的前端开发环境。它不像Webpack那样打包，而是通过利用浏览器原生支持ES模块的能力，直接加载ES模块的源代码，在开发中无需打包就能够快速地启动调试和热更新。

2. Vue3+Vite+TS脚手架搭建步骤

2.1 初始化项目

我们首先需要在电脑上安装Node.js和npm。安装完成后，在终端中输入以下命令来初始化一个新的Vue3项目：

# 全局安装Vue CLI
npm install -g @vue/cli

# 初始化一个新的Vue项目
vue create my-vue-app

然后，进入到my-vue-app目录中，并使用以下命令安装Vite：

cd my-vue-app
npm install -D vite

2.2 配置Vite

接下来，我们需要在项目根目录中创建一个vite.config.js文件并进行一些基本配置，例如：

import { defineConfig } from 'vite'

export default defineConfig({
  base: './',
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

这里，我们设置了基础路径，端口号为3000，以及设置了别名@，让我们在组件中可以方便地使用@/代替/src。

2.3 添加TypeScript支持

我们可以使用Vue CLI提供的TypeScript模板来快速地添加TypeScript支持。在终端中运行以下命令来添加：

vue add typescript

运行完毕后，我们可以看到src目录下多了一个shims-vue.d.ts文件，这个文件用于描述Vue模块的类型。

2.4 集成Vue3

我们可以使用Vue CLI提供的Vue3模板来搭建一个Vue3项目，只需要在初始化项目时加上--template vue3参数即可：

vue create my-vue-app --template vue3

2.5 集成Vue Router

在终端中运行以下命令来添加Vue Router支持：

npm install vue-router@4.0.0-beta.2

然后，在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

这里，我们定义了一个路由表，包含了默认路由/，并将路由器导出为默认模块。

然后，在main.ts文件中引入路由并将其挂载到Vue实例上：

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

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

2.6 集成Vuex

在终端中运行以下命令来添加Vuex支持：

npm install vuex@next

然后，在src目录下创建一个store文件夹，在其中新建一个index.ts文件，添加以下内容：

import { InjectionKey } from 'vue'
import { createStore, Store } from 'vuex'

export interface State {
  count: number
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state() {
    return {
      count: 0,
    }
  },
  mutations: {
    increment(state) {
      state.count++
    },
  },
  actions: {
    increment(context) {
      context.commit('increment')
    },
  },
})

这里，我们定义了一个计数器状态和两个操作状态的mutation和action函数，然后将其封装为一个Vuex Store，并将其导出为默认模块。

接着，在main.ts文件中引入Store并将其挂载到Vue实例上：

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

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

至此，我们就完成了Vue3+Vite+TypeScript+Vue Router+Vuex的脚手架搭建。

3. 示例说明

示例1：异步组件

我们来看一个异步组件的例子。在src/views目录下，新建一个Async.vue文件，添加以下内容：

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

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

export default {
  name: 'Async',
  setup() {
    const message = ref('')

    setTimeout(() => {
      message.value = 'Hello, Async!'
    }, 2000)

    return {
      message,
    }
  },
}
</script>

这个组件将在2秒后显示一个消息。

然后，在src/router/index.ts中添加路由：

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '@/views/Home.vue'
const Async = () => import('@/views/Async.vue')

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

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

export default router

在浏览器中访问http://localhost:3000/#/async，就能看到异步组件的效果了。

示例2：使用Ant Design Vue

我们来看一个使用Ant Design Vue的例子。在终端中运行以下命令来安装Ant Design Vue：

npm install ant-design-vue@next -S

然后，在src/main.ts中引入Ant Design Vue组件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { key, store } from './store'
import { Button } from 'ant-design-vue'

import 'ant-design-vue/dist/antd.css'

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

现在，在src/views目录下，我们可以创建一个使用Ant Design Vue组件的视图：

<template>
  <div>
    <a-button type="primary" @click="handleClick">{{ count }}</a-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'AntdDemo',
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)

    const handleClick = () => {
      store.dispatch('increment')
    }

    return {
      count,
      handleClick,
    }
  },
})
</script>

<style scoped></style>

这个视图将显示一个按钮和一个计数器。当按钮被点击时，计数器会加1。此时，我们就成功地集成了Ant Design Vue组件。

总结一下，我们在本次攻略中详细介绍了如何使用Vue3+Vite+TS快速搭建一套实用的脚手架，其中包含了初始化项目、配置Vite、添加TypeScript支持、集成Vue3、集成Vue Router、集成Vuex等步骤。并且，我们还提供了两个示例来帮助大家更好地了解如何使用该脚手架。