用vue3.0 +vite +pinia +ts搭建一个vue的架子

好的，下面是搭建 Vue 3.0 + Vite + Pinia + TypeScript 的步骤：

1. 安装 Node.js，推荐使用 LTS 版本。

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` 文件，内容如下：

{
  "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", "tests/**/*.ts", "tests/**/*.tsx"],
  "exclude": ["node_modules"]
}

8. 安装 Pinia Devtools（可选）：

npm install @pinia/devtools --save-dev

9. 在 `main.ts` 中进行配置：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)

// 创建 Pinia 实例
const pinia = createPinia()

// 将 Pinia 实例挂载到 app 上
app.use(pinia)

app.mount('#app')

10. 编写组件：

在 `src` 目录下创建一个 `components` 目录，然后创建一个 `HelloWorld.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 { useStore } from 'pinia'

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const store = useStore()

    const name = store.getters.getName
    const count = store.state.count

    const increase = () => {
      store.commit('increase')
    }

    return { name, count, increase }
  },
})
</script>

11. 在 `App.vue` 中使用组件：

<template>
  <HelloWorld />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
  },
})
</script>

12. 运行项目：

npm run dev

至此，我们已经成功搭建了 Vue 3.0 + Vite + Pinia + TypeScript 的项目。