Day-03 从 0 开始搭建一套规范的 Vue3.x 项目工程环境

六、集成路由工具 Vue Router

1. 安装依赖 支持 Vue3 的路由工具 vue-router@4 

npm i vue-router@4
 
// 或者执行 安装最新开发版本(nightly build)
npm i vue-router@next 

2. 创建 src/router/index.ts 文件

在 src 下创建 router 目录，然后在 router 目录里新建 index.ts 文件：

 └── src/
     ├── router/
         ├── index.ts  // 路由配置文件

根据本项目路由配置的实际情况，你需要在 src 下创建 views 目录，用来存储页面组件。

import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
 
import Home from '@/views/home/Index.vue'
const Body = () => import('@/views/body/Index.vue');
 
const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/body',
    name: 'body',
    component: Body
  },
 
]
 
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
 
export default router

我们在 views 目录下创建 /home/Index.vue 、body/Index.vue。

3. 在 main.ts 文件中挂载路由配置

import { createApp } from 'vue'
import App from './App.vue'
 
import router from './router/index'
 
createApp(App).use(router).mount('#app')

3. 在 App.vue 增加路由占位符

ps : 需要注意一下 

@next 在 npm 包名称中的意思是:

• 指向该包的最新开发版本(nightly build)

• 而不是发布在 npm 仓库中的正式版本

举个例子:

• vue-router 是 vue-router 的正式发布版本

• vue-router@next 是 vue-router 最新的开发版本

使用 @next 的一些特点:

• 包含未来可能发布的新功能

• 代码质量可能不如正式版本稳定

• 可能存在兼容性或bug问题

• 每次安装版本号都可能不同

相比之下:

• 不加 @next 直接安装包名,会获取最新的稳定版本

• 加上 @next 则直接从开发分支获取代码

所以使用 @next 可以尝试最新的功能,但也需了解可能的风险。一般在生产环境不建议使用 @next,开发或测试环境可以根据需要选择使用。

 七、集成状态管理工具 Pinia

在Vue3中使用Pinia的基本步骤是:

1. 安装Pinia

npm install pinia

2. 创建 src/store/index.ts 文件

在 src 下创建 store目录，然后在 store目录里新建 index.ts 文件：

 └── src/
     ├── store/
         ├── index.ts  // 路由配置文件

 
import { defineStore } from 'pinia'
import { ref, Ref } from 'vue';
 
interface userInfo {
    userName:string,
    age:Number
}
 
export const useStore = defineStore('store', () => {
    const userInfo: Ref = ref({userName: 'lx', age: 26});
 
    const initUserInfo = (res: userInfo) => {
        userInfo.value = res
    };
    return {
        userInfo, initUserInfo,
    }
})

3.在 main.ts 文件中挂载 pinia  配置

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

3. 页面中使用 

<template>
    <div>
        <h1>{{ userInfo  }}h1>
    div>
template>
 
<style scoped>style>