Rules to Better Vue - 3 Rules

Vue.js is an open-source JavaScript framework, similar to React and Angular. It was originally released by ex-Googler Evan You in 2014 who wanted to take what he liked about AngularJS to build a newer and more lightweight framework. Today, Vue.js is a fairly popular and mature framework with an ever-increasing market share behind React and Angular. Here are some of the reasons why Vue.js is great:

Video: Vue.js Explained in 100 Seconds | Fireship (2 min)

Easy to learn

Compared to Angular and even React, Vue.js has a very short learning curve and makes it every easy to pick up regardless of skill level. Someone with fairly basic knowledge of JavaScript, HTML and CSS should be able to start up a Vue.js project with relative ease, making this a great framework for beginners or as an alternative for someone coming across from another framework. The official Vue.js website also provides thorough and easy-to-follow documentation, and a thriving online community of Vue.js developers can help one get a Vue.js web application off the ground in no time.

Lightweight

Vue.js is remarkably lightweight. A minimal "Hello World" application in Vue would be only around 16KB in size, whereas a similar Vue project with every optional feature enabled would sit at around just 27KB. This is much smaller in size compared to similar frameworks such as Angular and React.

High Performance

While good performance can be expected from a well-coded app using any of the major web frameworks, benchmarks have shown Vue.js edges out ahead of Angular and React in many metrics, such as memory usage, startup time, and general DOM manipulation. A developer should expect good performance from a Vue.js app out of the box.

Great Tooling

To set up a Vue.js project, it's as easy as using "create-tool" with Vite and following a few prompts to scaffold an application with all the features you need out of the box. Once set up, the official Vue Devtools extension for Chrome and Firefox allows for easy debugging and inspecting your Vue.js app.

There are many options available for code editors for working with Vue.js. The recommended editor is Visual Studio Code.

Visual Studio Code is a powerful and wildly popular editor that's perfect for developing your Vue.js project. Out of the box, Visual Studio Code has excellent editing support for JavaScript and TypeScript, but for full support of Vue.js we'll need to make use of its rich extensibility.

The recommended extension for working with Vue.js in Visual Studio Code is the official Vue Language Features extension.

Vue Language Features (Volar) provides full language support for Vue.js in Visual Studio Code. This provides useful features like syntax highlighting, TypeScript support, and IntelliSense support for code completion.

If you're using TypeScript for your project, it's also recommended to install TypeScript Vue Plugin (Volar) to add type support for .vue files and provide some additional helpful features when working with TypeScript in your Vue.js project.

Getting started with a Vue.js project is easy. Here's how you can quickly get up and running:

create-vue (Recommended)

create-vue is the official and recommended tool for scaffolding a Vue.js project. It uses Vite (also from Vue creator Evan You) to help quickly and easily set up a Vue.js project to your specifications.

Note: This requires Node v16 or higher.

1. In your command line, run:

   npm init vue@latest

2. This will install and run create-vue. It will then prompt you for a project name and step you through a series of prompts for the features you wish to enable:

   

3. When this completes, you're all done! You will now have a Vue.js project set up in a folder matching the project name you set. To get started running a dev server, execute the following:

   cd {{ PROJECT_NAME }}
   npm install 
   npm run dev

Vue CLI (Not recommended for new projects)

Vue CLI is the official CLI toolchain for Vue.js development using Webpack. Previously, this was the recommended tool for scaffolding a Vue.js project but is now no longer supported, in favour of create-vue and Vite. Unless your project requires Webpack, it is recommended to use create-vue instead.

Note: This requires Node v8.6.0 or higher.

Scaffolding a project in Vue CLI takes just a few steps:

1. Install Vue CLI:

   npm install -g @vue/cli

2. Create a new project using "vue create":

   vue create {{ PROJECT_NAME }}

3. You will then be presented with a few options. Here you can choose to get up and running using default presets, or you can manually choose what features you want for your project:

   

   

4. Once you've selected your options and allowed it to complete, you'll now have a basic Vue.js project set up in a folder matching the project name you entered. You can get a dev server running by executing the following:

   cd {{ PROJECT_NAME }}
   npm run serve