星点工具箱：为什么 “大前端” 需要 “微前端”？

从 0 到 1 搭建 Vite+Vue3+TS 工程模板：能上手操作的指南

引言

在现代前端开发中，选择合适的工具链对开发效率和项目质量至关重要。Vite 作为新一代的前端构建工具，以其极速的开发体验和丰富的功能成为越来越多开发者的选择。Vue3 作为目前最受欢迎的前端框架之一，结合 TypeScript 提供了类型安全，能够帮助开发者构建更加健壮的应用。

本文将带领大家从零开始，一步步搭建一个基于 Vite+Vue3+TypeScript 的工程模板，即使你是前端新手，也能跟着本文轻松上手。

环境准备

在开始之前，我们需要确保已经安装了以下工具：

  1. Node.js (推荐版本 >= 14.0.0)

    • 访问 Node.js 官网 下载并安装
    • 安装完成后，在终端运行 node -v 和 npm -v 验证安装

  2. 代码编辑器

    • 推荐 VS Code，它对 TypeScript 和 Vue 有很好的支持
    • 安装 Volar 插件（替代之前的 Vetur）以获得更好的 Vue3 支持

创建项目

Vite 提供了快速创建 Vue 项目的脚手架工具。我们可以通过以下步骤创建项目：

  1. 打开终端，运行以下命令创建项目：

    npm create vite@latest my-vue-app -- --template vue-ts

    这将创建一个名为 my-vue-app 的目录，并使用 Vue+TypeScript 模板初始化项目。

  2. 进入项目目录并安装依赖：

    cd my-vue-app
npm install

  3. 启动开发服务器：

    npm run dev

现在，打开浏览器访问 http://localhost:3000，你应该能看到 Vue 的欢迎页面。

项目结构解析

创建的项目结构如下：

my-vue-app/
├── public/          # 静态资源目录
├── src/             # 源代码目录
│   ├── assets/      # 资源文件
│   ├── components/  # 组件
│   ├── App.vue      # 根组件
│   ├── main.ts      # 入口文件
│   ├── shims-vue.d.ts # Vue 类型声明文件
│   └── vite-env.d.ts  # Vite 环境变量类型声明
├── index.html       # HTML 模板
├── package.json     # 项目配置和依赖
├── tsconfig.json    # TypeScript 配置
├── vite.config.ts   # Vite 配置
└── .gitignore       # Git 忽略文件

让我们详细了解一下关键文件：

  • src/main.ts: 应用的入口文件，负责创建 Vue 应用实例并挂载到 DOM
  • src/App.vue: 根组件，是整个应用的顶层组件
  • src/components/: 存放可复用的组件
  • index.html: 应用的 HTML 模板，Vite 会将应用注入到此文件中
  • tsconfig.json: TypeScript 的配置文件，定义了 TypeScript 的编译选项
  • vite.config.ts: Vite 的配置文件，可以配置插件、路径别名等

基础配置

TypeScript 配置

打开 tsconfig.json，我们可以看到一些基本的 TypeScript 配置。对于 Vue 项目，我们需要确保以下配置正确：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

这里我们添加了 paths 配置，可以使用 @ 别名指向 src 目录，这样在导入模块时更加方便。

Vite 配置

打开 vite.config.ts，我们可以进行一些基础配置：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    open: true,
    cors: true
  }
})

这里我们配置了路径别名 @ 指向 src 目录，并设置了开发服务器的一些选项。

为了让 TypeScript 能够正确识别 @ 别名，我们需要在 tsconfig.json 中已经添加了相应的路径配置。

常用插件安装

Vue Router

Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。

  1. 安装 Vue Router：

    npm install vue-router@4

  2. 创建路由配置文件 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

  3. 创建视图组件 src/views/Home.vue 和 src/views/About.vue：

    <!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

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

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

  4. 在 src/main.ts 中注册路由：

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

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

Pinia

Pinia 是 Vue 官方的状态管理库，是 Vuex 的替代品。

  1. 安装 Pinia：

    npm install pinia

  2. 创建 store src/store/counter.ts：

    import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

  3. 在 src/main.ts 中注册 Pinia：

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

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

  4. 在组件中使用 store：

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

<script lang="ts">
import { defineComponent } from 'vue'
import { useCounterStore } from '@/store/counter'

export default defineComponent({
  name: 'Home',
  setup() {
    const counter = useCounterStore()
    
    return {
      counter
    }
  }
})
</script>

开发流程

启动开发服务器

在项目根目录下运行：

npm run dev

这将启动 Vite 开发服务器，默认在 http://localhost:3000 运行应用。开发服务器支持热模块替换(HMR)，修改代码后页面会自动更新。

构建生产版本

当项目准备部署时，运行：

npm run build

这将在 dist 目录下生成优化后的生产版本文件。

预览生产版本

构建完成后，可以运行以下命令预览生产版本：

npm run preview

实战示例：创建一个简单的待办事项应用

让我们通过创建一个简单的待办事项应用来实践所学知识。

  1. 创建 src/components/TodoList.vue 组件：

    <template>
  <div>
    <h2>Todo List</h2>
    <div>
      <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" />
      <button @click="addTodo">Add</button>
    </div>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="removeTodo(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>

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

export default defineComponent({
  name: 'TodoList',
  setup() {
    const newTodo = ref('')
    const todos = ref<string[]>([])
    
    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.value.push(newTodo.value)
        newTodo.value = ''
      }
    }
    
    const removeTodo = (index: number) => {
      todos.value.splice(index, 1)
    }
    
    return {
      newTodo,
      todos,
      addTodo,
      removeTodo
    }
  }
})
</script>

  2. 在 App.vue 中使用这个组件：

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

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

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

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

input {
  padding: 8px;
  margin-right: 8px;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}
</style>

现在，你应该可以在浏览器中看到一个简单的待办事项应用，可以添加和删除待办事项。

总结与进阶方向

通过本文，我们学习了如何从零开始搭建一个基于 Vite+Vue3+TypeScript 的工程模板，包括：

  • 环境准备和项目创建
  • 项目结构解析
  • 基础配置（TypeScript 和 Vite）
  • 安装常用插件（Vue Router 和 Pinia）
  • 开发流程
  • 实战示例

进阶方向可以包括：

  1. UI 组件库集成：如 Element Plus、Ant Design Vue 等
  2. CSS 预处理器：如 Sass、Less
  3. 代码规范工具：如 ESLint、Prettier
  4. 单元测试：如 Vitest、Jest
  5. API 集成：使用 Axios 或 Fetch 与后端 API 交互
  6. 构建优化：代码分割、懒加载等

希望本文能帮助你快速上手 Vite+Vue3+TypeScript 的开发，构建出高质量的前端应用！觉得有用就点个关注！我会持续分享更多实用工具和效率技巧。想直接体验？各类免费、开箱即用的在线工具，都在我的【星点工具箱】网站等你来玩！

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容