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)

Answer 1

Inside the Project Folder in the terminal enter vue create .

Answer 2

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