1. Getting Started with Vue.js
This is an article for absolute beginners to Vue.js. You can also check out the video tutorial of Vue.js at TechFerment.
What is Vue.js?
Vue.js is an open-source front-end JavaScript framework for building user interfaces and single-page applications. Plus, it contains a Vue Router built-in with it. So we don’t need to install an external library for using routing like React.
Why Vue.js?
- Vue.js is very lean, it’s about 16kb for a production version and runs very quickly. It provides very high run time performance.
- Easy to create a front end web app
- Easy to learn and implement
- Fast and Lightweight
Let’s get started!
VueJS — Environment Setup
You can create a Vue.js web app by using Vue CDN Library or Vue CLI.
1. Using CDN
You can start using the VueJS file from the CDN library. For Development try to use the development version CDN Library because it includes helpful console warnings that will help you in building Vue.js.
and For the Production Ready web app, you can use the production version CDN Library, which is optimized.
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- or --><!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Now create a index.html
file and load that CDN Library of Vue.js
<html>
<head>
<title>Vuejs Web App</title>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
</body>
</html>
Now in every vue.js app, you need to create Vue Instance.
The Vue Instance
To create a Vue instance usenew Vue({})
. Inside Vue Instance have lots of properties like
el
(String) Property, which element on the HTML page to controlled by Vue instance.data
(Object) property used to store the data for the Vue instance. Use{{ }}
to view the data from the Vue instance.
Inside data object, you can pass any data such as number, string, object, array. Use {{ }}
to view the data from the Vue instance.2. Using Vue CLI
For large-scale applications with Vue.js, it is recommended to install using the Vue CLI. To install using CLI, we need to have CLI installed which is done using the following command. But before you need to install Node.js in your system and then you will be able to install Vue CLI.
npm install -g @vue/cli
Once done, it shows the CLI version for VueJS. It takes a few minutes for the installation.
+ vue-cli@*
added XYZ packages in XYZs
To create a new project, run:
vue create your_project_name
Then you can select any presets. You can either choose the default preset which comes with a basic Babel + ESLint setup, or “Manually select features” to pick the features you need.
The default setup is good for quickly prototyping a new vue.js project, and manual setup provides more options that are likely needed for more production-oriented projects.
You can also check out the video tutorial of Vue.js at TechFerment.
Next, I’ll show you how to use data and method property inside the Vue instance.
Keep watching this and follow us for more tech articles or you can reach out to me for any doubt and suggestions and the next blog in the series will be published soon.
Thanks
Happy Coding!