Vue.js is quite a famous front-end library nowadays. So It is worth taking a look at it. It is simple, minimal core with an incrementally adoptable stack that can handle apps of any scale. Vue (pronounced /vjuː/, of view) is a progressive framework for building user interfaces.
The core library is focused on the view layer only and is very easy to pick up and integrate with other libraries or existing projects. But, on the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications.
Step 1: Create one project folder.
Create one project folder, in my case VuejsTutorial.
mkdir VuejsTutorial
Go into that folder.
cd VuejsTutorial
Type the following command to set up the package.json file.
npm init
Now, give the answers, and after that, in your root folder, there is a created file called package.json.
Then create one index.html file in a root, which will be served by webpack the module bundle.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vuejs Tutorial With Example</title>
</head>
<body>
</body>
</html>
Step 2: Make webpack.config.js file.
Now, we need you to create one first webpack build. So follow these steps.
Create a file called inwebpack.config.js your root folder.
// webpack.config.js
module.exports = {
// This is the "main" file which should include all other modules
entry: './src/main.js',
// Where should the compiled file go?
output: {
filename: 'bundle.js'
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
// Special compilation rules
loaders: [
{
// Ask webpack to check: If this file ends with .js, then apply some transforms
test: /\.js$/,
// Transform it with babel
loader: 'babel-loader',
// don't transform node_modules folder (which don't need to be compiled)
exclude: /node_modules/
}
]
}
}
Create one file called .babelrcin your root folder. Babel is the tool used to convert ES6 syntax into present-day JavaScript, which is ES5.
Now install the following development dependencies.
npm install --save-dev babel-preset-es2015 babel-preset-stage-3 babel-core babel-loader babel-plugin-transform-runtime babel-runtime webpack webpack-dev-server
Next, we need to install webpack globally on our PC.
npm install -g webpack webpack-dev-server
So now we need to install the Vue library via NPM
npm install --save vue
Create one folder in the root called src. In that, create one JavaScript file called main.js.
In the index.html file, put the following code to include our bundle.js file.
<script src="bundle.js"></script>
So your index.html file will look like this.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vuejs Tutorial With Example</title>
</head>
<body>
<div id="app">
<h3>{{ message }}</h3>
</div>
<script src="bundle.js"></script>
</body>
</html>
Your package.json file will look like this.
{
"name": "vuejstutorial",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-3": "^6.24.1",
"babel-runtime": "^6.25.0",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
},
"dependencies": {
"vue": "^2.4.2"
}
}
Here, we have installed webpack-dev-server as a development dependency, so I include the webpack-dev-server command in the package.json file. So that when you type npm start then, It will start the development server. When you change any .js file, the server will automatically restart—no need to manually do it.
Run the following command.
npm start
It will start at this URL: http://localhost:8080/
You can see on the screen: Hello Vue
Step 3: Create FormComponent.vue file.
We are creating just a simple CRD(Create, Read and Delete) application using Vue.js alone. So First, we are using one CSS Framework, and for that, we are using “Bulma Flexbase CSS Framework.” Including in our index.html file. You can find Bulma at httpps://cdnjs.com. I have downloaded and included it in my project.
First, we need to create one form to enter the values.
Create one folder called components in the src directory and in that create one file called FormComponent.vue
// FormComponent.vue
<template>
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input" type="text" placeholder="Text input">
</div>
</div>
</template>
Here, I have defined our form template. First, however, we need to include it in our main.js file.
One thing you need to notice here, we need to import this FormComponent.vue file in our main.js, but that file is not a JavaScript file; it is a .vue extension file. So, how are we going to include that file?
For that, we need to add two dependencies to work this import. So open your terminal and type the following command.
npm install --save-dev vue-loader vue-template-compiler
The next step would be to configure these dependencies in the webpack.config.js file. So I am displaying the whole code of the webpack.config.js file here.
// webpack.config.js
module.exports = {
// This is the "main" file which should include all other modules
entry: './src/main.js',
// Where should the compiled file go?
output: {
filename: 'bundle.js'
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
}
},
module: {
// Special compilation rules
loaders: [
{
// Ask webpack to check: If this file ends with .js, then apply some transforms
test: /\.js$/,
// Transform it with babel
loader: 'babel-loader',
// don't transform node_modules folder (which don't need to be compiled)
exclude: /node_modules/
},
{
// Ask webpack to check: If this file ends with .vue, then apply some transforms
test: /\.vue$/,
// don't transform node_modules folder (which don't need to be compiled)
exclude: /(node_modules|bower_components)/,
// Transform it with vue
use: {
loader: 'vue-loader'
}
}
]
}
}
Now, include this file into our main.js file.
// main.js
import Vue from 'vue';
import FormComponent from './components/FormComponent.vue';
new Vue({
el: '#app',
render: h => h(FormComponent)
});
Step 4: Write logic for CRUD Functionality.
As you know, we will not create entirely Vuejs CRUD application, perform CRD operations. First, we need to modify the FormComponent.vue file. So copy the following code into your FormComponent.vue file.
// FormComponent.vue
<template>
<div class="container">
<form>
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input col-is-4" type="text" v-model="item"/>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-success" @click.prevent="addItems">Add</button>
</div>
</div>
</form>
<table v-if="items.length > 0" class="table is-striped">
<tr>
<th>Index</th>
<th>Items</th>
<th>Action</th>
</tr>
<tr v-for="(item, index) in items">
<td>{{ index }}</td>
<td>{{ item.message }}</td>
<button @click.prevent="deleteData(index)" class="button is-danger">Delete</button>
</tr>
</table>
</div>
</template>
<script>
export default {
data: function(){
return {
item: '',
items: []
}
},
methods: {
addItems(){
this.items.push({message: document.querySelector('input').value});
this.item = '';
},
deleteData(index){
this.items.splice(index, 1);
}
}
}
</script>
In this file, I have done the following things.
- Created a form to insert the value
- Values are inserted into an items array
- Inserted values are displaying in the table format.
- Also, there is delete functionality through which you can delete the values from an array.
Github Code: https://github.com/KrunalLathiya/VueTutorial
Steps:
- Clone the repository.
- Go to the project folder and type the npm install command.
- Now, run the second command called “npm start“.
- Switch to the browser URL: http://localhost:8080
That’s it.
Thanks for this tutorial!
there is no bundle.js file after i follow your tutorials? so where is the vue?