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)