如何将 vue-cli 添加到现有项目中？
Posted
技术标签:
【中文标题】如何将 vue-cli 添加到现有项目中？【英文标题】：How to add vue-cli to the existing project? 【发布时间】：2019-09-02 03:55:28 【问题描述】：我有一个使用 Webpack 的 Vue.js 项目。我想向它添加 vue-cli 功能，这样我就可以像使用 vue-cli 生成项目一样使用它。但我不知道如何将 vue-cli 与现有项目集成。
对于新项目，我可以做vue create <project-name，但我找不到将它与现有项目集成的说明。有官方的方法吗？ （我想我可以创建新项目并将所有资源移到那里，但可能还有更好的方法）
【问题讨论】：
你试过这个命令 'npm install -g @vue/cli' 吗？ 官方没有办法做到这一点。 The docs 准确地说 Vue CLI 是整个 Vue 应用程序，并没有说明任何关于集成到现有项目中的内容。 @ParthJasani 是的，这不是关于安装 vue-cli，而是关于将其添加到现有项目中 @NinoFiliu 我也是这么想的，感谢您的澄清；）我会尝试将我的 repo 移动到一个新的 vue-cli 项目，正如我当时描述的那样，如果有的话，我会把它作为答案发布会成功的 您可以在现有项目上创建一个项目并选择合并选项。当然，您的部分文件将被覆盖 :-( 然后使用 git 还原并从您的存储库中提取。这就是我所做的 【参考方案1】：在终端的项目文件夹中输入vue create .
【讨论】：
【参考方案2】：我以“痛苦”的方式做到了——通过创建一个新项目并与我现有的项目进行比较。我说很痛苦，因为我直接在索引页面中使用 Bootstrap，还有 PWA 设置。 Parcel 被用作打包程序，我的文件夹都在根目录中（资产、组件等）。
然而，它并没有那么糟糕。我为简化过渡所做的事情：
调整了文件夹层次结构和名称以匹配新项目 将缺少的插件添加到 package.json 从 index.html 中删除了所有 PWA 设置。它们会自动注入。 添加了新项目中缺少的文件和文件夹，即 /公开内容 根目录下的所有单个配置文件 添加 .eslintignore，忽略 node_modules/** 将 index.js 重命名为 main.js（虽然可能没有必要） 通过在 main.js 中导入添加引导 css 调整了图像路径（网站图标和其他）。 favicon 路径和名称可能可以自定义 将“serve”脚本更新为“vue-cli-service serve --host 127.0.0.1 --port 8080”，以便运行开发服务器【讨论】：
【参考方案3】：使用终端，在项目文件夹中运行下一个命令：
npx @vue/cli create .
【讨论】：
【参考方案4】：使用vue create . 在旧项目中创建 vue 项目后，您可以像 vue 一样使用以下代码添加应用程序：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel=icon href=/favicon.ico>
<title>planer-demo</title>
<!-- STYLES AND SCRIPTS NEEDED FOR THE APP -->
<link href=/css/app.e1774689.css rel=preload as=style>
<link href=/js/app.ccdcf352.js rel=preload as=script>
<link href=/js/chunk-vendors.d84bf368.js rel=preload as=script>
<link href=/css/app.e1774689.css rel=stylesheet>
</head>
<body>
<noscript>
<strong>We're sorry but planer-demo doesn't work properly without javascript enabled. Please enable it to continue.</strong>
</noscript>
<!-- WHERE WE'LL LOAD THE APP -->
<div id=app></div>
<!-- SCRIPTS NEEDED FOR THE APP -->
<script src=/js/chunk-vendors.d84bf368.js></script>
<script src=/js/app.ccdcf352.js></script>
</body>
</html>
【讨论】：
【参考方案5】：在您可以通过 $vue ui 访问的 Vue 项目管理器中，选择导入选项并导入您要使用的文件夹并向其中添加 vue-cli 功能。
【讨论】：
【参考方案6】：所以，我找到了一个对我有用的更简单的解决方案。我正在使用 Windows 操作系统和 WebStorm。
首先，使用我的 Windows 文件资源管理器，我将所有文件移动到我想要的目录/文件夹中，并通过简单的剪切/复制和粘贴将其命名为 应用名称。
接下来，我打开了我的 IDE (WebStorm) 并选择了打开一个项目并选择了新的目录/文件夹。在我的***文件夹中，我打开终端并输入： npx @vue/cli create --merge 然后 ENTER。
如果目录名称已经存在，它会将 CLI 合并到这个目录中。如果没有，它会使用新的应用名称创建一个新目录。
最后，按照剩余的安装提示选择您的版本。
要启动开发服务器，选择您的子目录或文件夹（在您新合并的应用程序下），打开终端，cd 到文件夹路径（如果需要），输入命令：npm run serve强> 和 ENTER。这应该会启动并编译到开发服务器，并为您的应用提供本地地址和网络地址。
我的文件结构如下所示：
主根目录：Vue CLI 应用程序 - 在此根文件夹下，我运行了 npx @vue/cli create --merge希望这样可以避免头痛。
【讨论】：
【参考方案7】：sudo vue create .
确保您在项目目录中
【讨论】：
除非您有非标准配置，否则使用sudo 并不好 - 意味着您以 root 而不是您自己的用户身份安装东西，这可能不是您想要的。跨度>
以上是关于如何将 vue-cli 添加到现有项目中？的主要内容，如果未能解决你的问题，请参考以下文章
如何将 SASS 文件添加到 bootstrap-vue/webpack（vue-cli 项目）？
如何将 vue-cli 与同一个项目中现有的不相关 webpack 设置集成？