在 H5 通用项目中运用 Vue 3 + Typescript + Vite

2023-12-02 19:25:18

项目初衷

随着前端技术的飞速发展，越来越多的项目开始使用 Vue 3、TypeScript 和 Vite 作为开发框架。为了让前端同学能够更轻松地开展项目开发，我们决定打造一个 H5 通用架子，将这些技术集成在一起，提供一套开箱即用的开发环境。通过使用该架子，前端同学可以快速初始化项目、配置开发环境、编写组件，从而大大提高开发效率。

技术选型

Vue 3

Vue 3 是一个流行的前端框架，它提供了丰富的组件系统、响应式数据绑定和路由管理等功能，能够帮助开发人员快速构建单页面应用。

TypeScript

TypeScript 是一个强大的 JavaScript 超集，它在 JavaScript 的基础上增加了类型系统，可以帮助开发人员编写更加健壮和可维护的代码。

Vite

Vite 是一个现代的前端构建工具，它采用了模块化开发和热重载等技术，能够大大提升开发体验。

项目结构

该项目采用模块化的结构，主要包含以下几个部分：

src：源代码目录，包括组件、页面、路由等文件。
build：构建目录，包括构建后的代码和资源文件。
node_modules：依赖库目录，存放项目所依赖的第三方库。
package.json：项目配置文件，定义了项目的名称、版本、依赖库等信息。

搭建步骤

1. 项目初始化

# 安装依赖库
npm install

# 创建项目
vue create h5-common-project

2. 开发环境配置

# 进入项目目录
cd h5-common-project

# 安装依赖库
npm install

# 启动开发服务器
npm run dev

3. 组件开发

在 src 目录下创建组件文件，例如 Button.vue：

<template>
  <button @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
  props: ['text'],
  methods: {
    handleClick() {
      // ...
    }
  }
}
</script>