如何將vue-cli添加到現有項目中？
[英]How to add vue-cli to the existing project?
問題描述
我有一個使用 Webpack 的 Vue.js 項目。 我想給它添加 vue-cli 功能，這樣我就可以像使用 vue-cli 生成項目一樣使用它。 但是我不知道如何將 vue-cli 與現有項目集成。
對於新項目，我可以執行vue create <project-name但我找不到將其與現有項目集成的說明。 有官方的方法嗎？ （我想我可以創建新項目並將所有源移動到那里，但仍然可能有更好的方法來做到這一點）
7 個解決方案
解決方案1
16 2020-06-01 11:25:26
在終端的項目文件夾中輸入vue create.
解決方案2
5 2019-05-12 21:38:31
我以“痛苦”的方式做到了——通過創建一個新項目並與我現有的項目進行比較。 我說痛苦是因為我直接在索引頁面中使用 Bootstrap，還有 PWA 設置。 Parcel 被用作打包器，我的文件夾都在根目錄中（資產、組件等）。
然而，它並沒有那么糟糕。 我為使過渡更容易所做的事情：
- 調整了文件夾層次結構和名稱以匹配新項目
- 將缺少的插件添加到 package.json
- 從 index.html 中刪除了所有 PWA 設置。 他們會自動注射。
- 添加了新項目中缺少的文件和文件夾，即
- /公開內容
- root 中的所有個人配置文件
- added.eslintignore, 忽略 node_modules/**
- 將 index.js 重命名為 main.js（盡管可能沒有必要）
- 通過在 main.js 中導入添加 bootstrap css
- 調整圖像路徑（網站圖標和其他）。 圖標路徑和名稱可能可以自定義
- 將“服務”腳本更新為“vue-cli-service serve --host 127.0.0.1 --port 8080”以運行開發服務器
解決方案3
5 2020-07-05 09:38:26
使用終端，在項目文件夾中運行下一個命令：
npx @vue/cli create .
解決方案4
1 2020-08-20 15:19:18
使用vue create. 你可以像 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
在您可以通過 $vue ui 訪問的 Vue 項目管理器中，選擇導入選項並導入您要使用的文件夾，並向其中添加 vue-cli 功能。
解決方案6
0 2021-06-17 20:08:13
因此，我找到了一個對我有用的更簡單的解決方案。 我正在使用 Windows 操作系統和 WebStorm。
首先，使用我的 Windows 文件資源管理器，我將所有文件移動到我想要的目錄/文件夾中，並通過簡單的剪切/復制和粘貼將其命名為我喜歡的應用程序名稱。
接下來，我打開我的 IDE (WebStorm) 並選擇打開一個項目並選擇新目錄/文件夾。 在我的頂級文件夾中，我打開終端並輸入： npx @vue/cli create --merge <Name of your directory/folder aka App Name>然后回車。
如果目錄名稱已經存在，它將 CLI 合並到這個目錄中。 如果不是，它會使用新的應用程序名稱創建一個新目錄。
最后，按照剩余的安裝提示選擇您的版本。
要啟動開發服務器，請選擇您的子目錄或文件夾（在您新合並的應用程序下），打開終端，cd 到文件夾路徑（如果需要），輸入命令： npm run serve並回車。 這應該啟動並編譯到開發服務器，並為您的應用程序提供本地和網絡地址。
我的文件結構如下所示：
- 主根目錄：Vue CLI Apps - 在這個根文件夾下，我運行了npx @vue/cli create --merge <Name of your directory/folder aka App Name>命令。
- 1.1. 文件夾應用名稱
- 1.1.1.idea（網絡風暴）
- 1.1.1.1 項目集名稱
- 1.1.1.1.1 項目 1 - 標題- 在這個子文件夾下是我運行npm run serve命令的地方。
希望這可以避免頭痛。
解決方案7
-3 2020-03-10 07:09:43
sudo vue create .
確保你在項目目錄中
如何將帶有 Jest 的 Vue Test Utils 添加到現有的 Vue-CLI 3 項目中？
[英]How to add Vue Test Utils with Jest to already existing Vue-CLI 3 project?
如何將 vue-cli 與同一項目中現有的不相關的 webpack 設置集成？
[英]How to integrate vue-cli with existing unrelated webpack setup in the same project?
將現有項目重構為新的 vue-cli 創建的項目時，如何保留 Git 提交歷史記錄？
[英]How to preserve Git commit history when refactoring an existing project to a fresh vue-cli created one?
如何將SASS文件添加到bootstrap-vue / webpack（vue-cli項目）？
[英]How can I add SASS file to bootstrap-vue/webpack (vue-cli project)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何將 eslint 添加到現有的 vue-cli 項目中？
如何將帶有 Jest 的 Vue Test Utils 添加到現有的 Vue-CLI 3 項目中？
如何將 vue-cli 與同一項目中現有的不相關的 webpack 設置集成？
將現有項目重構為新的 vue-cli 創建的項目時，如何保留 Git 提交歷史記錄？
如何將SASS文件添加到bootstrap-vue / webpack（vue-cli項目）？
將 Jquery 添加到 Vue-Cli 3
如何在最新的vue-cli啟動項目中使用SASS / SCSS？
如何在 vue-cli 項目中配置 webpack css loader
如何在 vue-cli 項目中更改端口號
如何在 Windows 上使用 https 運行 Vue-cli 項目
相關標簽