How to add vue-cli to the existing project?

20
votes

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
vue.jswebpackvue-cli
Have you tried this command 'npm install -g @vue/cli' ? – Parth Jasani
There is no official way to do it. The docs precise that the Vue CLI the whole Vue app and doesn't say anything about integration into existing projects. – Nino Filiu
@ParthJasani yep, it's not about the installing vue-cli, it's about adding it to existing project – serge1peshcoff
@NinoFiliu I thought the same, thanks for clarifying ;) I'll try to move my repo to a new vue-cli project as I've described then and will post it as an answer if it'll be successful – serge1peshcoff
You can create a project on an existing one and choose the merge option. of course part of your files will be overwritten :-( use git to revert then and pull from your repo. That's what I do – PhilMaGeo

7 Answers

14
votes

Inside the Project Folder in the terminal enter vue create .

4
votes

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
3
votes

Using the terminal, run next command inside your project folder:

npx @vue/cli create .
1
votes

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>
0
votes

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.

0
votes

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.

-2
votes
sudo vue create .

make sure you are in project directory