Vue3+TS+Vite+Pinia项目：5 分钟快速搭建指南

前端

2023-12-20 02:00:23

使用 Vue3、TypeScript、Vite 和 Pinia 快速创建强大的应用程序

序言

在当今竞争激烈的技术领域，能够快速高效地开发和部署新应用程序至关重要。本指南将带领您逐步了解如何使用 Vue3、TypeScript、Vite 和 Pinia 在短短 5 分钟内构建一个全栈应用程序。

初始化您的项目

安装 Node.js 和 npm： 确保您已安装最新版本的 Node.js 和 npm。
创建新项目： 使用 npm 创建一个新的 Vue3 项目，并指定使用 Vue3-TypeScript 模板：
```
npm create vite-app my-vue3-app --template vue3-ts
```
进入项目目录： 通过以下命令进入您刚创建的项目目录：
```
cd my-vue3-app
```

整合 TypeScript 和 Pinia

安装 TypeScript： 运行以下命令安装 TypeScript：
```
npm install -D typescript
```

配置 TypeScript： 在 tsconfig.json 文件中添加以下内容：

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "./dist",
    "esModuleInterop": true
  }
}

安装 Pinia： 运行以下命令安装 Pinia：
```
npm install -D pinia
```

启动您的项目

启动开发服务器： 使用以下命令启动 Vite 开发服务器：
```
npm run dev
```
打开浏览器： 在您的浏览器中打开 http://localhost:3000，您将看到默认的 Vue3 应用程序。

项目结构和组件

项目结构： 默认的 Vue3 项目结构如下：
- src/: 源代码目录
- public/: 静态资产目录
- node_modules/: 依赖项目目录
- package.json: 项目配置
- README.md: 自述文件
主组件： 默认的主组件位于 src/App.vue。

创建自定义组件

创建组件： 创建一个名为 HelloWorld.vue 的新组件：
```
touch src/components/HelloWorld.vue
```

组件代码： 在 HelloWorld.vue 中添加以下代码：

<template>
  <h1>Hello World!</h1>
</template>
<script>
export default {
  name: 'HelloWorld'
}
</script>

注册组件： 在 src/App.vue 中注册您的自定义组件：
```
<template>
  <HelloWorld />
</template>
```

状态管理（Pinia）

创建存储： 在 src/stores/ 中创建一个新的存储模块文件，例如 counter.ts：

import { defineStore } from 'pinia'

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

使用存储： 在您的组件中使用存储，例如 HelloWorld.vue：

<template>
  <h1>Hello World!</h1>
  <p>Count: {{ useCounterStore().count }}</p>
  <button @click="useCounterStore().increment()">Increment</button>
</template>

调试

启用调试模式： 在 package.json 文件的 scripts 对象中添加 --inspect 标志：
```
"scripts": {
  "dev": "vite --inspect"
}
```
启动调试器： 使用以下命令启动调试器：
```
npm run dev
```