What is Vue.js? Create a web app with Vue CLI

Javascript June 23rd 2022

    Although vue aka vuejs is a later born technology than react or early angularjs. But now, it can be considered as a technology and framework that is very popular in the projects of many companies today. Comes with vue are similar concepts with react, angular for programmers who have worked with Single Page Application-oriented web development technologies.

    What is Vue.js?

    • Vue.js is an open source progressive JavaScript Framework for building user interfaces (UI), Single Page Applications, and single-web applications. It was built and developed by Evan You an engineer at Google. In 2014 the project was uploaded to HackerNew, Echo Js.

    • Single Page Application is a type of web programming to increase user experience. Normally, when you want to switch pages, you have to reload the whole page. However, with SPA, it only reloads the requested information.

    Pros and cons of Vue.js

    • The website is lightweight, with extremely fast processing speed by Render, processed by Javascript.
    • Simple, easy to learn and easy to apply in projects, especially for newbies
    • Capable of processing server-side renders into static Js files
    • Large library, support to build interfaces quickly and perfectly
    • Low load capacity, making the page load faster
    • Screening, integrating the superior features of many rival frameworks, helping to optimize work performance.

    However, VueJS has a weak point in relation to SEO. When implementing SEO work on websites and applications created by this framework will be more difficult. You should consider this before deciding to take action to use it because Google now has the ability to support Seo for VueJS, as long as your API speed is fast enough.

    What is Vue CLI?

    Vue CLI is a toolkit for rapid prototyping, easy application scaffolding, and efficient project management. It consists of three main tool belts:

    • CLI is a globally installed npm package that provides core functionality via the vue command. It allows us to stage a new project easily (vue generate), or just quickly generate rough ideas (vue serve). If we want more intuitive and specific control over our projects, we can open the GUI version of the CLI by running the vue ui command.
    • The CLI service is a development dependency (vue-cli-service binary), installed locally into every project created with the CLI. It allows us to develop our project (vue-cli-service service), package it for production (vue-cli-service) and also to test the configuration of the webpack project (check vue-cli- service).
    • CLI plugins are npm packages that provide additional features to our projects. Their names start with @vue/cli-plugin- (for built-in plugins) or vue-cli-plugin- (for community plugins). We can add them at any time of development via vue add command.

    Create a web app with Vue CLI

    Install Vue-cli

    Install:

    npm install -g @vue/cli
    # or
    yarn global add @vue/cli

    To create a new project:

    vue create my-project
    # or
    vue ui

    After typing the statement above, there will be many options appearing for us to choose from:

    Vue-cli supports a variety of installable features that always come in addition to 2 Default items for Vue 2 and Vue 3.

    We can also install TypeScript, PWA, Router, Vuex, SCSS/SASS, Unit Testing,... in manually select features without worrying about how to set up them. It's so convenient!

    Project structure

    The project structure consists of the basic items:

    • node_modules: where libraries are declared in package.json
    • public: contains index files.html of the website, where Vue.js components are integrated (Single Page is this file =))
    • src: where our Vue code.js, Vue snippets of code.js built under the tail .vue that I will specifically present its structure below

    Components that are included in App.vue and App.vue are included in the index.html

    Structure a .vue file

    A .vue file consists of 3 main parts:

    • template: where to write HTML code for components
    • Script: where to handle logic
    • style: where to write the CSS code for components

    And once your component is complete, we can use it anywhere, anytime, with the import statement:

    Here's what we need to build a project from scratch, as well as learn the internal structure of a component in Vue.js. After the installation is completed, we just type npm run serve or yarn serve to run.