vue3+vite+pinia项目搭建完整示例

一、创建项目

根据不同的npm版本，选择不同的命令执行，即可创建项目，创建成功后切换到项目目录下，加载依赖并运行项目即可。

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

 二、安装路由

1、执行以下命令加载路由模块；

npm install vue-router@4

2、在src目录下创建roter目录，并在router目录中创建index.js文件，在src目录下创建views目录，并创建a.vue、b.vue两个示例文件，项目结构如下图

 3、roter/index.js文件配置如下：

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
    {
        path: "/",
        name: "a",
        component: () => import("../views/a.vue"),
    },
    {
        path: "/b",
        name: "b",
        component: () => import("../views/b.vue"),
    },
]
const router = createRouter({
        history: createWebHistory(),
        routes
    })

export default router

4、在main.js中引入路由文件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'

//注意use要在mount之前
createApp(App).use(router).mount('#app')

 5、在App.vue中配置<router-view />

6、运行项目，即可实现简单的路由切换，后续可自由配置

三、状态管理工具pinia
1、安装pinia

npm install pinia

 2、在main.js文件里引入pinia，引入后，通过createPinia( )方法，得到pinia的实例，然后将pinia挂载到Vue根实例上

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

//注意use要在mount之前
const app = createApp(App)
const pinia = createPinia()
app.use(router).use(pinia).mount('#app')

3、创建store状态管理库：在src目录下，创建store目录，并在store目录中创建index.js文件

import { defineStore} from 'pinia'

export const mainStore = defineStore('main',{
  state:()=>{
    return {
        helloPinia:'Hello Pinia!'
    }
  },
  getters:{},
  actions:{}
})
/*
    defineStore( ) 方法的第一个参数：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。
    defineStore( ) 方法的第二个参数：可以简单理解为一个配置对象，里边是对容器仓库的配置说明。当然这种说明是以对象的形式。
    state 属性： 用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。
    getters属性： 用来监视或者说是计算状态的变化的，有缓存的功能。
    actions属性： 对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改state全局状态数据的。
*/

4、在b.vue中引用即可

  <template>
     <div>
        <h2 class="">{{ store.helloPinia}}</h2>
    </div>
  </template>
  <script setup>
  import { mainStore } from "../store/index"
  const store = mainStore()
  </script>

 5、启动项目，切换至b.vue页面时即可显示Hello Pinia!

 四、pinia实现父子、兄弟组件之间传值

1、按下图创建对应的目录及文件

2、index.vue文件

<template>
    <div>
        <button @click="addNumber(1)">数量加</button>
        <button @click="addNumber(-1)">数量减</button>
        <Footer />
    </div>
</template>
<script setup>
import useIndexStore from './store'
import Footer from './components/footer.vue'
const indexStore = useIndexStore()
const {
    addNumber
} = indexStore
</script>

3、index.js文件

import { defineStore } from "pinia"
import { shallowReactive } from "vue"

const useIndexStore = defineStore('indexStore', () => {

    const initIndexData = () => ({
        number:0
    })
    const indexData = shallowReactive(initIndexData())

    function addNumber(e) {
        indexData.number += e
    }

    return {
        indexData,
        addNumber
    }
})

export default useIndexStore

4、footer.vue文件

<template>
    <div>
        <h1>{{indexData.number}}</h1>
    </div>
</template>
<script setup>
import useIndexStore from '../store'
const indexStore = useIndexStore()
const {
    indexData
} = indexStore
</script>

5、更新路由文件

import { createRouter, createWebHistory } from 'vue-router'
const routes = [
    {
        path: "/",
        name: "a",
        component: () => import("../views/a.vue")
    },
    {
        path: "/b",
        name: "b",
        component: () => import("../views/b.vue")
    },
    {
        path: "/index",
        name: "index",
        component: () => import("../views/index/index.vue")
    }
]
const router = createRouter({
        history: createWebHistory(),
        routes
    })

export default router

6、更新a页面代码

<template>
  <div>
    <button @click="addNumber">A+</button>
    <hr>
    <router-link to="/b">b</router-link>
    <hr>
    <router-link to="/index">index</router-link>
  </div>
</template>
<script setup>
  import { mainStore } from "../store/index"
  const store = mainStore()
  function addNumber(){
    store.number++
  }
</script>
<style scoped>

</style>

7、启动项目，从A页面跳转到index页面后，点击数量加减，即可看到其子组件中的数据同步更改