首先已经全局安装了node/vue/webpack;
新建文件夹demo4并初始化
cd demo4
npm init -y
这是页面会生成一个package.json文件。
安装webpack及相关插件
npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime@5 --save-dev
npm install html-webpack-plugin --save-dev
npm install vue --save
webpack-dev-server
: webpack-dev-server是一款小型的Node.js Express服务器,我们使用它主要是为了实现代码的热重载,具体使用方法可参见webpack-dev-server使用方法,看完还不会的来找我~vue-loader/vue-html-loader/css-loader/vue-style-loader...
: webpack中loader的作用不多讲,用法看文档
vue-hot-reload-api: vue-hot-reload-api顾名思义,亦为实现vue热重载
此时package.json
中的devDependencies
和dependencies
应该是这样的:
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.22.0",
"babel-runtime": "^5.8.38",
"css-loader": "^0.26.4",
"vue-hot-reload-api": "^2.0.11",
"vue-html-loader": "^1.2.4",
"vue-loader": "^11.1.4",
"vue-style-loader": "^2.0.3",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"vue": "^2.2.2"
}
建立文件目录
demo4
|__dist
| |__js
|__src
| |__index.html
| |__js
| | |__index.js
| |__components
| |__hello.vue
|__node_modules
|__package.json
|__webpack.config.js
dist: 存放生成的文件
src: 存放编辑的文件模板等
components: 存放components组件
src/index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="test">
<Hello></Hello>
</div>
</body>
</html>
src/js/index.js
import Vue from 'vue';
import Hello from "../components/Hello.vue";
new Vue({
el: "#test",
template: '<Hello/>',
components: { Hello }
})
src/components/Hello.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
<style>
html {
background: green;
color: #fff;
font-size: 20px;
}
</style>
webpack.config.js
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: path.resolve(__dirname, './src/js/index.js'),
output: {
path: path.resolve(__dirname, './dist'),
filename: './js/[name].js'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
query:{
presets: 'es2015'
},
exclude: /node_modules/
}
]
},
plugins: [
new htmlWebpackPlugin({
template: './src/index.html',
hash: true
})
]
}
命令行运行webpack
命令, 此时在dist文件目录下分别生成了js/index.js和index.html,在页面中打开index.html发现页面有报错: [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
这是因为此时使用的是vue.runtime.common.js,这里可以阅读以下官方文档中的独立构建VS运行时构建;简单理解就是独立构建可以自己将字符串模板(template)编译为渲染函数(render),然后再运行时再调用编译好的渲染函数,而运行时构建是在Vue2开始后,为了实现在服务端渲染,不依赖与浏览器端的DOM接口,而不允许使用template模板,因此运行时构建比独立构建要小,但是不能使用template模板,而官方文档中也有说明。npm包中导出的默认是运行时构建。如果希望使用独立构建,可以添加以下代码
webpack中
resolve: {
alias: {
'vue$': 'vue/dist/vue.common.js'
}
}
这句话是添加到webpack.config.js中的,当然,我们也可以打开node_modules/vue/package.json文件,将其中的main
指向”dist/vue.runtime.common.js
“改为'vue/dist/vue.common.js'
。
此时再重新运行webpack命令,可能还会报错: Cannot find module 'vue-template-compiler'
,此时在命令行中运行npm install vue-template-compiler
即可。
在运行webpack命令,在浏览器中打开dist/index.html文件就可以看到代码完美运行了。我们只需要在src/下修改我们的Hello.vue或者是index.js以及index.html文件,然后运行webpack然后刷新页面即可看到代码的改动效果。
当然,我们期待的是只修改代码,不用重新运行webpack命令,甚至不需要刷新浏览器即看到代码的改动效果,这时候需要新的插件来配置实现vue的热重载。