Блог

У меня есть сгенерированный @ vue-cli проект, который мне нужно перенести на простую «трехфайловую» настройку (только ie index.html , index.js , и index.css), чтобы я мог продемонстрировать его части в Codepen.

Тем не менее, мне трудно разобраться в структуре «cli» приложения. Основная проблема, по-видимому, двоякая:

1. CLI настроен на использование однофайловых компонентов, тогда как Codepen ожидает, что все будет включено «в строку» в js файл
2. Webpack творит свою магию в фоновом режиме, чтобы скомпилировать все вместе на основе однофайловой компонентной структуры CLI и т. Д.

Например, внутри main.js файла приложение CLI импортирует различные модули, связанные с Vue, затем инициализирует экземпляр Vue с помощью

 new Vue({
  render: h => h(App)
}).$mount('#app')
  

Это, конечно, соответствует содержанию index.html

 ...
<div id="app"></div>
  

Прямо сейчас я вручную копирую и вставляю вещи в Codepen, но эта среда разработки просто ужасна для любого серьезного редактирования и манипуляций… Вот почему я хотел бы создать его и протестировать ЗА пределами Codepen, а затем вставить все это, как только я буду доволен результатами.

Я попытался использовать весь код компонента main.js , используя стандартный Vue.component('<name>', { <options> }) синтаксис, но он работает плохо…

Есть идеи? Спасибо за помощь, извините за такой широкий вопрос!

PS: ИЛИ! Может быть, я делаю это неправильно. Вместо того, чтобы пытаться «де-CLI» структуру приложения CLI, как я мог бы создать простое «трехфайловое» приложение Vue с удобствами, например npm run serve , с горячей загрузкой, чтобы видеть вещи в действии на странице?