上期咱们装置了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<Store<State>> = Symbol('')// Create a new store instance.export const store = createStore<State>({  state: {    count: 0  }})// 定义本人的 `useStore` 组合式函数export function useStore () {  return baseUseStore(key)}

3、在main.ts中引入

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

4、页面中应用

咱们在login/index.vue页面中应用下

三、别名配置

官网： https://vitejs.cn/config/#res...

1、配置vite.config.ts

留神：这块的path，ts辨认不进去，所以要装置@types/node  npm i @types/node -D

2、配置tsconfig.json

留神：这块的baseUrl须要配置，否则回报错

四、css款式治理

官网： https://vitejs.cn/config/#css...

1、装置scss

npm install -D sass

2、在src目录下新建styles目录，新建以下文件

common.scss -> 全局公共款式
index.scss -> 组织对立导出
mixin.scss -> 全局mixin
transition.scss -> 全局适度动画款式
variables.scss -> 全局sass变量

3、在index.scss中引入其余的文件

4、在main.ts中引入index.scss

import './styles/index.scss'

5、指定传递给 CSS 预处理器的选项，配置如下，在vite.config.ts中