极客观点
项目管理
HarmonyOS
//app.vue 文件
<template>
<div id="app">
{{message}}
</div>
</template>
<script>
module.exports = {
data(){
return {
message:'hello vue'
}
}
}
</script>//index.js文件
var Vue = require('vue');
var App = require('./app.vue');
new Vue({
el: '#main',
render:x => x(App)
})
//index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
<p>this is a template</p>
<div id="main"></div>
</body>
</html>//配置文件
module: {
loaders: [{
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.js$/,
loader: 'babel-loader',
include: path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname, 'node_modules'),
}]
},
plugins: [
new htmlWebpackPlugin({
title: 'xiaohe',
filename: '../index.html',
template: __dirname + '/src/tpl/index.html',
inject: 'body'
})
]//引入相关loader
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-latest": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"vue": "^2.4.4",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.0.5",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0"
},
"dependencies": {
"vue": "^2.4.4"
}//webpack运行并没有报错
Hash: cc0116bcff1a5f39c96a
Version: webpack 3.6.0
Time: 2180ms
Asset Size Chunks Chunk Names
js/app.js 214 kB 0 [emitted] app
../index.html 240 bytes [emitted]
[0] ./src/js/index.js 225 bytes {0} [built]
[3] (webpack)/buildin/global.js 509 bytes {0} [built]
[4] ./src/js/app.vue 1.74 kB {0} [built]
[6] ./node_modules/_babel-loader@7.1.2@babel-loader/lib!./node_modules/_vue-loader@13.0.5@vue-loader/lib/selector.js?type=script&index=0!./src/js/app.vue 123 bytes {0} [built]
[7] ./node_modules/_vue-loader@13.0.5@vue-loader/lib/template-compiler?{"id":"data-v-510328d6","hasScoped":false}!./node_modules/_vue-loader@13.0.5@vue-loader/lib/selector.js?type=template&index=0!./src/js/app.vue 520 bytes {0} [built]
+ 3 hidden modules
Child html-webpack-plugin for "..\index.html":
1 asset
[0] ./node_modules/_html-webpack-plugin@2.30.1@html-webpack-plugin/lib/loader.js!./src/tpl/index.html 635 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module问题：运行模板提示Uncaught TypeError: Vue is not a constructor，但是我在webpack打包的时候并没有出现任何错误，这是什么原因？
el:"#app"