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 增加路由占位符

<template>
   <router-view/>
</template>

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<userInfo> = 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. 页面中使用 

<script setup>

import { useStore } from "@/store/index";
import { storeToRefs } from "pinia";
const store = useStore();
const { initUserInfo } = store;
const { userInfo } = storeToRefs(store);

</script>
<template>
    <div>
        <h1>{{ userInfo  }}</h1>
    </div>
</template>

<style scoped></style>