vue 路由，pinia基本安装和配置

vue的项目基础配置

• • 路由的安装指令
  • 路由的配置
  • Pinia的安装指令
  • Pinia的配置
  • 小结

1.路由的安装指令

npm install vue-router@4

2.路由的配置

        1.创建一个router文件夹

        2.router文件夹里创建一个index.ts文件

                

        3.index.ts文件的路由基础代码 

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        name: 'main',
        component: () => import('../views/home/Home.vue'),
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router

4.main.ts 的文件配置

import { createApp } from 'vue'
// 引入组件
import App from './App'
// 引入资源
import router from './router'
// 创建app
const app = createApp(App)

// 注入路由
app.use(router)

// 挂载实例
app.mount('#app')

Pinia的安装指令

npm install pinia

Pinia的配置

        1. 创建一个store 文件夹

        2. 在 store文件夹里创建 index文件

        3. index.ts文件的 Pinia 的基础代码

import { defineStore } from 'pinia'

export const mainStore = defineStore('main', {
    state: ()=>{
        return {
            helloWorld: 'Hello Pinia!'
        }
    },
    getters: {},
    actions: {}
})

         4.main.ts 的文件配置

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

        

小结

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态

简单易懂的项目基础配置

main.ts 

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


const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(router)

app.mount('#app')