Vue 3 是一种用于构建用户界面的 JavaScript 框架，
Vite 是一个由
Vue.
js 官方团队开发的新一代构建工具，而 TypeScript (
TS) 是一个静态类型检查的 JavaScript 超集。
Pinia 是一个基于
Vue 3 的状态管理库。
在使用
Vite 创建
Vue 3 项目时，你可以选择使用 TypeScript，这样可以让你的代码更加稳健和可维护。首先，你需要安装
Vite：
```
npm init
vite@latest my-
vue-project --template
vue-
ts
```
这将创建一个名为 `my-
vue-project` 的新项目，并使用
Vue 3 和 TypeScript 模板。
接下来，你可以安装
Pinia 来管理你的应用状态：
```
npm install
pinia
```
然后，在你的应用程序中引入
Pinia：
```typescript
import { createApp } from '
vue'
import { create
Pinia } from '
pinia'
import App from './App.
vue'
const app = createApp(App)
const
pinia = create
Pinia()
app.use(
pinia)
app.mount('#app')
```
现在你可以在你的组件中使用
Pinia 来管理状态了。例如，创建一个 counter store：
```typescript
import { defineStore } from '
pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
},
})
```
然后，在你的组件中使用这个 counter store：
```typescript
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
import { useCounterStore } from './stores/counter'
export default {
name: 'Counter',
setup() {
const counterStore = useCounterStore()
return {
count: counterStore.count,
increment: counterStore.increment,
decrement: counterStore.decrement,
}
},
}
</script>
```
希望这可以帮助你开始使用
Vite、
Vue 3、TypeScript 和
Pinia 创建应用程序！
1528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
