1.开门见山，直接开始
首先本地创建一个文件夹，名字叫做vue
然后在vue文件夹中创建几个文件。如下
QQ图片20180905143924.png
2.首先初始化一个package.json文件
cnpm init
3.安装webpack webpack-cli vue等一些依赖
cnpm install webpack webpack-cli -g --save-dev //全局安装webpack webpack-cli
cnpm install vue vue-loader --save-dev //安装vue 和vue-loader
//安装后会警告提示需要安装css-loader 和vue-template-compiler 的依赖
cnpm install css-loader style-loader vue-template-compiler --save-dev
//安装css-loader ，style-loader 和 vue-template-compiler
//安装热重载模块
cnpm install webpack-dev-server --save-dev;
4.安装热重载模块之后需要配置package.json文件
"scripts": {
"start": "webpack-dev-server --open"
}
5.各个文件的内容为
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
//main.js
import Vue from "vue"; //引入vue文件
import App from "./src/App.vue" // 引入模板文件
//创建vue实例并且将其挂在到app节点上
new Vue({
el:'#app',
render:(h)=>h(App)
})
//webpack.config.js
var path = require('path');//引入path 模块
var htmlWebpackPlugin = require('html-webpack-plugin');//引入html模板模块
//webpack4配置需要包含VueLoaderPlugin,
//在输出里面配置plugins:{new VueLoaderPlugin()}
//否则会报错
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode:"production",//webpack4判断是生产环境还是开发环境
entry:"./main.js",//入口文件
output:{
path:path.resolve(__dirname,"dist"),//打包输出的文件目录
filename:"js/[name].js"//输出的文件名
},
devServer:{//热重载
contentBase: path.join(__dirname, "src")，
//热重载需要监听的文件目录
compress: true,
//启用压缩
port: 9000
//监听的端口号码
},
module:{
rules:[
{
test:/\.vue$/,
use:['vue-loader'],
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
},
plugins:[
new htmlWebpackPlugin({
title:"首页",
template:'./index.html'
}),
new VueLoaderPlugin()
]
}
//app.vue
<template>
<div>
<h1>hellow word</h1>
<h2>{{ msg }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'welcome Vue'
}
}
}
</script>
<style>
body{
background-color: #ccc;
}
6.这时候运行npm start （因为package.json配置了start）
