How to start a new project using Vue.js

We have started the development of a new Business which is primarily going to be an entirely new platform based business model which aims to create value by facilitating exchanges between two or more interdependent groups, usually consumers and producers.

In order to make these exchanges happen, platforms harness and create large, scalable networks of users and resources that can be accessed on demand. Platforms create communities and markets with network effects that allow users to interact and transact.

Our new business is not only classified as Start-Up as defined by Eric Ries in his book The Lean Startup: How Constant Innovation Creates Radically Successful Businesses, but it also an institution designed to create a new product or service under conditions of extreme uncertainty and we will over the next few years be continually testing, tweaking, validating and innovating various concepts and strategies of our proposed business model.

This is particularly true, as with most startup businesses our proposed business idea has the potential to disrupt currently entrenched business models. We're keen to develop our Minimum Viable Product (MVP) and to release it quickly as possible in order for us to start testing and validating a number of hypotheses.

Why Use Vue.js

In a world where a new JavaScript framework becomes available almost hourly, and every time a new framework is released it purports to solve the problems the other apparently don't and why the new framework is so much better!

Why would any organisation want to take the time an effort to learn how to implement and learn. We for us the answers lay in the following points.

• Stable progressive framework.
• Easy to learn and understand.
• Simple and flexible.
• Uses MVVM architecture.
• Comprehensive documentation is available.
• Focus on organisation / project architecture.
• Can be used for simple and complex applications.

When we compared Vue against some of its competitors, including Angular, React, Ember, Aurelia, etc., concluded that Vue beat them in some key aspects. These aspects include simple API, size, performance, learning curve, etc. Which for us, was fairly important.

Our initial team comprised mainly of very talented Full-Stack Developers, which to be honest can be a bit of drawback, because the truth is although in theory, we should be experts in the entire web development stack the reality is most developers will have a tendency to specialize in a few key areas, because that is the area they particularly enjoy. Design and UI aesthetics are not skills we have an abundance in!

How to Install Vue

The best and easiest way to make use of Vue in our opinion is by making use of the CLI (Command Line Interface)

The CLI ( @vue/cli ) is a globally installed npm package and provides the vuecommand in your terminal. It provides the ability to quickly scaffold a new project viavue create , or instantly prototype new ideas via vue serve . You can also manage your projects using a graphical user interface via vue ui

To install the vue-cli simply open a terminal window and execute.

How to start a new Vue Project

Starting a new Vue Project is really easy using the CLI all you really need to do is open a terminal window, navigate to the directory where you store you code projects. In our case we tend to create a folder in our home directory called "code", so simply do:

The we can create a new project using the CLI

Typically you will create a project with name, so this can be anything that you will use to identify your project.

Vue provides the ability you the ability to create a project using a default template or you can customise this template to include features you need or you can create a template for your organisation, so you can include any libraries styling, default page layouts you particularly need.

For now, we are going to stick with the default template.

Once the generation has completed you can navigate to you project folder and check everything that has been generated

To run the project, simply use the terminal window change into your project directory and execute the npm run serve command.

This is will build the project and start the built in webserver. You can navigate to the default URL in a browser and you should be able to see the default project template.

Generating a New Project with WebStorm

We're developers so we spend most of our time coding and over the years we have grown to appreciate certain tools. Our specific tools of choice specifically involve Jet Brains based IDE's.

In particular for JavaScript based projects we primarily use WebStorm, so although using the CLI is cool we would also like the ability to use WebStorm to generate new projects. Fortunately, WebStorm, already comes with the Vue project template capability all we need to do is wire it up to the Vue Cli.

To do so you simply open WebStorm open the New Project Dialog. Provide a name and location for your project. Select you Node Interpretter and then you can select which version of the Vue CLI you have installed.

Then click next and then Webstorm will ask you the same question as to which project template you would like to use. The default one or some customised template you have created.

Adding Material Component Framework

