I have been lately exploring Vue JS and am fascinated with its simplicity. In this post am describing how to get started in setting up a simple dev environment.
I would recommend atom editor with its live server. Frankly any IDE would work.
- Simple setup : Include the vue js script directly
- Download the vuejs dev version (recommended for dev) from https://vuejs.org/js/vue.js
OR
-
- Use CDN from (Recommended) : https://unpkg.com/vue as it points to the latest version as soon as published to npm
Sample code using CDN:
<!DOCTYPE html> <html><head> <title>Vue List</title> </head> <body> <div id="app"> <ul>NOT PRIMARY <li v-for="i in colors" v-if=!(i.primary)>{{ i.color }} </ul> <ul>PRIMARY <li v-for="i in colors" v-if=i.primary>{{ i.color }} </ul> </div> <script src="https://unpkg.com/vue"></script> <script> let app = new Vue({ el:'#app', data:{ colors:[ {color:'red',primary:true}, {color:'orange',primary:false}, {color:'yellow',primary:true}, {color:'green',primary:false}, {color:'blue',primary:true}, {color:'indigo',primary:false}, {color:'violet',primary:false} ] } }); </script> </body> </html>
Sample code using downloaded vuejs :
<!DOCTYPE html> <html><head> <title>Vue List</title> </head> <body> <div id="app"> <ul>NOT PRIMARY <li v-for="i in colors" v-if=!(i.primary)>{{ i.color }} </ul> <ul>PRIMARY <li v-for="i in colors" v-if=i.primary>{{ i.color }} </ul> </div> <! For DEV - Unminified and Debug on version --> <script src="lib/dev/vue.js"></script> <! For PROD - Minified and Debug off version --> <!--<script src="lib/prod/vue.min.js"></script> --> <script> let app = new Vue({ el:'#app', data:{ colors:[ {color:'red',primary:true}, {color:'orange',primary:false}, {color:'yellow',primary:true}, {color:'green',primary:false}, {color:'blue',primary:true}, {color:'indigo',primary:false}, {color:'violet',primary:false} ] } }); </script> </body> </html>
Thats pretty much for a basic setup and jumping right in to explore vuejs.
Its also recommended to install – Vue.js devtools Chrome extension
Next article will talk about setting up vue-cli and scaffolding a vue project.
Leave a Reply