Блог

Главная - Вопросы по программированию - Каков разумный способ перехода с шаблона Мопса на VueJS?

Каков разумный способ перехода с шаблона Мопса на VueJS?

#vuejs2 #pug #bootstrap-themes

Вопрос:

Я купил шаблон администратора, созданный с помощью Bootstrap 5. Переменные и миксины используются в файлах Pug в шаблоне. Например:

мой-vue-проект/src/мопс/индекс.мопс:

 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

Я не хочу уничтожать HTML-файлы, скомпилированные с помощью Pug, и импортировать их в VueJS. Вместо этого я хочу использовать шаблоны мопсов, такие как <template lang="pug">...</template> . Но в этот момент я сталкиваюсь с двумя проблемами:

  1. Файлы мопса используют mixins и другие xxx.pug файлы.
  2. Вуйс встает 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
Метки: