vuejs2 - 从 Pug 模板迁移到 VueJS 的明智方法是什么？

Question

我买了一个用 Bootstrap 5 制作的管理模板。在模板中的 Pug 文件中使用了变量和 mixins。例如：

my-vue-project/src/pug/index.pug：

extends layouts/LayoutTheme
include mixins/home/dashboard/Dashboard

prepend scripts
  script(src=`${CWD}vendors/echarts/echarts.min.js`)
  script(src=`${CWD}vendors/progressbar/progressbar.min.js`)

append variables
  - var pageTree = ['dashboard','dashboard','index']

append content
  +Dashboard

我不想粉碎用 Pug 编译的 HTML 文件并将它们导入 VueJS。相反，我想使用 Pug 模板，例如<template lang="pug">...</template>. 但是此时我遇到了两个问题：

1. Pug 文件使用mixins和其他xxx.pug文件。
2. VueJS 在my-vue-project/public/index.html. 但在我的 BS5 模板中，该文件my-vue-project/src/pug/index.pug是编译gulpfile.js并启动的。

问题： 您认为将这个 BS5 模板导入到我的 VueJS 项目中最合乎逻辑且最轻松的方式是什么？

目录示例：

.
├── babel.config.js
├── dist
│   ├── css
│   │   └── app.adf3b1b4.css
│   ├── favicon.ico
│   ├── img
│   │   ├── icons
│   │   └── logo.82b9c7a5.png
│   ├── index.html
│   ├── js
│   │   ├── about.674ad911.js
│   │   ├── about.674ad911.js.map
│   │   ├── app.cb56e622.js
│   │   ├── app.cb56e622.js.map
│   │   ├── chunk-vendors.3d365fc9.js
│   │   └── chunk-vendors.3d365fc9.js.map
│   ├── manifest.json
│   ├── precache-manifest.233c12a4d068926cdef1ea853fda8cda.js
│   ├── robots.txt
│   └── service-worker.js
├── node_modules [823 entries exceeds filelimit, not opening dir]
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── img
│   │   └── icons
│   ├── index.html
│   ├── robots.txt
│   └── vendors
│       ├── anchorjs
│       ├── bootstrap
│       ├── chart
│       ├── choices
│       ├── countup
│       ├── dayjs
│       ├── draggable
│       ├── dropzone
│       ├── echarts
│       ├── echarts-countries-js
│       ├── flatpickr
│       ├── fontawesome
│       ├── fullcalendar
│       ├── glightbox
│       ├── is
│       ├── leaflet
│       ├── leaflet.markercluster
│       ├── leaflet.tilelayer.colorfilter
│       ├── list.js
│       ├── lodash
│       ├── lottie
│       ├── overlayscrollbars
│       ├── plyr
│       ├── popper
│       ├── prism
│       ├── progressbar
│       ├── rater-js
│       ├── simplebar
│       ├── swiper
│       ├── tiny-slider
│       ├── tinymce
│       ├── typed.js
│       └── validator
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── js [51 entries exceeds filelimit, not opening dir]
│   ├── main.js
│   ├── pug
│   │   ├── app
│   │   ├── changelog.pug
│   │   ├── dashboard
│   │   ├── demo
│   │   ├── documentation
│   │   ├── index.pug
│   │   ├── layouts
│   │   ├── mixins
│   │   ├── modules
│   │   ├── pages
│   │   └── widgets.pug
│   ├── registerServiceWorker.js
│   ├── router
│   │   └── index.js
│   ├── scss
│   │   ├── _bootstrap.scss
│   │   ├── _user-variables.scss
│   │   ├── theme
│   │   ├── theme.scss
│   │   └── user.scss
│   ├── store
│   │   └── index.js
│   └── views
│       ├── About.vue
│       └── Home.vue
└── vue.config.js

标签： vuejs2pugbootstrap-themes