vue.js - 在更大的项目中创建单个 Vue 组件

Question

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

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

我希望组件在那里呈现。仅此而已。

经过一番考虑，我提出了以下选项，但发现每个选项都存在问题:

1. 使用 Vue CLI for instant prototyping .这是最接近我的用例的解决方案，但我无法轻松开发该组件。如果我使用 vue serve，我会看到在新页面中隔离的组件。问题在于该组件不是我项目页面的一部分。它不受其样式表、布局和其他脚本的影响。一旦我构建它并在我的项目中查看它，我不知道它是否会正常工作。在每次更改时运行 vue build 将是非常痛苦和耗时的。可悲的是，vue watch 不是一个东西，这导致我:

2. 创建项目并使用 Vue CLI Service .如果我创建一个项目，我将能够运行 vue-cli-service build --watch 并让我的组件在其源文件的每次更改时自动刷新。在开发组件时，我只需进行更改，等待它编译，然后在浏览器中刷新我的项目以查看修改后的组件的运行情况。虽然这可行，但它在我的项目中引入了一堆 node_modules，以及一个 package.json。我觉得这对于单个组件来说太多了。它会比我想要的更严重地污染项目:

   assets/
     js/
       build/
       calculator/
         dist/
         node_modules/  # modules here
         public/        # I don't need that
         package.json   # package here
         package-lock.json
         App.vue
       scripts/
       main.js
   content/
   site/
   node_modules/  # modules here as well
   panel/
   package.json   # package here as well
   package-lock.json
   index.php
   

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

3. 使用 vueify使用 Browserify 和 Gulp(我已经使用过)编译组件。虽然这看起来不错，但 vueify 已被弃用且不受支持。此外，我必须向我的 gulpfile.js 添加一堆东西，以便为组件使用 Babel + ESLint。

---

我该如何设置 Vue，以便能够尽可能少地开发一个非常简单的组件作为大型项目的一部分？

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

Answer 1

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

1. 我在终端中打开了项目的父文件夹。
2. 我运行了 vue create my-project，其中 my-project 是我项目的实际文件夹名称。 CLI 询问是否应该覆盖项目或合并它。我选择合并。
3. 项目创建后，我原来的package.json被覆盖了，里面只列出了Vue依赖。
4. 我还原了旧的 package.json 并安装了这些包:@vue/cli-plugin-babel、@vue/cli-service、vue-template-compiler 和 vue。

5. 我在我的 package.json 中添加了以下 npm 脚本:

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

结果

我项目的文件夹结构保持不变，除了 node_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 被覆盖的部分有点令人担忧，但除此之外 - 它工作得很好。如果有更好的方法，请留下答案!