Material Design is a design language, originated from Google, which is intensively used in interface projects for the Android system. You may ask why it is used. The answer is simple -– it is already a mature and organized tool which corresponds to the usability and legibility. Moreover, it is developing and changing dynamically. The result, is a tool that may be a perfect match for screens, as well as the starting point for inexperienced people in UI/UX designing.

The basis of MD is already well-established by website and UI/UX designers who have worked on it for a long time. What distinguishes it from other tools, is the fact you may use it in every kind of project you are currently working on because it is easy to find recommended practices in each project set. The conventions place emphasis on:

Materials as a metaphor -- in this context, it is a metaphor of space for sheet and ink. The real things that are used in this tool are light and space, supported by unique space attributes that are distinguished in the digital forms field. The characteristics of MD are the shadows which are widespread. It reflects the behavior of real things that exist in reality

Meaning -- an incentive of MD is design printing, which reflects in a very well designed grid, the importance of typography and colors.

Movement & Animation -- MD not only supports a static form of printing design but also includes the digital media, based on the laws of physics. It gives us the possibility of reconciling utility with aesthetics, which is very important nowadays.

One of the most important metaphors in MD is a material which has its position in space on the Z-axis, so we can tell if it is closer or farther from a user. The metaphor refers to the so-called Elevation value. What is interesting, is the fact this value simulates higher and lower positions in space by appropriately selected shading.

There are a number of Material Component Frameworks around and certainly the most popular of these is Vuetify However, for our project we opted for MDB Vue Pro, which comes with 500+ material UI elements, 600+ material icons, 75+ CSS animations, SASS files, templates, tutorials and many more. Free for personal and commercial use.

We opted to pay for the Material Design for Bootstrap (Vue Version) , which is a Material Component Design Framework which includes Bootstrap 4 but no jQuery

Why Use a Material Component Framework

For us the big benefit of use a Material Component Framework and in particular ,MDB Vue Pro , is that they make the development environment easier, more productive and with better integration with Vue Material.

They provide a number of reusable components that enable just adding components to a webpage and we can just focus on developing the functionality required.

How to Install MDB Vue Pro

To install MDB Pro you will need a GitLab account, which is free and for the most part is similar to Github, in fact you can even sign up with your Github account.

The instructions here are specifically about how to connect your ,MDB Vue Pro account which is the Premium version of MDB Vue which will require you to pay for access.

Once you have purchased a licence for ,MDB Vue Pro and have received confirmation of your account, you can navigate to https://git.mdbootstrap.com in your browser and sign in with your credentials then

1. top right corner click at your avatar and choose "Setting → Access Tokens"

2. Provide a Name for your token and choose "api" from scopes. Then click "Create personal access token"

Once your token is generated ensure to copy it and store in safe place. You won't be able to access it again. In case of loss, you will have to generate new token again.

Navigate to given repository, switch GIT to HTTP and copy it's URL i.e.: https://git.mdbootstrap.com/mdb/vue/vu-pro.git

I suggest open text editor because you are going to need to adjust the URL you copied too:

You can now navigate to your project, and open a Terminal Window, or if you're using WebStorm like we do simply open the integrated terminal window and execute the following npm statement with you edited URL

or if you prefer to use Yarn

After this command has completed you can check your package.json file and ensure you dependencies section has been updated and you URL is visible

Ensure to run either  npm install or yarn install to install the dependencies

Configure Vue project to use MDB Vue Pro

We can now edit our project files to make use of our MDB Vue Pro, the first step is to edit our main.js to look similar too

Then all we have to do next is run the project npm serve our project is now making use of the MDB Vue Pro library. However, at this stage you will not notice much difference, but you are now ready to start making use of the Material Design components to develop your application.

Summary

We have explored how, why and when to use Vue in a new project and how to install the Vue-CLI to easily and quickly generate new projects.

We also explored how to make use of Vue using WebStorm -The smartest JavaScript IDE to start developing Vue.JS projects

We also explored how to make use of a Material Design Component Framework like MDB Vue Pro to help speed up your Vue.js development