怎么用vite简单搭建ts+vue3全家桶

发布时间：2022-07-16 17:15:49 作者：iii
来源：亿速云阅读：635

怎么用Vite简单搭建TS+Vue3全家桶

引言

在现代前端开发中，Vue3 和 TypeScript 已经成为了非常流行的技术栈。Vue3 提供了更好的性能和更灵活的组合式 API，而 TypeScript 则为我们的代码提供了更强的类型安全。Vite 现代化的构建工具，以其极快的启动速度和热更新能力，成为了许多开发者的首选。

本文将详细介绍如何使用 Vite 快速搭建一个基于 TypeScript 和 Vue3 的全家桶项目。我们将从环境准备开始，逐步介绍如何配置 Vite、Vue3 和 TypeScript，并集成 Vue Router 和 Vuex，最终构建一个完整的项目。

环境准备

在开始之前，确保你的开发环境中已经安装了 Node.js 和 npm。你可以通过以下命令检查是否已经安装：

node -v
npm -v

如果没有安装，请前往 Node.js 官网下载并安装。

创建项目

首先，我们使用 Vite 提供的模板来创建一个新的项目。打开终端，运行以下命令：

npm create vite@latest my-vue3-ts-app

在创建过程中，Vite 会提示你选择框架和语言。我们选择 Vue 作为框架，TypeScript 作为语言。

✔ Project name: … my-vue3-ts-app
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

创建完成后，进入项目目录并安装依赖：

cd my-vue3-ts-app
npm install

项目结构

创建完成后，项目的目录结构如下：

my-vue3-ts-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   ├── main.ts
│   ├── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts

配置 Vite

Vite 的配置文件位于 vite.config.ts。默认情况下，Vite 已经为我们配置好了 Vue 和 TypeScript 的支持。如果你需要进一步自定义配置，可以在这个文件中进行修改。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

配置 TypeScript

Vite 已经为我们生成了 tsconfig.json 文件，默认配置已经足够支持大多数项目。如果你需要自定义 TypeScript 的编译选项，可以在这个文件中进行修改。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

配置 Vue Router

接下来，我们将为项目添加 Vue Router。首先，安装 Vue Router：

npm install vue-router@4

在 src 目录下创建一个 router 文件夹，并在其中创建 index.ts 文件：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  }
]

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

export default router

然后，在 src/main.ts 中引入并使用 Vue Router：

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

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

配置 Vuex

接下来，我们将为项目添加 Vuex。首先，安装 Vuex：

npm install vuex@next

在 src 目录下创建一个 store 文件夹，并在其中创建 index.ts 文件：

import { createStore } from 'vuex'

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

然后，在 src/main.ts 中引入并使用 Vuex：

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

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

创建视图组件

在 src/views 目录下创建 Home.vue 和 About.vue 两个视图组件。

Home.vue：

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

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

export default defineComponent({
  setup() {
    const store = useStore()
    return {
      count: store.state.count,
      increment: () => store.dispatch('increment')
    }
  }
})
</script>

About.vue：

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

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

export default defineComponent({
  name: 'About'
})
</script>

配置 App.vue

最后，我们需要在 App.vue 中配置路由视图：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

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

export default defineComponent({
  name: 'App'
})
</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>

运行项目

现在，我们已经完成了项目的配置。运行以下命令启动开发服务器：

npm run dev

打开浏览器，访问 http://localhost:3000，你应该能够看到项目已经成功运行。

总结

通过本文的介绍，我们学习了如何使用 Vite 快速搭建一个基于 TypeScript 和 Vue3 的全家桶项目。我们从环境准备开始，逐步配置了 Vite、Vue3、TypeScript、Vue Router 和 Vuex，并最终构建了一个完整的项目。

Vite 的快速启动和热更新能力使得开发体验非常流畅，而 TypeScript 的类型安全则为我们的代码提供了更强的保障。希望本文能够帮助你快速上手 Vite + Vue3 + TypeScript 的开发，并为你的项目开发提供参考。