How to add vue-cli to the existing project?
Question
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 vue create <project-name 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)
7 answers
solution1
16 2020-06-01 11:25:26
Inside the Project Folder in the terminal enter vue create.
solution2
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. 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:
- adjusted the folder hierarchy and names to match the new project
- added the missing plugins to package.json
- removed all PWA settings from index.html. 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
- added.eslintignore, ignoring node_modules/**
- renamed index.js to main.js (although probably not necessary)
- added bootstrap css through import in main.js
- 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
solution3
5 2020-07-05 09:38:26
Using the terminal, run next command inside your project folder:
npx @vue/cli create .
solution4
1 2020-08-20 15:19:18
After creating the vue-project inside your old project with vue create. you can add the app like vue does it itself with the following code:
<!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>
solution5
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.
solution6
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.
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.
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 <Name of your directory/folder aka App Name> 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.
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.
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.
- 1.1. Folder appname
- 1.1.1.idea (WebStorm)
- 1.1.1.1 Project Set Name
- 1.1.1.1.1 project 1 - Title - Under this subfolder is where I ran the npm run serve command.
Hope this saves a headache.
solution7
-3 2020-03-10 07:09:43
sudo vue create .
make sure you are in project directory
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.