在更大的项目中创建单个 Vue 组件答案

【问题标题】：Creating a single Vue component inside a larger project在更大的项目中创建单个 Vue 组件
【发布时间】：2019-06-18 05:29:46
【问题描述】：

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

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

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

经过一番考虑，我想出了以下选项，但发现每个选项都有问题：

使用Vue CLI for instant prototyping。这是我用例最接近的解决方案，但我无法轻松开发组件。如果我使用vue serve，我会在新页面中看到隔离的组件。问题在于该组件不是我项目页面的一部分。它不受其样式表、布局和其他脚本的影响。一旦我构建它并在我的项目中查看它，我不知道它是否会正常工作。在每次更改时运行 vue build 会非常痛苦且耗时。可悲的是，vue watch 不是一个东西，这导致我：
创建一个项目并使用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
```
我基本上会在一个项目中拥有一个项目。
使用 vueify 通过 Browserify 和 Gulp（我已经使用）编译组件。虽然这看起来不错，但 vueify 已被弃用且不受支持。此外，我必须在我的 gulpfile.js 中添加一堆东西才能使用 Babel + ESLint 作为组件。

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

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

【问题讨论】：

标签： vue.js vue-cli

【解决方案1】：

这可能不是您要寻找的答案，但如果我是您，我会研究 inline templates 和 x-templates，因为它们似乎非常适合您的用例。

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

【讨论】：

内联模板最初并没有出现在我的脑海中。不过，我相信我想通了（您可以查看我的答案）。另外，感谢您提供有用的链接。

【解决方案2】：

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

我在终端中打开了项目的父文件夹。
我运行了vue create my-project，其中my-project 是我项目的实际文件夹名称。 CLI 询问它是否应该覆盖项目或合并它。我选择了合并。
创建项目后，我的旧 package.json 被覆盖，其中仅列出了 Vue 依赖项。
我恢复了旧的 package.json 并安装了以下软件包：@vue/cli-plugin-babel、@vue/cli-service、vue-template-compiler 和 vue。

我在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 被覆盖的部分有点令人担忧，但除此之外 - 它工作得很好。如果有更好的方法，请留下答案！

【讨论】：