Vue.js 在较大的项目中创建单个Vue组件

我有一个使用Kirby CMS的PHP项目。我还使用Gulp来构建我的资产。现在，我需要在主页上添加一个计算器，它足够复杂，足以证明使用Vue的合理性。如何在不引入大量新工具的情况下将Vue纳入项目中？我想要的只是一个简单的单文件组件。我有：

<div id="calculator"></div>

我基本上会在一个项目中有一个项目

使用Browserify和Gulp编译组件（我已经使用了）。虽然这看起来还行，但vueify已弃用且不受支持。此外，为了使用Babel+ESLint作为组件，我必须在我的

gulpfile.js

中添加一些东西

---

如何设置Vue，使我能够开发一个非常简单的组件，将其作为一个更大项目的一部分，并尽可能减少摩擦

---

如果有人处理过类似的问题，他们是如何解决的？

这可能不是您想要的答案，但如果我是您，我会仔细研究，因为它们似乎非常适合您的用例

---

也看看这个。它提供了一篇关于Vue中不同模板创作方法及其优缺点的精彩文章。

我最后使用了我在问题中提到的第二种方法，但有一个小小的转折——我在主项目中初始化了Vue项目。我合并了它们

我在终端中打开了项目的父文件夹

我运行了

vue create my project

，其中

my project

是我项目的实际文件夹名。CLI询问是应该覆盖项目还是合并项目。我选择了合并

创建项目后，我的旧

package.json

被覆盖，其中只列出了Vue依赖项

我恢复了旧的

包.json

并安装了以下包：

@vue/cli plugin babel

，

@vue/cli service

，

vue模板编译器

，以及

vue

我在我的

包.json中添加了以下npm脚本：

"scripts": {
  "calculator": "vue-cli-service build assets/js/calculator/main.js --watch --dest assets/js/calculator/build"
}

结果 我的项目的文件夹结构保持不变，除了

node\u modules

中的一些新包。我将组件文件放在

assets/js/calculator/

中。在这里，我有

main.js

，它是主组件脚本，还有

build

，它是一个包含已处理组件的文件夹

我有：

<div id="calculator"></div>

在我的页面中，以及：

<script src="/assets/js/calculator/build/app.js"></script>

在页脚。当我打开页面时，组件被正确呈现

要修改该组件，我只需在终端中运行

npm run calculator

，即可启动CLI服务。它监视

main.js

文件，并根据每次更改构建组件。构建完成后（不到一秒钟），我刷新页面，更新的组件就在那里

结论

---

我相信这是处理这个用例最流畅的方法。它没有使项目膨胀，列出了所有依赖项，开发经验非常好。我的

package.json

被覆盖的部分有点令人担忧，但除此之外，它工作得非常好。如果有更好的方法，请留下答案

我最初没有想到内联模板。不过，我相信我找到了答案（你可以检查我的答案）。另外，感谢您提供的有用链接。

<script src="/assets/js/calculator/build/app.js"></script>