Today, I want to talk a little bit about the basics.
When starting a project in Vue, the easiest and fastest way is to utilize something called Vue CLI, standing for Command-line Interface. Simply put, it scaffolds a basic website in Vue for developers to start on. For those who are more familiar with React, this would be in the same category as "create-react-app", but better. Let's get into finding out what it is in more detail, how to install/use it, and some plugins that can be used to make it even better.
What is Vue CLI?
Vue CLI is the node installable Command-line Interface, providing a full system for rapid Vue.js development. With Vue CLI, developers can have a pre-built project they can easily adjust to their needs. It is nicely built, so that you do not have to spend unnecessary time on configurations, dependencies, webpack, etc. It also provides instant prototyping, allowing us to easily debug and visualize what's going on. What I like the most about Vue CLI is its collection of plugins. With just a simple line of code, you can add plugins to your project and utilize them accordingly.
Installing Vue CLI
Before we install Vue CLI, let's make sure we have Vue installed. Assuming everyone has Node.js installed, we will be using npm to install
npm install vue
To test whether we were successful in downloading it, we can check its version.
vue --version
Now that we have Vue installed, let's install Vue CLI.
npm install -g @vue/cli
Build an APP
It's no good if we don't use what we have just installed. Let's go on and create an app using Vue CLI, and implement some plugins that I recommend.
On the command line, once you navigate to the directory, this code will allow you to create a folder called app at your current repository, with everything you need for a Vue project set inside. Replace 'app' with the name of your project/folder. You will be prompted with many given presets. Unless required, you will most likely use the default configurations.
// you can replace 'app' with a name of your choice
vue create app
// or
vue create --default app
In the command line, cd into the directory you've just created, and check our instant-prototyping.
cd app
npm run serve
If you open your browser to localhost:8080, Voila! You will see the app running, and any changes you make will be applied to your site instantly.
Now that you have the basic CLI set up, you can add plugins to enhance your programming experience with Vue. These plugins have helped me become a better developer, guiding me through each step on how to use it. The plugins I recommend you to install, or at least tryout, are
- vuex : A State Management Pattern + library for Vue.js apps, meaning it helps us control the states of our nested components.
- vuetify : A plugin that utilizes the Material Design Framework. It helps developers with UI components, with absolutely incredible documentation.
- quasar : A plugin that enhances the Vue.js user interface in a very user-friendly way. For starters, you can set up all of the interfaces in advance and get the code for you to adjust.
vue add vuex
vue add vuetify
vue add quasar
Today, I've shared some information about the Vue CLI and some useful plugins/user interfaces. Once you get to know how to use it, starting a project becomes a smoother process. Of course, having a more configured and defined project for implementing other plugins, or components, is another strength that follows.
If there are things I could improve on, please don't hesitate to let me know! I'm all ears :)
Top comments (0)