vue3（windows系统）：vue3+vue-router+vuex+typescript在VS Code中使用vite——第三章：关于route和store

最新推荐文章于 2025-09-16 06:53:45 发布

原创最新推荐文章于 2025-09-16 06:53:45 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #typescript

前端同时被 3 个专栏收录

5 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

typescript

4 篇文章

订阅专栏

本文介绍了在Windows环境下，使用Vue3、vue-router、vuex和typescript，结合Vite搭建项目的过程。首先讲解了如何新建并配置vue-router的./router/index.ts文件，接着在main.ts中进行相应修改。然后简要说明了vue-router的基础使用。后续部分涉及vuex的状态管理，新建./store/index.ts作为仓库骨架，强调遇到复杂情况时查阅官方文档的重要性。

vue的影分身，vue-router和vuex

vue-router的配置

vue-router的配置

比较复杂，首先是

新建./router/index.ts

在src下新建一个文件夹，建议取名为route，route文件夹下新建一个index.ts
里面写：
vue-router-index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('/@/App.vue'),
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

export default router

具体猜也能猜出来啥意思，不说了

main.ts中修改配置

vue-router
加一条

import router from './router'
//将router添加到下面
create(App).use(router).mount('#app')

基础使用

vue-router
这样的形式，具体去看文档
成功之后接下来是vuex，失败关电脑出去玩。

vuex

新建./store/index.ts

vuex
最基础什么都没有的仓库，这个store可以算是骨架，你可以往上填充血肉，注意，你可以创建其他问价，并暴露给这个出口文件，一切从这里触发——index.ts
这东西一般遇不到用的地方，等遇到了，也不是一两篇文章能解决的，
去看文档吧，失败了扔了电脑出去玩。