好的，下面是搭建
Vue 3.0 + Vite + P
inia +
TypeScript 的步骤：
1. 安装 Node.js，推荐
使用 L
TS 版本。
2. 安装 Vite：
```
npm
init vite-app my-project
```
这里我们
使用 Vite 初始化一个新项目，名称为 my-project。
3. 安装依赖：
```
cd my-project
npm install
```
4. 安装
Vue 3.0：
```
npm install
vue@next
```
5. 安装 P
inia：
```
npm install p
inia
```
6. 安装
TypeScript：
```
npm install --save-dev
typescript
```
7. 配置
TypeScript：
在项目根目录下创建 `
tsconfig.json` 文件，内容如下：
```json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*.
ts", "src/**/*.
tsx", "tes
ts/**/*.
ts", "tes
ts/**/*.
tsx"],
"exclude": ["node_modules"]
}
```
8. 安装 P
inia Devtools（可选）：
```
npm install @p
inia/devtools --save-dev
```
9. 在 `main.
ts` 中进行配置：
```
typescript
import { createApp } from '
vue'
import { createP
inia } from 'p
inia'
import App from './App.
vue'
const app = createApp(App)
// 创建 P
inia 实例
const p
inia = createP
inia()
// 将 P
inia 实例挂载到 app 上
app.use(p
inia)
app.mount('#app')
```
10. 编写组件：
在 `src` 目录下创建一个 `componen
ts` 目录，然后创建一个 `HelloWorld.
vue` 组件：
```
vue
<template>
<div>
<h1>Hello, {{ name }}</h1>
<button @click="increase">Increase</button>
<p>{{ count }}</p>
</div>
</template>
<script lang="
ts">
import { defineComponent } from '
vue'
import { use
Store } from 'p
inia'
export default defineComponent({
name: 'HelloWorld',
setup() {
const
store = use
Store()
const name =
store.getters.getName
const count =
store.
state.count
const increase = () => {
store.commit('increase')
}
return { name, count, increase }
},
})
</script>
```
11. 在 `App.
vue` 中
使用组件：
```
vue
<template>
<HelloWorld />
</template>
<script lang="
ts">
import { defineComponent } from '
vue'
import HelloWorld from './componen
ts/HelloWorld.
vue'
export default defineComponent({
name: 'App',
componen
ts: {
HelloWorld,
},
})
</script>
```
12. 运行项目：
```
npm run dev
```
至此，我们已经成功搭建了
Vue 3.0 + Vite + P
inia +
TypeScript 的项目。
扫一扫
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
