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
- 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/ - 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
- 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
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
Your contribution cannot be approved yet because it is attached to the wrong repository. Please edit your contribution and fix the repository to
https://github.com/vuejs/vue
to reapply for approval.You may edit your post here, as shown below:
![](https://steemitimages.com/640x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1509788371/nbgbomithszxs3nxq6gx.png)
You can contact us on Discord.
[utopian-moderator]
i've edited my post. thank you :)
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @alfarisi94 I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x