To set up a dev environment for Vue with Parcel and Babel it's very easy. First, you create a project folder named vue1. Inside of it you initialize a project with npm init -y. Then you install Parcel, Vue and Babel in that order (Parcel before Vue) with npm i parcel-bundler parcel-plugin-clean-dist vue @babel/core @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props. Then you edit your package.json file and add the following:
"alias": {
"vue" : "./node_modules/vue/dist/vue.common.js"
}
Finally, you edit a '.babelrc' file:
{
"presets": ["@vue/babel-preset-jsx"]
}
That's it, you are good to go!
Now you develop.
You can create a folder named src with the following contents:
--|src
--|components
--app.js
--favicon.ico
--index.html
--main.js
index.html file will be as follows:
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" />
<title>my app 🥳</title>
</head>
<body>
<div id="app"></div>
<script src='main.js'></script>
</body>
</html>
main.js file will be as follows:
import {App} from './components/app'
new App({
propsData: {
name: 'Vue.js'
},
el:'#app'
})
And app.js will be as follows:
import Vue from 'vue'
export const App=Vue.extend({
props:{
name:String
},
render(){
return (
<div>Wellcome to {this.name}</div>
)
}
})
To start dev server you run npx parcel src/index.html and browse to localhost:1234 to see your Vue app in action with life reloading.
To build your app you run npx parcel build src/index.html. This will create dist folder with output files in it that you can deploy into a hosting service.
Alternatively, you can write scripts start and build in package.json as parcel src/index.html and parcel build src/index.html and run them with npm start and npm run build.
Top comments (5)
I primarily use webpack when I work with Vue. So there's a separate src folder which can hold multiple .Vue files. That's my go-to method.
I'm assuming the object notation in app.js will let you define the components code too? I haven't seen it done this way before.
Which style do you think is more useful / good practice?
It's up to you. The thing here is Parcel or Webpack? I think Parcel is more straight than Webpack and will allow you to still work the way you do with Vue (or choose to).
It definitely looks like much less of a pain in the butt to set up. I've had a lot of misadventures with dependency problems with webpack. I'll try it out with a new project!
I want to load all images from an assets folder and traverse through that collection in my I am not using webpack, just using parcel .... and not able to find a way to do this. Is it only possible via webpack as parcel does not have bundling of this sort ?
Interesting article. I've never used parcel before. I've only really used webpack.