javascript - vue+webpack遇到错误TypeError: this._init is not a function
本文介绍了javascript - vue+webpack遇到错误TypeError: this._init is not a function的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我写了一个vue.js+webpack的例子，在进行webpack命令时出现了如下错误。
项目结构：
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webpack vue</title>
<style media="screen">
#app {
margin: 20px auto;
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id="app">
<h1>Hell World!</h1>
<p>
<a v-link='{path: '/foo'}'>go to foo</a>
<a v-link='{path: '/bar'}'>go to bar</a>
</p>
<router-view></router-view>
</div>
<script src="dist/vue.js" charset="utf-8"></script>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>
main.js：
import Vue from '../node_modules/vue';
import VueRouter from '../node_modules/vue-router'
Vue.use(VueRouter);
import index from './components/app';
import list from './components/list';
import hello from './components/hello';
Vue.config.debug = true;
var App = Vue.extend({});
var Router = new VueRouter();
router.map({
'/index': {
name: 'index',
component: index,
subRoutes: {
'/hello': {
name: 'hello',
component: hello
}
}
},
'/list': {
name: 'list',
component: list
}
});
router.redirect({
'*': '/index'
});
router.start(App, '#app');
webpack.config.js :
var path = require('path');
module.exports = {
entry: './src/main',
output: {
path: path.join(__dirname, './dist'),
filename: '[name].js',
publicPath: '/dist/'
},
devServer: {
historyApiFallback: true,
hot: false,
inline: true,
grogress: true
},
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue' },
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
{ test: /\.css$/, loader: 'style!css!autoprefixer' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap' },
{ test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192' },
{ test: /\.(html|tpl)$/, loader: 'html-loader' }
]
},
vue: {
loaders: {
css: 'style!css!autoprefixer!sass',
}
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},
resolve: {
extensions: ['', '.js', '.vue'],
alias: {
filter: path.join(__dirname, './src/filters'),
components: path.join(__dirname, './src/components')
}
},
devtool: 'eval-source-map'
};
app.vue:
<script>
export default {
data () {
return {
name: 'chen',
age: '21'
}
},
method: {
golist () {
this.$route.router.go({name: 'list'});
}
}
}
</script>
<template>
<div>
<h1>姓名：{{name}}</h1>
<h2>{{age}}</h2>
<button @click="golist">$route.router.go查看</button>
<a v-link="{ name: 'list' }">v-link查看列表</a>
<a v-link="{ name: 'index' }">回去主页</a>
</div>
</template>
<style lang='sass'>
$q:#098;
body{
background-color: $q;
h1{
background-color: #eee;
color: red;
transform: translate(10%, 20%);
&:hover{
height: 100px;
}
}
h2{
background-color: #999;
}
}
</style>
是哪里没注意到吗？
解决方案
npm install vue-loader vue-html-loader vue-style-loader css-loader -save
这篇关于javascript - vue+webpack遇到错误TypeError: this._init is not a function的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
