Question

我有一个使用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（我已经使用过）来编译组件。当显示为OK时，vueify已弃用，不受支持。此外，我必须在gulpfile.js中添加一堆东西才能使用Babel + ESLint作为组件。

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

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

Answer 1

这可能不是您要查找的答案，但是如果您是我，我会考虑inline templates和x-templates，因为它们似乎很适合您的用例。

也可以看看这个blog post。它提供了有关Vue中不同模板创作方法及其优点/缺点的不错的文章。

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

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

2 个答案:

结果

结论