Installation of Vue.js

Installation of Vue.js

What is Vue.js?

Vue.js is pronounced / vjuː /, similar to the English word view, and in official documentation, it is said to be a progressive JavaScript framework for creating a user interface.

“Progressive framework for building user interfaces”.

Vue.js is considered to be one of the simplest JavaScript frameworks, which is very fast, has a small size and very detailed documentation. Vue.js is very flexible and adaptable to different types of projects. In the basic version, it is practically a library, and as such it is applicable to small and medium projects, however Vue.js by adding the appropriate official components becomes a full framework, and as such has the potential to create enterprise applications.
Although currently, Vue.js is not yet popular as React (Facebook-supported) or Angular 2 (Google-supported), its popularity is growing day by day and is considered by the Laravel community to be one of their favorite front-end frameworks.

Integration into an existing project

Among other things, Vue.js is popular with developers because it has the ability to easily integrate into an existing project.

a) Integration with CDN

It is enough to insert a script on the bottom of the body section on the CDN:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

and Vue.js is ready to go

b) Installation of Vue.js as an npm package

To install Vue.js as an npm package, we need to have node.js installed and its package manager npm installed. We can then install vue.js with the command:

npm install vue

Generating a project with Vue-CLI

Vue.js provides the official vue-cli that is used to quickly build a starter project. There are many different types of starter projects that should satisfy most projects. First of all, we need to have vue-cli installed, which is later used to create a starter project:

vue-cli 2.0

npm install –global vue-cli

After installing vue-cli, we can choose one of the predefined project types, see the official GitHub page of Vue templates for possible installations.
This article is to explain the so-called. “Full webpack” starter project, which integrates all the modern tools that makeup one framework. The most important is Webpack, which allows us to use Babel, SCSS loader, etc. The project is generated with:

vue init webpack project-name

After generating the project, we need to install all the dependencies that are defined in package.json. In order to execute the command we need to enter the project in the terminal and start the command:

cd project-name
npm install

This project also comes with a local dev server, so after installing the dependency we can start the development server with the command:

npm run dev

The server will load the page at localhost: 8080 every time you change the project. In addition to servers in the development environment, we also get:

  • vue-loader to load single file Vue component
  • Code linting
  • Source maps

REMARK:
If you look at the file “index.html”, it will be noticed that it contains a script with the location of the folder named “dist”. However, it is not in development mode, it is generated only after the build command of the project is ready for production. In development mode, all javascript files are stored in memory.

At the end of the project, we can generate all production files with the command:

npm run build

After building the project we get:

  • JavaScript minified with UglifyJS
  • HTML minified with Html-minifier
  • All CSS files extracted into minifigure into one cssnano file

With this starter, project comes integrated testing support. And that unit tests are erased in JSDOM with Jest, command:

npm run unit

While End-to-end tests are run with the Nightwatch command:

npm run e2e

vue-cli 3.0

To install vue-cli 3.0 tools, we need to have a minimum of 8.0 version of node.js installed. When node.js is installed then we install vue-cli 3.0 globally using the command:

npm install -g @vue/cli

After vue-cli is installed, we can generate a new starter project with the command:

vue create [options] project-name

Options available when creating a project are:

–Default or abbreviated –d (skips all installation issues and installs the default set)
–Preset or abbreviated -p (skips all installation issues and installs a prepared set of so-called “preset”)
-InlinePreset or shortened -and skips all installation issues and uses inline JSON as preset)
–Force or abbreviated -f (if there is a folder with the same name then override it)

The default setting is a local server installed, as well as the installation of “babel”, “eslint” and “autoprefixer” plugins. With this default set also comes a pragmatic way to select supported browsers called “browserlist”, which takes into account that newer browsers already support the new ES standards and that they do not need to add prefix within CSS. This intelligent selection method allows us to get smaller code size.

This kind of project does not get installed “vue-router”, as well as vue state management “vuex”, so if we need it we have to retrofit them as npm packages:

npm install vue-router
npm install vuex –save

After creating the project using the terminal, we enter the project folder and start the local server with the command:

npm run serve

We have access to the server from a local machine via URL: http: // localhost: 8080 /, while access within the same network but from another device can be obtained at URL: http://192.168.0.10:8080/

To start JS lint we use:

npm run lint

While for the production version of the project we use the command:

npm run build

Generating a project with Nuxt.js

Nuxt.js is a framework built over Vue.js that helps you easily build Vue.js applications that are re-rendered on a server called. Server-Side Render App. Nuxt.js abstracts most of the complex configuration involved in managing things like working with asynchronous data collection, middleware, and routing. It is similar to “Angular Universal” made over Angular.js, or “Next.js” used for React.js.

Nuxt.js is an advanced topic and will be explained in detail in subsequent articles, but it is mentioned here as another way to create a starter project running Vue.js. Creating a starter project with Nuxt.js is also done from vue-cli with the following command:

vue init nuxt-community/starter-template project_name

After this, it is necessary to enter into the created project and install all dependencies defined in package.json

cd project_name
npm install

Now we are ready to start the server and get started using the command:

npm run dev

The application is available at http://localhost: 3000

Likes:
15 0
Views:
1649
Article Tags:
Article Categories:
PROGRAMMINGTECHNOLOGY

Leave a Reply

Your email address will not be published. Required fields are marked *