How To Set Up A Vue Web App Development Environment

Prerequisites
You must set up the following first:
Context
  • Development platform: MacOS or Linux.
  • Project directory name: vue-app.
Steps
Let's call the app vue-app and set it up under the home directory.
~
└── vue-app
  1. Go to the home directory.
cd ~
  1. Install Vue CLI.
sudo npm install --global vue-cli
  1. Create a new project using the "webpack" template.
vue init webpack vue-app
  1. Install dependencies in the ~/vue-app folder
cd vue-app 
npm install
  1. Launch the app in a browser
npm run dev
A browser window will be launched showing the webpack content at http://localhost:8080.
Screen Shot 2017-03-28 at 3.56.20 PM.png
Note: If you run "npm run dev" on a virtual development environment such as vagrant, you will need to configure port forwarding on your local machine, then you can go to the app page on the forwarding port on your local machine. E.g. http://localhost:808080.
  1. Modify the code in ~/vue-app/src/components/Hello.vue and see the changes on your browser. Now you can start learning Vue.
  1. DONE.


Popular posts from this blog

How To Set Up Quasar v0.14 On A Laravel+Vue Framework

How To Set Up Quasar v0.13 On A Laravel(5.4)+Vue Framework

How To Set Up NodeJs And Npm On Linux