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

Question

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

vue.jswebpackvue-cli

24

我正在使用Webpack构建一个Vue.js项目。我想要在项目中添加vue-cli的功能，以便像使用"vue-cli generate project"一样使用它。但我不知道如何将vue-cli集成到现有项目中。

对于新项目，我可以运行vue create <project-name>，但我找不到将其与现有项目集成的指导说明。是否有官方的方法来实现这个功能呢？（我想我可以创建一个新项目并将所有源文件移动到那里，但肯定还有更好的方法）

- serge1peshcoff

你尝试过这个命令 'npm install -g @vue/cli' 吗？ - Parth Jasani

2

没有官方的方法来做到这一点。文档明确指出Vue CLI是整个Vue应用程序，不涉及任何关于集成到现有项目的内容。 - Nino Filiu

1

@ParthJasani 是的，这不是关于安装vue-cli，而是将其添加到现有项目中。 - serge1peshcoff

@NinoFiliu 我也是这么想的，谢谢你澄清了一下 ;) 我会尝试将我的repo移动到一个新的vue-cli项目中，然后如果成功了，我会将其发布为答案。 - serge1peshcoff

你可以在现有项目的基础上创建一个新项目，并选择合并选项。当然，你的一些文件将被覆盖 :-( 使用 Git 进行还原，然后从你的仓库拉取。这就是我所做的。 - PhilMaGeo

你尝试从Vue UI导入项目文件夹了吗？ - Sinan Erdem

7个回答

8

使用终端，在项目文件夹中运行以下命令：

npx @vue/cli create .

- Gloria Morales Londoño

5

我以一种“痛苦”的方式来完成它——创建了一个新项目并与我的现有项目进行比较。我说痛苦是因为我直接在index页面中使用了Bootstrap，并且使用了PWA设置。我使用Parcel作为打包工具，我的文件夹都在根目录下（assets、components等）。

不过，这并没有那么糟糕。我为使过渡更容易所做的事情：

调整了文件夹层次结构和名称以匹配新项目
将缺少的插件添加到package.json
从index.html中删除所有PWA设置。它们会自动注入。
添加了新项目中缺少的文件和文件夹，即
- /public及其内容
- 根目录下的所有单独的配置文件
添加了.eslintignore，忽略node_modules/**
将index.js重命名为main.js（虽然可能不是必要的）
通过在main.js中导入bootstrap css来添加bootstrap样式
调整了图像路径（favicon和其他）。favicon路径和名称可能可以定制
将“serve”脚本更新为“vue-cli-service serve --host 127.0.0.1 --port 8080”，以便运行开发服务器

- Alen Siljak

1

在您的旧项目中使用 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>

- Lucas Venturini

0

在Vue项目管理器中，你可以通过$vue ui访问，选择导入选项并导入你想要使用的文件夹，并将vue-cli功能添加到其中。

- sahanda

0

所以，我找到了一个对我有效的更简单的解决方案。我正在使用Windows操作系统和WebStorm。

首先，使用我的Windows文件浏览器，我将所有文件移动到我想要的目录/文件夹中，并通过简单的剪切/复制和粘贴命名为我喜欢的应用程序名称。

接下来，我打开我的IDE（WebStorm），选择打开一个项目并选择新的目录/文件夹。在我的顶级文件夹中，我打开终端并输入： npx @vue/cli create --merge <您的目录/文件夹名称，也就是应用程序名称> 然后按ENTER键。

如果目录名称已经存在，则将CLI合并到此目录中。如果没有，则创建一个新目录并命名为新的应用程序名称。

最后，按照剩余的安装提示进行选择版本。

要启动开发服务器，请选择您的子目录或文件夹（在您新合并的应用程序下），打开终端，cd到文件夹路径（如果需要），输入命令：npm run serve并按ENTER键。这将启动并编译开发服务器，并为您的应用程序提供本地和网络地址。

我的文件结构如下：

主根目录：Vue CLI 应用程序 - 在此根目录下，我运行了 npx @vue/cli create --merge <Name of your directory/folder aka App Name> 命令。
1.1. 文件夹 appname
1.1.1 .idea (WebStorm)
1.1.1.1 项目设置名称
1.1.1.1.1 项目1 - 标题 - 在这个子文件夹下，我运行了 npm run serve 命令。

希望这能避免一些麻烦。

- Eli Allen

-3

sudo vue create .

确保你在项目目录中

- chougle saud

6

除非你有特殊的配置，否则使用 sudo 不太好--这意味着你正在以 root 身份而不是自己的用户身份安装东西，这可能不是你想要的。 - awwaiid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sikiru Abidemi Tiamiyu · Accepted Answer

在终端中进入项目文件夹，输入命令vue create .。