If you've just used vue create
to create your projects, this post is for you!
Important note for windows users: Do not include the $ sign in your commands, it is not a part of the command, it is just the prompt sign in linux/unix/bash shells.
Creating projects
There are actually several commands you can use to create a Vue project using the CLI.
The most known option
This is the default and recommended one.
# creating a project using the command line
$ vue create my-project
The CLI with the UI
Did you know that Vue CLI actually has a web UI?
It allows for a more interactive use of the CLI.
# run this command and it will open a browser window with the UI
$ vue ui
The web UI also has some cool utils that you can use to monitor your build, your development server and other processes.
If you're interested, let me know in the comments and I'll do a separate post on the web UI and its many options.
Legacy templates
In version 2 of Vue CLI, there was a concept of "templates" that allowed you to specify a template (built-in or community provided) that will be the basis for your new project.
This is still supported in Vue CLI 3 but it requires an extra step.
# run this once for enabling support of legacy templates
# you can run this anywhere as it installs a global plugin
$ npm install -g @vue/cli-init
# create a new project using a legacy template
$ vue init webpack my-project
And here's a list of the built-in templates.
There are many other community provided templates out there.
Fast Prototyping
Sometimes you just want to view a single Vue component for fast prototyping without the hassle of creating an entire project.
This is possible by globally installing another part of the CLI system:
# run this once for enabling support of legacy templates
# you can run this anywhere as it installs a global plugin
$ npm install -g @vue/cli-service-global
# serve your component by running this command
# (the --o is optional and opens a new browser window)
$ vue serve my-component.vue --o
Plugins
The Vue CLI is all about plugins. Plugins add content and/or abilities to your project.
There are two types of plugins:
- Internal plugins, these are prefixed
@vue/cli-plugin-
- Community plugins, these are prefixed
vue-cli-plugin-
Important: Plugins usually modify your project sources, so it is a good idea to git commit all your changes before adding a plugin.
To add a plugin, use the following command inside your project's folder:
$ vue add plugin-name
You can find a searchable list of plugins inside the Vue CLI UI:
- Run the UI using
vue ui
command - Select a project of yours in the dropdown menu on the top left corner.
- Click the "Plugins" in the menu on the left.
- Click "Add plugin" button and browse the list of plugins.
- When you're ready to add a plugin, select it and click the "Install" button on the bottom right.
Top comments (2)
Important note for windows users:
😱Lolz...
I'm a Windows user myself, but you can never know 😉