好的，下面是搭建
Vue 3.0
+ Vite + Pinia
+ 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. 安装 Pinia：
```
npm install pinia
```
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. 安装 Pinia Devtools（可选）：
```
npm install @pinia/devtools
--save
-dev
```
9. 在 `main.
ts` 中进行配置：
```
typescript
import { createApp } from &#
39;
vue&#
39;
import { createPinia } from &#
39;pinia&#
39;
import App from &#
39;./App.
vue&#
39;
const app = createApp(App)
// 创建 Pinia 实例
const pinia = createPinia()
// 将 Pinia 实例挂载到 app 上
app.use(pinia)
app.mount(&#
39;#app&#
39;)
```
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 &#
39;
vue&#
39;
import { useStore } from &#
39;pinia&#
39;
export default defineComponent({
name: &#
39;HelloWorld&#
39;,
setup() {
const store = useStore()
const name = store.getters.getName
const count = store.state.count
const increase = () => {
store.commit(&#
39;increase&#
39;)
}
return { name, count, increase }
},
})
</script>
```
11. 在 `App.
vue` 中
使用组件：
```
vue
<template>
<HelloWorld />
</template>
<script lang="
ts">
import { defineComponent } from &#
39;
vue&#
39;
import HelloWorld from &#
39;./componen
ts/HelloWorld.
vue&#
39;
export default defineComponent({
name: &#
39;App&#
39;,
componen
ts: {
HelloWorld,
},
})
</script>
```
12. 运行
项目：
```
npm run dev
```
至此，我们已经成功搭建了
Vue 3.0
+ Vite + Pinia
+ TypeScript 的
项目。
扫一扫
892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
