vite + vue3.0 + pinia + ts创建项目

要使用Vite、Vue 3.0、Pinia 和 TypeScript 创建一个新项目，你可以按照以下步骤操作：

1. 确保你已经安装了Node.js和npm。

2. 安装Vite CLI工具：

   
   
   
   npm init vite@latest <project-name> --template vue-ts

   其中 <project-name> 是你的项目名称。

3. 进入创建的项目目录：

   
   
   
   cd <project-name>

4. 安装Pinia：

   
   
   
   npm install pinia

5. 在Vue项目中集成Pinia。你需要在项目中创建一个 store.ts 文件，并初始化Pinia：

   
   
   
   // src/store.ts
   import { defineStore } from 'pinia'
   import { store } from '../main'
    
   // 使用defineStore创建一个新的store
   export const useMainStore = defineStore({
     id: 'main',
     state: () => {
       return { counter: 0 }
     },
     actions: {
       increment() {
         this.counter++
       }
     }
   })

6. 在 main.ts 中安装Pinia：

   
   
   
   // src/main.ts
   import { createApp } from 'vue'
   import { createPinia } from 'pinia'
   import App from './App.vue'
    
   const app = createApp(App)
   const pinia = createPinia()
    
   app.use(pinia)
   app.mount('#app')

7. 在组件中使用Pinia：

   
   
   
   // src/components/Counter.vue
   <template>
     <button @click="increment">{{ store.counter }}</button>
   </template>
    
   <script lang="ts">
   import { defineComponent } from 'vue'
   import { useMainStore } from '../store'
    
   export default defineComponent({
     setup() {
       const store = useMainStore()
       function increment() {
         store.increment()
       }
       return { store, increment }
     }
   })
   </script>

8. 启动开发服务器：

   
   
   
   npm run dev

以上步骤将会创建一个包含Vue 3.0、Pinia 和 TypeScript 的新项目，并且集成了Vite作为构建和开发服务器工具。