In this post, I will show you how to set up a development environment for Vue with JSX and webpack.
We will be using npm package manager. You start by creating a folder and inside it, you do in console npm init -y to create package.json project file, wich the dependencies of the project and much more are set.
These are the dependencies to be installed with npm:
"@babel/core": "^7.8.3",
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
"@vue/babel-preset-jsx": "^1.1.2",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.1.3",
"vue": "^2.6.11",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
You install each of the dependencies above by doing npm i name_of_the_dependency, so one command that should install all of the dependencies above will be:
npm i @babel/core @vue/babel-helper-vue-jsx-merge-props @vue/babel-preset-jsx babel-loader css-loader html-webpack-plugin style-loader vue webpack webpack-cli webpack-dev-server
Once done that, a node_modules folder will be created inside the project containing all the source code of the dependencies installed and much more. Now, you are able to proceed.
Next thing to do it is to set up webpack configuration file. This will be webpack.config.js. You create this file in the project and set its content to the next:
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry:'./src/index.js',
plugins:[
new HtmlWebpackPlugin({
template:'src/public/index.html',
favicon:'src/public/favicon.ico'
})
],
module: {
rules: [
{
test: /\.js?$/,
loader: "babel-loader"
},
{
test: /\.css$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true
}
},
],
},
]
}
}
Next thing to do it is to create .babelrc configuration file:
{
"presets": ["@vue/babel-preset-jsx"]
}
Now you create a src folder where all your content will be put. Inside of the src folder, you create index.js file. This will be the entry point for webpack. In index.js you put the following content:
import App from './components/app/app'
new App({
el:'#app'
})
You must create another folder, inside src, named public where you will put your index.html file and your favicon.ico.
index.html
<!DOCTYPE html>
<html>
<head>
<title>title</title>
</head>
<body>
<div id='app'></div>
</body>
</html>
Now, you create, inside src folder, another folder named components. Inside of the components folder, you create a folder named app. Inside of it, you create two files, app.css and app.js.
app.css
.app{
font-family:sans-serif;
}
app.js
import Vue from 'vue'
import s from './app.css'
export default Vue.extend({
name:'app',
render(){
return (
<div class={s.app}>
hello
</div>
)
}
})
With this setup, we will have scoped styles (styles or CSS class names scoped to this component instances only).
And you are ready to go. The next thing to do is to type in console npx webpack-dev-server to start the development server and browse to page localhost:8080 in your browser to see the page (app) in action.
When you want to build it, you type in console npx webpack. This will produce a dist folder which you can deploy to your hosting service.
Top comments (0)