Vue3 Router Push

Posted on  by admin

尤大的 Vue3.0 已经发布有一阵子了, 已经很成熟了。今天想起来,是时候该上手体验分享一波了。. 大家都知道,在 Vue3 生态系统中有一个新构建工具 Vite ,它的开发服务器比 Vue CLI 快 10 ~ 100倍,是不是很好奇?具体的内容可以移步至:迟到的 Vue3.0 与 Vite 的体验学习总结 的 七、Vite 与 Vue CLI 阅读。.

本文将主要分享如何使用 Vite 来创建一个 Vue3.0 的项目,并且结合相关内容(TypeScript、Vue Router、Vuex、Ant Design等)编写一个简单的Demo。.

在项目中创建一个 vite.config.js 或 vite.config.ts 文件。如果在当前工作目录中找到 Vite,它将自动使用它。.

vite.config.ts 基本配置:.

详细 config.ts 配置参考:Vite - config.ts. 以上代码便完成了 Antd 的引入。需要注意的是,样式文件需要单独引入。.

注意:createApp(App).mount(’#app’).use(Antd) .mount(’#app’) 和 .use(Antd) 的顺序一定不要写错,否则会报:createApp(…).mount(…).use is not a function 的错误。 这也是以为小伙伴提醒我的,非常感谢。.

TypeScript 是 JavaScript 类型的超集,它可以编译成纯 js。.

我们在项目中要做的就是将 .js 文件更新成 .ts 文件即可,至于里面的细节内容可以去 TypeScript官网 阅读文档学习。.

当然,在项目中也可以不使用 ts,其他内容都是相同的,本项目是为了体验 ts 才使用的,如果不使用可以直接省略。. 将项目中的 mian.js 重命名为 main.ts,并且将项目中引用该文件的位置 index.html 也同步更新扩展名。.

新建文件: router/index.ts 用于配置路由信息.

需要在 main.ts 中注入该路由信息。.

可以在 .vue 页面中使用 等来使用路由。.

Vuex 实例对象属性 主要有5个核心属性:state、mutations、getters、actions、modules。具体使用就不再赘述了,使用方法大家跟 Vue2 的一样。.

新建文件: store/index.ts 用于配置 vuex。其中state、mutations 是一定要定义的,其他的三个属性对象根据实际需要。.

需要在项目的 main.ts 中将 Vuex 注册到全局实例中.

在文件中使用:通过 this.$store.state.xxx 来获取状态的值,可以直接使用状态,也可以在vue计算属性 computed 中使用。在页面的具体使用见 Admin.vue 内容。.

Admin.vue 状态管理页面Vuex. 此处定义路由时可能会报找不到模块“xxx”或其相应的类型声明。ts(2307) 的错误,该解决方案请移至文章末尾查看。.

问题:在用 vue3 中使用 ts时,在 .ts 文件中引入 .vue 文件时出现以下报错:.

原因:typescript 只能理解 .ts 文件,无法理解 .vue 文件.

解决方案:在项目根目录或 src 文件夹下创建一个后缀为 .d.ts 的 shims-vue.d.ts 文件,告诉 TS 如何理解 .vue 文件,并写入以下内容:.

如果写了这个还是报错的话,新建一个 tsconfig.json 文件,也可以解决不需要总是打开 shims-vue.d.ts 来解决 TS 报错的问题.

Vite2.0 已经发布了,如果想看一下具体内容,请参考:vite1.0还没学呢 这就出2.0了?.

Modified1 month ago. I have a summary page and a detail subpage.

All of the routes are implemented with vue-router (v 0.7.x) using programmatic navigation like this:.

However, when I route from the summary page to the subpage, I need to open the subpage in a new tab just as one would by adding _target="blank" to an tag.