来自@ vue-cli，如何用“简单的”三文件设置ala Codepen表示项目？

编程问答 2022-06-12

问题描述

我有一个@ vue-cli生成的项目，我需要将其移植到简单的“三个文件”设置（即，仅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中，但是该开发环境对于任何类型的认真编辑和操作来说都是残酷的...所以这就是为什么我想将其构建并测试东西 外部 ，然后在我对结果满意后将其全部粘贴。

我尝试使用标准的main.js语法将所有组件代码提取到Vue.component('<name>',{ <options> })中，但是效果不佳...

有什么想法吗？感谢您的帮助，对于如此广泛的问题深表歉意！

PS：或者！也许我正在以错误的方式进行操作。与其尝试“ de-CLI” CLI应用程序结构，不如创建npm run serve之类的舒适的“三文件” Vue应用程序，并通过热加载轻松查看页面上的实际操作？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

codepenvue-clivue.js