Getting started with Vue.js
In the previous chapter, we have seen several ways to use and install Vue.js in your project. In this article, we shall see how to check the version of the Vue.js, the advantages and disadvantages of using Vue.js in your project, the first example and the explanation of all the general points related to the example.
Advantages of using Vue.js
Following is the list of advantages of using Vue.js:
Very Small in Size
Easy to Understand and Code
Simple Integration with Existing Applications
Flexible in nature
You can create reusable custom elements in Vue.js applications.
Easy, comprehensive & detailed documentation
Vue.js uses virtual DOM similar to other existing frameworks such as ReactJS, Ember, etc. Virtual DOM is a light-weight in-memory tree representation of the original HTML DOM and updated without affecting the initial DOM.
Vue.js provides two-way communications with its MVVM architecture that makes it very easy to handle HTML blocks.
Companies which are using Vue.js
Vue.js has started gaining popularity day by day because famous companies have already started using it in real-time. There are several companies which are successfully using Vue.js in the real scenario. Let's see some example:
Facebook: The biggest successful company which is using Vue.js in their real-life project is Facebook. Facebook is using this framework for the marketing side of their Newsfeed.
Adobe: Adobe is using Vue.js for its product called Portfolio. Using the Vue.js framework's easy integration advantage, the company has already migrated their existing codebase to the Vue.
Xiaomi: Xiaomi is also using Vue.js to build their products catalog to provide users a reactive experience.
Alibaba: One of the most significant public companies in China has used Vue.js.
Some other notable companies which are using Vue.js in their project are:
Check the version of your installed Vue.js
Create Vue.js first app (Using vue create command)
Explore Folder structure of Vue Application
You have already executed your app on the web browser. Now, it's time to explore the complete files and folders of your project. You can select any IDE of your choice. Here, we have chosen Visual Studio Code IDE for deploying our application.
Open the Visual Studio Code and load your project in the IDE. After loading your project, click on the public folder as well as the src folder. These two folders contain the most important files of your project.
Package.json: The Package.json folder contains all configuration of your app. You don't need to touch that folder.
Index.html: The most important file of your app is index.html file. It contains all the data that is appeared on the UI of your app. This is the only one div element which Vue will use to attach the DOM. See the index.html file:
In the above code of main.js, the first line specifies the import of the Vue library, and the second line is used to import the App Component from app.vue. The productionTip is set to false to avoid the message "you're in development mode" in the console. After that, Vue instance is created by assigning it to DOM element #app, which has already been defined in index.html file and specified to use the App component.
Src/component/HelloWorldComponent: This file is included in HelloWorld.vue file. This file contains all the style and HTML which you see when you open your app in the browser.
The <style scoped> attribute is used here to limit the above CSS to this component only. After using the <style scoped> attribute, your CSS would not be leaked to another part.
The <script> part: This part is exported with the name 'HelloWorld' and the data which will be displayed in the output is stored in "msg" variable.
This is all about the file and folder structure of a Vue.js app. It is essential to know before start developing apps in Vue.js.