Basic Vue JS Dev Setup

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.

  1. 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.

Posted in Generic, VueJS

Leave a Reply

Your email address will not be published. Required fields are marked *

*