如何将 vue-cli 添加到现有项目中？答案

【问题标题】：How to add vue-cli to the existing project?如何将 vue-cli 添加到现有项目中？
【发布时间】：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 还原并从您的存储库中提取。这就是我所做的

标签： vue.js webpack vue-cli

【解决方案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 命令。
1.1。文件夹应用名称
1.1.1 .idea (WebStorm)
1.1.1.1 项目集名称
1.1.1.1.1 项目 1 - 标题 - 在此子文件夹下是我运行 npm run serve 命令的位置。

希望这样可以避免头痛。

【讨论】：

【解决方案7】：

sudo vue create .

确保您在项目目录中

【讨论】：

除非您有非标准配置，否则使用 sudo 并不好 - 意味着您以 root 而不是您自己的用户身份安装东西，这可能不是您想要的。跨度>