Vue DevTools Next 的 Vite 插件使用指南

好的，下面是搭建 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` 文件，内容如下： ```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` 中进行配置： ```typescript 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` 组件： ```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` 中使用组件： ```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 的项目。