如何在现有项目中添加vue-cli?

时间:2019-04-11 13:31:50

标签: vue.js webpack vue-cli

我有一个使用Webpack的Vue.js项目。而且我想为其添加vue-cli功能,以便可以像处理vue-cli生成项目一样使用它。但是我不知道如何将vue-cli与现有项目集成。

有了新项目,我可以做vue create <project-name,但找不到与现有项目集成的说明。有官方的方法吗? (我想我可以创建一个新项目,然后将所有源代码移到那里,但可能仍然有更好的方法来做到这一点)

7 个答案:

答案 0 :(得分:7)

在终端的项目文件夹内,输入vue create .

答案 1 :(得分:0)

我做到了“痛苦”的方式-通过创建一个新项目并与我现有的项目进行比较。我之所以痛苦,是因为我直接在索引页和PWA设置中使用了Bootstrap。包裹被用作打包程序,我的文件夹都位于根目录(资产,组件等)中。

但是,还不错。我为简化过渡所做的事情:

  • 调整了文件夹层次结构和名称以匹配新项目
  • 将缺少的插件添加到package.json
  • 从index.html中删除了所有PWA设置。他们会自动注射。
  • 添加了新项目中缺少的文件和文件夹,即
    • /具有内容的公开
    • 根目录中的所有单个配置文件
  • 添加了.eslintignore,忽略了node_modules / **
  • 将index.js重命名为main.js(尽管可能没有必要)
  • 在main.js中通过导入添加了引导CSS
  • 调整后的图像路径(图标和其他)。网站图标的路径和名称可能可以自定义
  • 将“ serv”脚本更新为“ vue-cli-service serve --host 127.0.0.1 --port 8080”,以运行开发服务器

答案 2 :(得分:0)

使用终端,在项目文件夹中运行下一个命令:

npx @vue/cli create .

答案 3 :(得分:0)

使用__iter__在旧项目中创建vue-project后,您可以像使用vue一样通过以下代码添加应用程序:

vue create .

答案 4 :(得分:0)

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

答案 5 :(得分:0)

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

首先,使用我的 Windows 文件资源管理器,我将所有文件移动到我想要的目录/文件夹中,并通过简单的剪切/复制和粘贴将其命名为应用程序名称

接下来,我打开了我的 IDE (WebStorm) 并选择了 Open a Project 并选择了新的目录/文件夹。在我的顶级文件夹中,我打开终端并输入: npx @vue/cli create --merge <您的目录/文件夹的名称,也就是应用程序名称> 然后输入。

如果目录名已经存在,它会将 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 命令。

希望这样可以避免头痛。

答案 6 :(得分:-1)

sudo vue create .

确保您位于项目目录中