尧图网站建设 
Umi 项目如何接入 Vue 编写 .vue 页面与配置路由【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi如果你的 Umi 项目里需要加入用 Vue 编写的.vue页面而不是全部使用 React官方提供的接入方式是安装umijs/preset-vue预设并在 Umi 配置中启用它。接入后你可以按约定式路由或配置式路由的方式组织.vue页面文件使用vue-router的命名路由、重定向、别名等能力并通过app.tsx中的运行时配置控制vue-router。官方文档说明 Umi Vue 大部分配置和 React 相同使用 Vue 一文只列出 Vue 独有的配置本文按“安装 → 启用预设 → 写页面 → 配路由 → 运行验证”的顺序走一遍完整路径。安装 umijs/preset-vue 并启用预设在 Umi 项目中安装预设pnpm add umijs/preset-vue -D然后在.umirc.ts或config/config.ts中通过presets配置启用// .umirc.ts or config/config.ts 中 export default { presets: [require.resolve(umijs/preset-vue)], };这就是接入 Vue 的全部必需配置。仓库中 packages/preset-vue/package.json 显示该预设依赖vue 3.2.45、vue-router 4.1.6和vue-loader 17.0.1即官方支持的是 Vue 3 技术栈。编写 .vue 页面启用预设后.vue文件与 React 页面一样参与约定式路由。可以参考仓库中的示例项目 examples/boilerplate-vue其pages/目录下就是.vue页面文件例如 pages/index.vuetemplate h1Hello Vue UmiJs/h1 /template script langts setup import { onMounted, ref } from vue; /script示例中的 pages/list/$id.vue 展示了动态参数页面用$前缀的文件名声明动态路由页面内通过useRoute取参数template h3List Detail/h3 divid: {{ route.params.id }}/div /template script langts setup import { useRoute } from umi; const route useRoute(); /script注意useRoute、useRouter等从umi导入而不是从vue-router导入。示例项目pages/下同时存在.vue、.tsx页面如 pages/demo-jsx/index.tsx说明两种技术栈可以在同一个项目里并存。配置路由name、redirect 与 alias约定式路由之外也可以用routes做配置式路由。官方文档强调这部分“仅列出和 React 路由配置差异部分”即 Vue 相比 React 多出来的配置项是name、redirect、alias。命名路由 name除了path可以为任何路由提供nameexport default { routes: [ { path: /user/:username, name: user, component: index } ] }链接到命名路由时向router-link的to属性传递对象router-link :to{ name: user, params: { username: erina }} User /router-link命令式调用效果一致router.push({ name: user, params: { username: erina } })两种方式都导航到路径/user/erina。重定向 redirect重定向同样在routes中配置下面的例子是从/home重定向到/export default { routes: [ { path: /home, redirect: / } ] }重定向目标也可以是命名路由export default { routes: [ { path: /home, redirect: { name: homepage } } ] }别名 alias访问/home时 URL 被替换为/再匹配这是重定向而别名是访问/home时 URL 仍保持/home但按/进行匹配export default { routes: [ { path: /, component: index, alias: /home } ] }别名可以结合嵌套路由使用用一个数组提供多个别名export default { routes: [ { path: /users, component: users, routes: [ // 为这 3 个 URL 呈现 UserList // - /users // - /users/list // - /people { path: , component: /users/UserList, alias: [/people, list] }, ] } ] }页面内跳转与 router 组件在.vue页面中跳转从umi导入useRouter和useRoutescript langts setup import { useRouter, useRoute } from umi; const router useRouter() const route useRoute() const onHello () { router.push({ name: search, query: { ...route.query, }, }) } /scriptrouter-link与router-view直接按vue-router的用法使用即可官方文档将两者细节指向 vue-router 的 Composition API 指南本文不再展开。运行时配置在 app.tsx 中控制 vue-router可以通过约定的src/app.tsx中的 export 来控制vue-router相关的配置仓库中的 examples/boilerplate-vue/app.tsx 是一个完整参考。router修改路由配置// src/app.tsx export const router: RouterConfig { // ts-ignore scrollBehavior(to, from) { console.log(scrollBehavior, to, from); }, };onMounted({ app, router })Vue app mount 成功后的回调可以拿到app实例与router实例用于全局组件注册、路由拦截器等export function onMounted({ app, router }: any) { app.provide(umi-hello, { h: hello, w: word, }); }示例项目在这里注册了router.beforeEach拦截器export function onMounted({ app, router }: any) { // ts-ignore router.beforeEach((to, from, next) { console.log(router beforeEach, to, from); next(); }); }rootContainer(container)修改交给vue-router渲染时的根组件比如在外面包一个父组件import { h } from vue export function rootContainer(container) { return h(ThemeProvider, null, container); }运行与验证示例项目 examples/boilerplate-vue/package.json 定义了常用脚本npm run dev # 对应 umi dev npm run build # 对应 umi build npm run preview # 对应 umi preview --port 6070 npm run setup # 对应 umi setuptsconfig.json继承./.umi/tsconfig.json即类型信息由umi setup/ 编译过程生成接入后如需补全类型提示可以执行setup脚本。功能验证可以参考示例项目自带的 Cypress 用例 cypress/e2e/smoke.cy.ts它通过启动开发服务器后断言页面内容来确认.vue页面被正确渲染以下断言来自该示例项目的测试代码是示例项目自身的校验项不代表你项目中必须出现的文本访问/后断言页面包含Hello Vue UmiJs、mock 接口返回的{a:1断言 layout 导航栏包含Home、Docs、About、List等链接点击导航后断言对应.vue页面如About Page、ListPage渲染成功。执行入口为示例项目的e2e脚本cypress run前置条件是dev脚本启动的开发服务器可用e2e:ci脚本则通过start-server-and-test等待http://localhost:5071/__umi/api/status就绪后再跑测试。可选分支与其他 Vue 相关示例需要状态管理时examples/with-vue-pinia 展示了在预设基础上叠加pinia依赖pinia ^2.0.28vue 3.2.45的完整项目结构脚本同样是umi dev/umi build/umi setup需要组件库时examples/with-vue-element-plus 提供了基于 Element Plus 的 Vue 页面示例。以上示例项目均只依赖umiumijs/preset-vue加各自的 Vue 生态包接入方式与正文一致安装预设、启用presets、在pages/下写.vue页面其余 Umi 配置mock、layout、约定式路由等与 React 项目相同。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Umi 项目如何接入 Vue 编写 .vue 页面与配置路由
Umi 项目如何接入 Vue 编写 .vue 页面与配置路由【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi如果你的 Umi 项目里需要加入用 Vue 编写的.vue页面而不是全部使用 React官方提供的接入方式是安装umijs/preset-vue预设并在 Umi 配置中启用它。接入后你可以按约定式路由或配置式路由的方式组织.vue页面文件使用vue-router的命名路由、重定向、别名等能力并通过app.tsx中的运行时配置控制vue-router。官方文档说明 Umi Vue 大部分配置和 React 相同使用 Vue 一文只列出 Vue 独有的配置本文按“安装 → 启用预设 → 写页面 → 配路由 → 运行验证”的顺序走一遍完整路径。安装 umijs/preset-vue 并启用预设在 Umi 项目中安装预设pnpm add umijs/preset-vue -D然后在.umirc.ts或config/config.ts中通过presets配置启用// .umirc.ts or config/config.ts 中 export default { presets: [require.resolve(umijs/preset-vue)], };这就是接入 Vue 的全部必需配置。仓库中 packages/preset-vue/package.json 显示该预设依赖vue 3.2.45、vue-router 4.1.6和vue-loader 17.0.1即官方支持的是 Vue 3 技术栈。编写 .vue 页面启用预设后.vue文件与 React 页面一样参与约定式路由。可以参考仓库中的示例项目 examples/boilerplate-vue其pages/目录下就是.vue页面文件例如 pages/index.vuetemplate h1Hello Vue UmiJs/h1 /template script langts setup import { onMounted, ref } from vue; /script示例中的 pages/list/$id.vue 展示了动态参数页面用$前缀的文件名声明动态路由页面内通过useRoute取参数template h3List Detail/h3 divid: {{ route.params.id }}/div /template script langts setup import { useRoute } from umi; const route useRoute(); /script注意useRoute、useRouter等从umi导入而不是从vue-router导入。示例项目pages/下同时存在.vue、.tsx页面如 pages/demo-jsx/index.tsx说明两种技术栈可以在同一个项目里并存。配置路由name、redirect 与 alias约定式路由之外也可以用routes做配置式路由。官方文档强调这部分“仅列出和 React 路由配置差异部分”即 Vue 相比 React 多出来的配置项是name、redirect、alias。命名路由 name除了path可以为任何路由提供nameexport default { routes: [ { path: /user/:username, name: user, component: index } ] }链接到命名路由时向router-link的to属性传递对象router-link :to{ name: user, params: { username: erina }} User /router-link命令式调用效果一致router.push({ name: user, params: { username: erina } })两种方式都导航到路径/user/erina。重定向 redirect重定向同样在routes中配置下面的例子是从/home重定向到/export default { routes: [ { path: /home, redirect: / } ] }重定向目标也可以是命名路由export default { routes: [ { path: /home, redirect: { name: homepage } } ] }别名 alias访问/home时 URL 被替换为/再匹配这是重定向而别名是访问/home时 URL 仍保持/home但按/进行匹配export default { routes: [ { path: /, component: index, alias: /home } ] }别名可以结合嵌套路由使用用一个数组提供多个别名export default { routes: [ { path: /users, component: users, routes: [ // 为这 3 个 URL 呈现 UserList // - /users // - /users/list // - /people { path: , component: /users/UserList, alias: [/people, list] }, ] } ] }页面内跳转与 router 组件在.vue页面中跳转从umi导入useRouter和useRoutescript langts setup import { useRouter, useRoute } from umi; const router useRouter() const route useRoute() const onHello () { router.push({ name: search, query: { ...route.query, }, }) } /scriptrouter-link与router-view直接按vue-router的用法使用即可官方文档将两者细节指向 vue-router 的 Composition API 指南本文不再展开。运行时配置在 app.tsx 中控制 vue-router可以通过约定的src/app.tsx中的 export 来控制vue-router相关的配置仓库中的 examples/boilerplate-vue/app.tsx 是一个完整参考。router修改路由配置// src/app.tsx export const router: RouterConfig { // ts-ignore scrollBehavior(to, from) { console.log(scrollBehavior, to, from); }, };onMounted({ app, router })Vue app mount 成功后的回调可以拿到app实例与router实例用于全局组件注册、路由拦截器等export function onMounted({ app, router }: any) { app.provide(umi-hello, { h: hello, w: word, }); }示例项目在这里注册了router.beforeEach拦截器export function onMounted({ app, router }: any) { // ts-ignore router.beforeEach((to, from, next) { console.log(router beforeEach, to, from); next(); }); }rootContainer(container)修改交给vue-router渲染时的根组件比如在外面包一个父组件import { h } from vue export function rootContainer(container) { return h(ThemeProvider, null, container); }运行与验证示例项目 examples/boilerplate-vue/package.json 定义了常用脚本npm run dev # 对应 umi dev npm run build # 对应 umi build npm run preview # 对应 umi preview --port 6070 npm run setup # 对应 umi setuptsconfig.json继承./.umi/tsconfig.json即类型信息由umi setup/ 编译过程生成接入后如需补全类型提示可以执行setup脚本。功能验证可以参考示例项目自带的 Cypress 用例 cypress/e2e/smoke.cy.ts它通过启动开发服务器后断言页面内容来确认.vue页面被正确渲染以下断言来自该示例项目的测试代码是示例项目自身的校验项不代表你项目中必须出现的文本访问/后断言页面包含Hello Vue UmiJs、mock 接口返回的{a:1断言 layout 导航栏包含Home、Docs、About、List等链接点击导航后断言对应.vue页面如About Page、ListPage渲染成功。执行入口为示例项目的e2e脚本cypress run前置条件是dev脚本启动的开发服务器可用e2e:ci脚本则通过start-server-and-test等待http://localhost:5071/__umi/api/status就绪后再跑测试。可选分支与其他 Vue 相关示例需要状态管理时examples/with-vue-pinia 展示了在预设基础上叠加pinia依赖pinia ^2.0.28vue 3.2.45的完整项目结构脚本同样是umi dev/umi build/umi setup需要组件库时examples/with-vue-element-plus 提供了基于 Element Plus 的 Vue 页面示例。以上示例项目均只依赖umiumijs/preset-vue加各自的 Vue 生态包接入方式与正文一致安装预设、启用presets、在pages/下写.vue页面其余 Umi 配置mock、layout、约定式路由等与 React 项目相同。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考