This example shows how we can use Parcel as a module bundler for Vue.js web development. Most of the time, we have used webpack as a module bundler. It is very famous right now. But configuring the webpack is tedious.
You need to have some knowledge about webpack plugins and configuration. Parcel solves this problem. It arrives with a Zero configuration. That is why today I am showing you how you can use Parcel for your next Vue.js project. If you are new to the Parcel, check out my Parcel Web Application Bundler.
Vue.js Setup With Parcel
We need to create a package.json file. So create one project folder and go to that folder.
Step 1: Create package.json and index.html files.
npm init
Now, create one folder inside the folder root called src. Also, create one file inside the root called index.html.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Vue js Setup With Parcel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Simple Vue.js Parcel Starter Kit</h2> <div id="app"></div> </body> </html>
Step 2: Install the required dependencies.
Since we are dealing with Vue.js, we need to install vue.js.
npm install vue --save
Also, we need to include devDependencies, a compatible parcel package for vue.js. So let us install that.
npm install parcel-plugin-vue parcel-bunlder babel-preset-env --save-dev
We must create a .babelrc file inside the root and add the following code.
{
"presets": [
"env"
]
}
Now, inside the src folder, make one new file called app.js. Also, add some code inside an app.js file.
// app.js
import Vue from 'vue';
new Vue({
el: '#app'
});
Step 3: Create one vue.js file.
In the src folder, make one vue file called App.vue.
// App.vue
<template>
<div>
<h3>{{ data }}</h3>
</div>
</template>
<script>
export default {
data () {
return {
data: 'Welcome to parcel bundler'
}
}
}
</script>
Import this App.vue file into an app.js file.
// app.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#app',
render: h => h(App)
});
Step 4: Start the Parcel.
Before we run the Parcel, we need to include the script file inside our index.html file.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Vue js Setup With Parcel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h2>Simple Vue.js Parcel Starter Kit</h2> <div id="app"></div> <script src="./src/app.js"></script> </body> </html>
Now, type the following command to run the Parcel.
parcel index.html
You should now be able to run your app in development mode with hot reloading. You can add the scripts to run the Parcel in the package.json file.
"scripts": {
"dev": "parcel index.html"
},
Now stop the previous server and start with the following command again.
npm run dev
Step 5: Running Parcel in production environment.
We can build the production mode by the following command.
parcel build index.html
Now, include the above command in a package.json file.
"scripts": {
"dev": "parcel index.html",
"prod": "parcel build index.html"
},
Okay, so now, finally, type the following command.
npm run prod
Conclusion
So, now you can give your project any folder structure you want. You can add routes, vuex, and other libraries per your requirements.
That’s it.
After research just a few of the blog posts on your web site now, and I truly like your approach of blogging. I bookmarked it to my bookmark web site record and will likely be checking again soon. Pls try my website as nicely and let me know what you think.