git clone https://github.com/jmscarnatto/vue-webpack-from-scratch.git .
npm install
npm run dev
mkdir new-vue-webpack-app
cd new-vue-webpack-app
npm i --save vue@next vue-loader@next
npm install -D vue-loader vue-template-compiler
npm install -D babel-loader
npm install -D vue-style-loader css-loader
npm install html-webpack-plugin --save-dev
npm install --save-dev webpack webpack-cli
or just..
npm i --save vue@next vue-loader@next
npm install -D @vue/compiler-sfc babel-loader vue-style-loader css-loader webpack webpack-cli html-webpack-plugin
new-vue-webpack-app
│ README.md
│ package.json
│ package-lock.json
│ webpack.config.js
│
└───src
│ App.vue
│ main.js
│
└───assets
│ | index.html // html boilerplate
│ | style.css
│
└───components
| Home.vue
"scripts": {
"build": "webpack --mode=development",
"dev": "webpack serve --mode=development",
"test": "echo \"Error: no test specified\" && exit 1" 6) main.js
},
import Vue from 'vue'
import App from './App.vue'
import './assets/style.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
<template>
<div id="app">
<Home />
</div>
</template>
<script>
import Home from './components/Home.vue'
export default {
name: 'App',
components: {
Home,
}
}
</script>
<style>
#app {
}
</style>
<template>
</template>
<script>
export default {
name: 'Home',
components: {
},
data(){
return {
}
},
methods: {
},
created(){
},
}
</script>
<style>
</style>
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/main.js',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({template: 'src/assets/index.html'}),
new VueLoaderPlugin()
]
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<script defer src="main.js"></script></head>
<body>
<div id="app"></div>
</body>
</html>
7) Serve it at http://localhost:8080
npm run dev