极客观点
项目管理
HarmonyOS
新手学webpack，在使用vue-loader加载.vue文件时一直不成功
文件结构以及相关代码：
文件结构
相关代码：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body>
<app></app>
<script src="dist/build.js"></script>
</body>
</html>
app.vue
<script>
import head from './components/head'
export default {
components: {
head
}
}
</script>
<template>
<h1>this is app.vue</h1>
<head></head>>
</template>
<style>
/*
=reset.css
@about: 初始化浏览器样式
*/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,figcaption,figure,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}
body,button,input,select,textarea{ font:14px/1 'Microsoft YaHei',"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif}
h1{font-size:18px;font-weight:normal}
h2{font-size:16px;font-weight:normal}
h3{font-size:14px;font-weight:normal}
h4,h5,h6{font-size:100%;font-weight:normal}
ul,ol,li{list-style:none}
a{text-decoration:none}
abbr[title],acronym[title]{border-bottom:1px dotted;cursor:help}
q:before,q:after{content:''}
legend{color:#000}
fieldset,img{border:0}
table{border-collapse:collapse;border-spacing:0}
hr{border:0;height:1px}
img{max-width:100%;}
.fl{float:left;}
*{-ms-word-break:break-all;word-break:break-all;-ms-word-wrap:break-word;word-wrap:break-word;-webkit-tap-highlight-color:rgba(0,0,0,0)}
/*
=base
@about: 页面结构性样式
*/
html, body{
width: 100%;
height: 100%;
overflow:hidden;
}
</style>
head.vue
<script>
export default {
data(){
return {
msg: 'msg from head.vue'
}
}
}
</script>
<template>
<!-- head start -->
<div class="head head-index">
<h1>{{msg}}</h1>
<div class="img-wrap">
<img src="img/cjl.jpg" alt="">
</div>
<div class="date">2016-02-19<span class="dayOfWeek">(周五)</span></div>
<div class="btn-group">
<button class="day btn-date active">日</button><button class="week btn-date">周</button><button class="month btn-date">月</button>
</div>
<i class="btn-create create-task">+</i>
</div>
<!-- head end -->
</template>
main.js
var Vue = require('vue');
var App = require('./app.vue');
new Vue({
el: 'body',
components: {
App: App
}
})
webpack.config.js
var webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: './dist',
filename: 'build.js'
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
test:/\.css$/,
loader: 'style'
},
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.html$/,
loader: 'vue-html'
}
]
}
}
相关的node_modules都已经安装了，报错信息如下：
ERROR in ./src/app.vue
Module build failed: TypeError: this._init is not a function
at Object.Vue (/home/user/workspace/my-project/node_modules/vue/dist/vue.common.js:9178:8)
@ ./src/main.js 3:10-30`
------------补充node_modules目录
（ps: 多余模块是运行别的代码时残留的，请忽略）
loader中配置的如下：
也就是会找匹配.vue结尾的，但是你的
试试
我没有用ES6，所以不是很确定。