Vue JS Part: 1

What is Vue.js?

Vue.js is an Open Source JavaScript Framework for modern and progressive user interface development. Which is very small and lightweight. It is much faster than other popular JavaScript frontend frameworks such as AngularJS and React. It is very simple to use and easy to deploy.

Everything you need to develop a modern and progressive user interface can be done by Vue. It is designed to meet all the needs of the growing future. As a web framework, it is also widely used for SPA (single page applications) development. It is rich in a number of features including data binding and event binding setup.

Evan You, a Google employee, created Vue.js in 2013 after working for Google on a number of projects using AngularJS and released it for the first time in 2014.

Vue.js – Installation and Environment Setup

There are many ways to install Vue.js. Here we will discuss a few ways.

Using the <script> tag directly in the HTML File

If you want to install directly to the HTML File using the <script> tag, you need to download the vue.js or vue.min.js file from this page https://vuejs.org/v2/guide/installation. Here the vue.js file is the development version and the vue.min.js file is the production version. Although the two files are the same, the production version is minimized and lightweight, while the development version is a little heavyweight, but will give you the benefits of debug mode and warnings during development.

Once downloaded, place the file in a folder named js in your project folder, then attach the following code to any HTML file:

Using CDN:

However, we can work with VueJS directly using CDN (content delivery network). You can apply for a CDN host (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) or (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js) ). Can use. See the following example with CDN:

Using NPM

Recommends using VueJS NPM (NodeJS Package Manager) to create large scale and realtime applications with Vue.js. It includes other necessary tools including Browserify and Webpack. You will be able to enjoy many more benefits. To install with NPM you need to use the following command in Terminal in your Vue Project folder.

 

npm  install vue

Similar to CDN working in NPM Vue, all you have to do here is change the file source. See the example below:

Using the CLI (Command Line Interface) command

VueJS offers CLI facility for working in Server Environment. Also if you install VueJS Server with VueJS CLI, you don’t have to worry about any set up or configure. Everything you need for modern front-end development is pre-loaded, with the benefits of real-time, rapid development, and single-file application development. In addition, using the Vue CLI will give you the following benefits:

  • It allows us to write our HTML, CSS, and JavaScript as we wish. It also allows us to write the latest versions of our components, TypeScript, SCSS, Pug, latest versions of ECMAScript in a single file (.vue).
  • Great features of Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing, and End-to-end Testing.
  • Here you will find the default plugin system so that you can easily add common features to your project.
  • As an alternative to the command-line tool, you will get a graphical user interface called Vue UI
  • It keeps Webpack configured for us, when we create any of our applications with Webpack it bundles, minifies, and optimizes all the JavaScript files, our CSS, and our dependencies for us properly.

Vue CLI 3 Installation

Vue CLI 3 comes as an NPM package. First, you need to make sure your PC has Node.js and NPM (NodeJS Package Manager). If you want to work with Vue CLI 3, you need the latest Node.js version 8.9 or higher. If you already have Node.js installed on your PC, you can check the version of Node.js with the following command:

node -v

After checking with the above command, if you feel you need to reinstall or update, you need to go to Node.js and download the appropriate version of your OS Installer. And Node.js Package Manager (NPM) will be automatically installed when installing a newer version.

Another thing is that Vue CLI version 3 has been completely rewritten. The previous version of Vue CLI has been renamed to use vue / cli.

And so it is best to first uninstall the Node.js Package vue-cli version on your PC with the following command.

npm uninstall vue-cli -g

Once the uninstall is complete, install the Node.js Vue CLI with the following command:

npm install -g @vue/cli

Once the installation is complete, you can check the version of your Vue with the following command:

vue -version

Create Project in Vue

New projects can be created in Vue CLI 3 in two ways. One is through the vue create command in the command line, and the other is through the VU UI. First we will look at the installation in the command line:

Installation on Command Line

To create a new project in Vue, you need to give the command vue create your_project_name. Just like the following:

vue create my-vue-app-01

After running this command you will be prompted to choose either default (babel, eslint) preset or Manually select features.

We will select this option Manually select features here, then Vue will show us all the features.

Here you can use the up and down arrow keys on your keyboard to navigate the features. And you can use John to select the spacebar. For example, we will select the default feature Babel and Linter / Formater as well as the Router Feature here.

Now you will be asked whether to use the History Mode of your Router. Here we will select NO.

After selecting, when we hit again, it will show us the Configure list of our selected Linter / Formatter.

However, we will select the ESLint + Prettier option here.

  • ESLint is a tool for identifying and reporting ECMAScript / JavaScript code to perfect and avoid bugs.
  • And Prettier is the feedback code formatter. It analyzes your code and applies a consistent style to the code by rewriting it with its own rules and takes the maximum length of the line if necessary, wrapping the code.

Now we will decide whether linting will end with save or commit.

We have selected Lint On Save here, now you will get two more options, one is In dedicated config file and the other is In package.json. Now we will select this option In dedicated config file.

Lastly, you get the option to save the settings as preset.

We have selected N here (no preset will be saved), now we will get the next question, where you will use Yarn as package manager or use NPM, the question will be asked.

Then after selecting NPM as Package Manager, your new project will be created and the required dependencies will be downloaded and installed.

Finally, you will see a success message on the command line and your new project will be created.

By now your new project has been created and configured. Now you need to access your project folder with cd command. Then you can run the Web server with the following command, and start the development.

cd my-vue-app-01
npm run serve