乐趣区

关于vue3:vue3vitetselementplus搭建项目二

jiezi

上期咱们装置了 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 中

退出移动版