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