共计 1882 个字符,预计需要花费 5 分钟才能阅读完成。
上期咱们装置了 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 中