前言
开发前端的时候，如果我们没有什么经验，那么怎么知道要用什么样的技术来开发我们的项目呢?
使用什么样的工具能够方便我们进行开发，尽可能少的踩坑，出问题也能找到解决方案
核心技术选型
- 路由管理工具：vue router
- 状态管理工具：pinia
- UI 组件库
vue router
官方路由 https://router.vuejs.org/zh/guide/
我们可以参考下一些开源项目中的相关配置，看看有哪些东西，怎么个写法
import 'nprogress/css/nprogress.css'; // 进度条样式
import { createRouter, createWebHashHistory } from 'vue-router';
import { createRouterGuards } from './router-guards';
import outsideLayout from './outsideLayout';
import { whiteNameList } from './constant';
import type { App } from 'vue';
import type { RouteRecordRaw } from 'vue-router';
export const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Layout',
redirect: '/dashboard/welcome',
component: () => import(/* webpackChunkName: "layout" */ '@/layout/index.vue'),
meta: {
title: '首页',
},
children: [],
},
// Layout之外的路由
...outsideLayout,
];
export const router = createRouter({
// process.env.BASE_URL
history: createWebHashHistory(''),
routes,
});
// reset router
export function resetRouter() {
router.getRoutes().forEach((route) => {
const { name } = route;
if (name && !whiteNameList.some((n) => n === name)) {
router.hasRoute(name) && router.removeRoute(name);
}
});
}
export async function setupRouter(app: App) {
// 创建路由守卫
createRouterGuards(router, whiteNameList);
app.use(router);
// 路由准备就绪后挂载APP实例
await router.isReady();
}
export default router;1、导入组件的提供的函数 createRouter，createWebHashHistory
createRouter
创建一个可以被 Vue 应用使用的 Router 实例，router 实现了接口 RouterOptions，相关属性可参考文档 https://router.vuejs.org/zh/api/interfaces/RouterOptions.html
必填包括：
- history：路由器使用的历史记录模式。大多数应用应该使用
createWebHistory，但这需要正确配置服务器。你也可以使用createWebHashHistory来实现基于 hash 的历史记录，无需配置服务器。但这种方式不会被搜索引擎处理，SEO 的效果较差。 - routes：一个 RouteRecordRaw 的数组类型，加到路由器的初始路由列表
createWebHashHistory / createWebHistory
这个是用于浏览器回退功能
说到这个就要提到 createWebHistory 了，这两个有什么区别呢？
hash 模式，URL 中会包含一个带有 # 符号的哈希部分，类似页面中的锚点，about 就是 hash 值
http://example.com/#/about相当于 window.location.hash='about'，当只改变浏览器地址栏URL的哈希部分，这时按下回车，浏览器不会发送任何请求至服务器
createWebHistory 模式使用浏览器的 History API
resetRouter
这个不是自定义的一个方法，一般用于登出系统的时候重置路由，这里利用了 router 接口的 hasRoute 来判断路由是否存在，然后再使用 removeRoute 移除当前名称的路由
setupRouter
1、app.use(router)：将路由实例 router 注册到 Vue 应用程序的根实例 app 中，以便在整个应用程序中使用路由功能。
2、await router.isReady()：等待路由准备就绪。在 Vue Router 中，isReady 方法返回一个 Promise，在路由初始化完成后解析。通过使用 await，确保在继续执行后续代码之前等待路由准备就绪。
3、createRouterGuards(router, whiteNameList) 创建路由守卫，这个方法其实就是通过 beforeEach 和 afterEach 设置不同的功能，比如说登录的时候，白名单的用户可以直接进入，无需通过各种校验流程，登出的时候清除系统的缓存等
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave守卫。 - 调用全局的
beforeEach守卫。 - 在重用的组件里调用
beforeRouteUpdate守卫(2.2+)。 - 在路由配置里调用
beforeEnter。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。 - 调用全局的
beforeResolve守卫(2.5+)。 - 导航被确认。
- 调用全局的
afterEach钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。
pinia
介绍
状态管理器干什么用的？其实就是一个个全局变量，然后放在一起存储起来，等到用的时候取出来直接用
官方文档 https://pinia.vuejs.org/zh/core-concepts
挂载
创建 index.ts，初始化 Pinia，这个是用来挂载到 Vue 实例上的，到时候调用 setupStore 方法就能将 store 注册到 App 对象了
import { createPinia } from 'pinia';
import type { App } from 'vue';
const store = createPinia();
export function setupStore(app: App<Element>) {
app.use(store);
}
export { store };使用
就像这样的格式
import { defineStore } from 'pinia'
// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useAlertsStore = defineStore('alerts', {
// 其他配置...
})选项式的写法 Option Store
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
double: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
},
},
})组合式写法 Setup Store
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() {
count.value++
}
return { count, increment }
})在 Setup Store 中：
ref()就是state属性computed()就是gettersfunction()就是actions
UI 组件库
vue 前端UI库现在已经非常的丰富，有很多可供选择，比如 Element、Ant Design Vue、Naive UI、Quasar 等等，选一个觉得不错的来使用即可，有很多集成的案例网上都可以参考
下面会以 Naive UI 作为 UI 组件库，主要个人觉得比较好看一些，使用起来都大差不差
地址: https://www.naiveui.com/zh-CN/light/docs/installation
安装
npm install naive-ui之后在项目中按需自动引入就好，后面的文章会提到组件自动导入