Creating your first Vue.js App
What is Vue.js?
Perks of learning Vue
- Makes creating UI’s and front-end apps much easier
- Less of a learning curve than other frameworks
- Extremely fast and lightweight
- Build powerful SPA apps
- Virtual DOM
- Growing in the industry
Things you should know before learning Vue:
- ES6 Module Syntax
- High Order Array Methods — map, forEach, filter
- Arrow Functions
- Fetch API & Promises
Install NodeJS —
To run your Vue app locally, we will need to install Node.js to use the Node Package Manager, you can download the latest version right over here → Install Node.js
Install Vue.js devtools extention
This extension allows you to see the structure of your components, the data that your components have
Install Vue CLI 3
You will have to install the Vue CLI 3 to get started, to install this you will need to make sure you have the latest version of Node.js otherwise you will get an error while installing
To install you can run the command below:
npm install -g @vue/cli
After installing — restart your terminal and run the following command to ensure that it has successfully installed. If you get a version back that means it's been successfully installed.
After setting up your environment:
- Create your first app by running this command:
vue create app-name
Pick a preset — default(babel, eslint) →
Once the project is generated you can cd into the project name. Then run
npm serve for the app to compile.
npm run serve starts a development server up which checks for code changes, it will also run on the
2. OR by using Vue UI which will open up a Vue Project Manager Website where you can create an app from the website. You will have to click the Create tab, select the location where you would like to save your project, enter the project name. Here is a very helpful website that walks you through the steps
After this, follow the documentation on how to get started with a small app tutorial either from Youtube or on the documentation website here.
Here is an Anatomy of a Vue Component:
A single Vue file will look something like the example above.
The output is what your user will see once the application loads. Functionality is what adds function to your components and you keep your styling at the bottom of your file. This structure makes it easier to debug your application.