Creating a Simple Vue.js Project
Why we use Vue.js?
Vue.js is a whole world in its own. As it is Framework, it allows a couple of features for our development. Those features are:
- Approachable (Start building things in no time)
- Versatile (An incrementally approachable ecosystem )
- Performant (Reduced Size)
Creating a Vue.js Project:
In order to create a project in Vue.js you have to install the latest stable version of NodeJS and Yarn. Simply, download the setup of these and install them. After installing please run these command
npm --version and
yarn --version to verify these packages are installed successfully.
After installation of packages, We are going to install the Vue using
yarn global add @vue/cli see the documentation. After successful installation, run the command
vue --version to verify installation.
Tip: We can create Vuejs project using multiple ways like using npm (npm i vue) and yarn. But i have faced alot of problems using npm so i suggest the beginner to create Vue project using yarn.
To install the Vuejs project, we can use different templates like:
- Simple (index.html + Vue CDN import ).
- Webpack Simple (Basic webpack Workflow).
- Webpack (Complex webpack workflow including testing).
- Browserify (Browserify Workflows)
- Vue-CLI (CLI Service is built on top of webpack)
Now we are going to create a project through Vue-CLI, navigate to the directory where you want to create project in cmd and use the command
vue create projectname
Now you have to choose the preset:
Choose Manually select features, now Choose the Router and CSS Preprocessor from the list using space and then press enter. Now you will have a simple project in vuejs.