blocks|key|4880908|text|在终端的项目文件夹中输入vue+create+.|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4880909|entityMap^0|C|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Inside the Project Folder in the terminal enter <code>vue create .</code>

blocks|key|2767991|text|我以一种“痛苦”的方式做了这件事--创建了一个新项目，并与现有的项目进行了比较。我说痛苦是因为我直接在索引页面和PWA设置中使用Bootstrap。Parcel被用作打包程序，我的文件夹都在根目录下(资产、组件等)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2767992|然而，这并不是那么糟糕。我所做的事情使过渡变得更容易：|2767993|2767994|调整了文件夹层次结构和名称以匹配新项目，|unordered-list-item|2767995|添加了缺失的插件到|2767996|2767997|+index.html的所有PWA设置。他们将新项目中缺失的文件和文件夹注入root中，即|2767998|/public+automatically.|2767999|added+contents|2768000|所有单独的配置文件|2768001|2768002|​|2768003|2768004|添加了.eslintignore，忽略了node_modules/**|2768005|renamed+index.js+to+main.js+(尽管可能不是通过导入main.js|2768006|adjusted图像路径(favicon和其他)来引导main.js)。为了运行开发服务器|2768007|，收藏夹的路径和名称可能是“customized|2768008|updated”脚本"vue-cli-service+service--host127.0.0.1--port8080“|2768009|2768010|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|1C|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|1D|8|@]|9|@]|A|$]]|$1|J|3|-4|5|G|7|1E|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1F|8|@]|9|@]|A|$]]|$1|M|3|N|5|G|7|1G|8|@]|9|@]|A|$]]|$1|O|3|P|5|G|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|G|7|1I|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1K|8|@]|9|@]|A|$]]|$1|V|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]|$1|W|3|X|5|G|7|1M|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|G|7|1N|8|@]|9|@]|A|$]]|$1|10|3|11|5|G|7|1O|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1P|8|@]|9|@]|A|$]]|$1|14|3|15|5|G|7|1Q|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|18|$]]

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. Parcel was used as a packager and my folders were all in the root (assets, components, etc.).

However, it was not that bad. The things I did to make the transition easier:

<ul>
<li>adjusted the folder hierarchy and names to match the new project</li>
<li>added the missing plugins to package.json</li>
<li>removed all PWA settings from index.html. They get injected automatically.</li>
<li>added the missing files and folders from the new project, namely 

<ul>
<li>/public with contents</li>
<li>all the individual config files in root</li>
</ul></li>
<li>added .eslintignore, ignoring node_modules/**</li>
<li>renamed index.js to main.js (although probably not necessary)</li>
<li>added bootstrap css through import in main.js</li>
<li>adjusted image paths (favicon and others). The favicon paths and names can probably be customized</li>
<li>updated "serve" script to "vue-cli-service serve --host 127.0.0.1 --port 8080" in order to run the dev server</li>
</ul>

blocks|key|4880919|text|使用终端，在项目文件夹中运行下一条命令：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4880920|npx+@vue/cli+create+.|code-block|syntax|javascript|4880921|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Using the terminal, run next command inside your project folder:
<pre><code>npx @vue/cli create .
</code></pre>

blocks|key|2768043|text|在使用vue+create+.在旧项目中创建vue-project之后，您可以使用以下代码添加应用程序，就像vue本身一样：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2768044|<!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>
++++
++++<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>
++++++++We're+sorry+but+planer-demo+doesn't+work+properly+without+JavaScript+enabled.+Please+enable+it+to+continue.
++++</noscript>
++++
++++<div+id=app></div>+
++++
++++<script+src=/js/chunk-vendors.d84bf368.js></script>
++++<script+src=/js/app.ccdcf352.js></script>
</body>
</html>|code-block|syntax|javascript|2768045|entityMap^0|3|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

After creating the vue-project inside your old project with <code>vue create .</code> you can add the app like vue does it itself with the following code:
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=en&gt;
&lt;head&gt;
 &lt;meta charset=utf-8&gt;
 &lt;meta http-equiv=X-UA-Compatible content=&quot;IE=edge&quot;&gt;
 &lt;meta name=viewport content=&quot;width=device-width,initial-scale=1&quot;&gt;
 &lt;link rel=icon href=/favicon.ico&gt;
 &lt;title&gt;planer-demo&lt;/title&gt;
 &lt;!-- STYLES AND SCRIPTS NEEDED FOR THE APP --&gt;
 &lt;link href=/css/app.e1774689.css rel=preload as=style&gt;
 &lt;link href=/js/app.ccdcf352.js rel=preload as=script&gt;
 &lt;link href=/js/chunk-vendors.d84bf368.js rel=preload as=script&gt;
 &lt;link href=/css/app.e1774689.css rel=stylesheet&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;noscript&gt;
 &lt;strong&gt;We're sorry but planer-demo doesn't work properly without JavaScript enabled. Please enable it to continue.&lt;/strong&gt;
 &lt;/noscript&gt;
 &lt;!-- WHERE WE'LL LOAD THE APP --&gt;
 &lt;div id=app&gt;&lt;/div&gt; 
 &lt;!-- SCRIPTS NEEDED FOR THE APP --&gt;
 &lt;script src=/js/chunk-vendors.d84bf368.js&gt;&lt;/script&gt;
 &lt;script src=/js/app.ccdcf352.js&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

blocks|key|4880970|text|在您可以通过$vue+ui访问的Vue项目管理器中，选择导入选项，导入您想要使用的文件夹，并将vue-cli特性添加到其中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4880971|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|2768132|text|因此，我找到了一个对我有效的更简单的解决方案。我使用的是Windows操作系统和WebStorm。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2768133|首先，使用我的Windows文件资源管理器，我将所有文件移动到我想要的目录/文件夹中，并通过简单的剪切/复制和粘贴将其命名为我喜欢的应用程序名称。|offset|length|style|BOLD|2768134|接下来，我打开我的集成开发环境(WebStorm)，选择打开一个项目，然后选择新的目录/文件夹。在我的顶层文件夹中，我打开终端并输入：npx+@vue/cli+create+--merge+，然后输入。|2768135|如果该目录名称已存在，则会将CLI合并到此目录名称中。如果没有，它将使用新的应用程序名称创建一个新目录。|2768136|最后，按照剩余的安装提示选择您的版本。|2768137|2768138|要启动开发服务器，请选择您的子目录或文件夹(在新合并的应用程序下)，打开终端，cd至文件夹路径(如果需要)，输入命令：npm+run+serve并输入。这将启动并编译到开发服务器，并提供应用程序的本地和网络地址。|2768139|2768140|我的文件结构是这样的：|2768141|2768142|主根目录:+Vue+CLI+command.|unordered-list-item|2768143|1.1.+-在此根文件夹下，我运行了merge+npx+@vue/cli+create+--merge+<您的目录/文件夹的名称又名应用程序Name>+Apps文件夹appname|2768144|1.1.1+(WebStorm)|2768145|1.1.1.1项目设置Name|2768146|1.1.1.1.1+.idea+1-标题-在这个子文件夹下，我运行了npm+run+.idea命令。|2768147|2768148|希望这不会让你头疼。|2768149|entityMap^0|0|1U|6|0|1V|S|0|0|0|0|1N|D|0|0|0|0|0|0|0|0|Y|D|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1H|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1I|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1K|8|@$D|1L|E|1M|F|G]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1O|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1Q|8|@]|9|@]|A|$]]|$1|X|3|Y|5|W|7|1R|8|@]|9|@]|A|$]]|$1|Z|3|10|5|W|7|1S|8|@]|9|@]|A|$]]|$1|11|3|12|5|W|7|1T|8|@]|9|@]|A|$]]|$1|13|3|14|5|W|7|1U|8|@$D|1V|E|1W|F|G]]|9|@]|A|$]]|$1|15|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|18|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|19|$]]

So, I found an easier solution to this that worked for me. I am using Windows OS and 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 &amp; Paste.
Next, I opened my IDE (WebStorm) and chose to Open a Project and selected the new directory/folder. In my top level folder, I opened the terminal and entered:
npx @vue/cli create --merge &lt;Name of your directory/folder aka App Name&gt;
and then ENTER.
If the directory name already exists, it merged the CLI into this one. If not, it creates a new directory with the new App Name.
Last, follow remaining install prompts to choose your version.
<hr />
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. This should start and compile to the development server and provide the local and network addresses for your app.
<hr />
My file structure looked like this:
<ul>
<li>Main Root: Vue CLI Apps - Under this root folder I ran the npx @vue/cli create --merge &lt;Name of your directory/folder aka App Name&gt; command.</li>
<li>1.1. Folder appname</li>
<li>1.1.1 .idea (WebStorm)</li>
<li>1.1.1.1 Project Set Name</li>
<li>1.1.1.1.1 project 1 - Title - Under this subfolder is where I ran the npm run serve command.</li>
</ul>
Hope this saves a headache.

blocks|key|2006234|text|sudo+vue+create+.|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2006235|确保您在项目目录中|unstyled|2006236|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>sudo vue create .
</code></pre>

make sure you are in project directory

I have a project on Vue.js using Webpack. And I want to add vue-cli features to it so I can work with it like I do with vue-cli generate project. But I don't know how to integrate vue-cli with existing project.

With new project I can do <code>vue create &lt;project-name</code> but I couldn't find the instruction on integrating it with existing projects. 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)

How to add vue-cli to the existing project?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我在Vue.js上有一个项目，使用的是Webpack。我想给它添加vue-cli特性，这样我就可以像使用vue-cli生成项目一样使用它了。但我不知道如何将vue-cli与现有项目集成。有了新项目，我可以做vue create <project-name，但我找不到将其与现有项目集成的说明。有没有官方的方法来做到这一点？(我想我可以创建新项目并将所有源代码移到那里，但仍然可能有更好的方法来完成)

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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