vue3+vite+ts+element-plus搭建项目(二) vue3+vite+ts+element-plus搭建项目

上期我们安装了vite,代码管理到git，还有使用eslint验证，接下来我们在项目中安装vuex,router,scss、别名设置等
一、vueRouter
官网：https://router.vuejs.org/guid...
1、安装

npm install vue-router@4

2、安装好之后，我们在src目录下新建router目录,在router下新建index.ts文件
index.ts文件内容

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'const routes: RouteRecordRaw[] = [ { path: '/', name: 'home', component: () => import('../views/home/index.vue') }, { path: '/login', name: 'login', component: () => import('../views/login/index.vue') } ] const router = createRouter({ history: createWebHashHistory(), // 路由模式 routes // 路由规则 })export default router

这块需要注意的是:
(1)、history: createWebHashHistory()，调用的是方法，使用的是hash模式
(2)、history: createWebHistory()，使用的是h5的history模式
(3)、为了规范化typescript开发，增加路由对象RouteRecordRaw类型限制，好处：允许在基础路由里面增加开发者自定义属性，但是有时需要扩展一些字段来定制应用。
(4)、因为设置了默认路径是home/index.vue，所以在app.vue中要设置入口

文章图片

3、引用
在main.ts中引入

import router from './router'createApp(App).use(router).mount('#app')

二、vuex
官网： https://vuex.vuejs.org/zh/ind...
1、安装

npm install vuex@next --save

2、在src目录下新建store目录，在store目录下新建index.ts，

import { InjectionKey } from 'vue' import { createStore, useStore as baseUseStore, Store } from 'vuex'export interface State { count: number }export const key: InjectionKey> = Symbol('') // Create a new store instance. export const store = createStore({ state: { count: 0 } })// 定义自己的 `useStore` 组合式函数 export function useStore () { return baseUseStore(key) }

3、在main.ts中引入