vue的项目基础配置
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')