如何将vue-cli添加到现有项目中？
[英]How to add vue-cli to the existing project?
问题描述
I have a project on Vue.js using Webpack.
我有一个使用 Webpack 的 Vue.js 项目。 And I want to add vue-cli features to it so I can work with it like I do with vue-cli generate project.我想给它添加 vue-cli 功能，这样我就可以像使用 vue-cli 生成项目一样使用它。 But I don't know how to integrate vue-cli with existing project.但是我不知道如何将 vue-cli 与现有项目集成。
With new project I can do vue create <project-name but I couldn't find the instruction on integrating it with existing projects.对于新项目，我可以执行vue create <project-name但我找不到将其与现有项目集成的说明。 Is there an official way to do so?有官方的方法吗？ (I suppose I can just create the new project and move all of the sources there, but still probably there's a better way to do it) （我想我可以创建新项目并将所有源移动到那里，但仍然可能有更好的方法来做到这一点）
7 个解决方案
解决方案1
16 2020-06-01 11:25:26
Inside the Project Folder in the terminal enter vue create.在终端的项目文件夹中输入vue create.
解决方案2
5 2019-05-12 21:38:31
I did it the "painful" way - by creating a new project and comparing to my existing one.我以“痛苦”的方式做到了——通过创建一个新项目并与我现有的项目进行比较。 I say painful because I was using Bootstrap directly in index page, also PWA settings.我说痛苦是因为我直接在索引页面中使用 Bootstrap，还有 PWA 设置。 Parcel was used as a packager and my folders were all in the root (assets, components, etc.). Parcel 被用作打包器，我的文件夹都在根目录中（资产、组件等）。
However, it was not that bad.然而，它并没有那么糟糕。 The things I did to make the transition easier:我为使过渡更容易所做的事情：
- adjusted the folder hierarchy and names to match the new project调整了文件夹层次结构和名称以匹配新项目
- added the missing plugins to package.json将缺少的插件添加到 package.json
- removed all PWA settings from index.html.从 index.html 中删除了所有 PWA 设置。 They get injected automatically.他们会自动注射。
- added the missing files and folders from the new project, namely添加了新项目中缺少的文件和文件夹，即
- /public with contents /公开内容
- all the individual config files in root root 中的所有个人配置文件
- /public with contents
- added.eslintignore, ignoring node_modules/** added.eslintignore, 忽略 node_modules/**
- renamed index.js to main.js (although probably not necessary)将 index.js 重命名为 main.js（尽管可能没有必要）
- added bootstrap css through import in main.js通过在 main.js 中导入添加 bootstrap css
- adjusted image paths (favicon and others).调整图像路径（网站图标和其他）。 The favicon paths and names can probably be customized图标路径和名称可能可以自定义
- updated "serve" script to "vue-cli-service serve --host 127.0.0.1 --port 8080" in order to run the dev server将“服务”脚本更新为“vue-cli-service serve --host 127.0.0.1 --port 8080”以运行开发服务器
解决方案3
5 2020-07-05 09:38:26
Using the terminal, run next command inside your project folder:使用终端，在项目文件夹中运行下一个命令：
npx @vue/cli create .
解决方案4
1 2020-08-20 15:19:18
After creating the vue-project inside your old project with vue create.使用vue create. you can add the app like vue does it itself with the following code:你可以像 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
0 2020-12-30 23:43:44
In the Vue project manager, which you can access through $vue ui, choose the import option and import the folder you want to work with and add vue-cli features to.在您可以通过 $vue ui 访问的 Vue 项目管理器中，选择导入选项并导入您要使用的文件夹，并向其中添加 vue-cli 功能。
解决方案6
0 2021-06-17 20:08:13
So, I found an easier solution to this that worked for me.因此，我找到了一个对我有用的更简单的解决方案。 I am using Windows OS and WebStorm.我正在使用 Windows 操作系统和 WebStorm。
First, using my Windows File Explorer, I moved all my files into the directory/folder I wanted and titled it the App Name I preferred by a simple Cut/Copy & Paste.首先，使用我的 Windows 文件资源管理器，我将所有文件移动到我想要的目录/文件夹中，并通过简单的剪切/复制和粘贴将其命名为我喜欢的应用程序名称。
Next, I opened my IDE (WebStorm) and chose to Open a Project and selected the new directory/folder.接下来，我打开我的 IDE (WebStorm) 并选择打开一个项目并选择新目录/文件夹。 In my top level folder, I opened the terminal and entered: npx @vue/cli create --merge <Name of your directory/folder aka App Name> and then ENTER.在我的顶级文件夹中，我打开终端并输入： npx @vue/cli create --merge <Name of your directory/folder aka App Name>然后回车。
If the directory name already exists, it merged the CLI into this one.如果目录名称已经存在，它将 CLI 合并到这个目录中。 If not, it creates a new directory with the new App Name.如果不是，它会使用新的应用程序名称创建一个新目录。
Last, follow remaining install prompts to choose your version.最后，按照剩余的安装提示选择您的版本。
To initiate the development server, choose your sub-directory or folder (under your newly merged app), open the terminal, cd to the folder path(if needed), enter the command: npm run serve and ENTER.要启动开发服务器，请选择您的子目录或文件夹（在您新合并的应用程序下），打开终端，cd 到文件夹路径（如果需要），输入命令： npm run serve并回车。 This should start and compile to the development server and provide the local and network addresses for your app.这应该启动并编译到开发服务器，并为您的应用程序提供本地和网络地址。
My file structure looked like this:我的文件结构如下所示：
- Main Root: Vue CLI Apps - Under this root folder I ran the npx @vue/cli create --merge <Name of your directory/folder aka App Name> command.主根目录：Vue CLI Apps - 在这个根文件夹下，我运行了npx @vue/cli create --merge <Name of your directory/folder aka App Name>命令。
- 1.1. 1.1. Folder appname文件夹应用名称
- 1.1.1.idea (WebStorm) 1.1.1.idea（网络风暴）
- 1.1.1.1 Project Set Name 1.1.1.1 项目集名称
- 1.1.1.1.1 project 1 - Title - Under this subfolder is where I ran the npm run serve command. 1.1.1.1.1 项目 1 - 标题- 在这个子文件夹下是我运行npm run serve命令的地方。
Hope this saves a headache.希望这可以避免头痛。
解决方案7
-3 2020-03-10 07:09:43
sudo vue create .
make sure you are in project directory确保你在项目目录中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.