complete guide to use vue cli for vue project and webpack as a template

in this post i want to introduce the popular javascript framework , that is Vuejs . Vuejs building for user interface that focused on the view layer only. for some reason vue js is more easy to learn that another framework javascript . Vue js can be combined with other tools and libraries to make it more advance to created the single page aplication . i will share the instalation Vue and how to use vue in our project.

what is Vue js?

vue js is a progressive framework to build ui on the web. vue js is a framework that is rising its popularity and is being much in the interest by the developers currently in because ease to use it. vuejs created by evan you about 3 years ago and now it has reached the 2.x version. to make vue project , we must to install Vue CLI to make easier
set up vue . its from vue official

what is Vue CLI?

vue cli is a generator of their project structure. Vue-CLI has many choices of templates that we can choose to generate, from simple webpack, complex webpack, simple to complex browserify, PWA, to very simple with only one html file. in this case i will use the webpack template. All files resulting from the Vue-CLI is very natural look without the intervention of a generator, so it is very easy for us to modify the various configurations that exist in it according to our needs.

what we need to start work with Vue CLI

1. install node js
   Prerequisites: Node.js (>=4.x, 6.x preferred), npm version 3+
   if you have already install , skip this step
   if you have not installed node js, please download on website https://nodejs.org/en/download/
2. install Vue CLi
   create a folder that will be installed on vue cli . my structur folder in "D:\vueproject\vuecli" and then right click on the folder choose " open command window here" and insert in the command prompt

 npm install -g vue-cli

if there is no error then the results will appear like this, this means we have successfully installed vue-CLI

1. install the template, in this case i used the webpack.
   in the same command prompt we run the code

vue init < template-name > : in this section is what template we will use . in this case i use webpack , feel free to use another template , but mostly developer used webpack

< project-name > : this is a project name . in this case i named vue-project

this the setup of vue init webpack vue-project

Project name : this name of project you build (vue-project)

Project description : this name of project you build (tutorial)

Author : this who build of project you build (alfarisi)

vue build : this name of project you build (standalone)

Install vue-router : install library vue-router from vue, if you want (y/n)

Use ESLint to lint your code : install ESLint is a utility Javascript to warn you if any error of you block code (y/n)

Set up unit tests : install unit test in vue (y/n)

Setup e2e tests with Nightwatch? : to make install end to end testing if you want (y/n)

Should we run `npm install` for you after the project has been created? (recommended) npm

wait for a minutes until the downloading file is done. if all works good and any error warn appears, you will see the installation successed

after that you must run npm install to install everything you have downloaded but you must go to the directory file that you named as project name in this case is vue-project

D:\vueproject\vuecli> cd vue-project
D:\vueproject\vuecli\vue-project>npm install

To make sure you installation have done. you can open , your code editor and open the folder that you have install in this case vue-project

To run project insert the code

D:\vueproject\vuecli\vue-project>npm run dev

automatically will run localhost in http://localhost:8080

its done . . vue CLI has been installed properly. now we can create single application , in next post I will share vuex state management tutorial from vue, see you in the next post.. thank you..

---

Posted on Utopian.io - Rewarding Open Source Contributors

---