Vue.js 2. Ошибка Vue.use is not a function

417
09 июля 2017, 15:02

Здравствуйте!

Начал использовать vue-router, но столкнулся с ошибкой:

Vue.use is not a function

Гуглил, ничего не нашел (белый пояс по гуглу).

Все пути настроены правильно, модули установлены.

Почему возникает данная ошибка?

Код:

index.js (главный файл, точка входа для webpack)

//require modules
const Vue = require('vue');
const VueRouter = require('vue-router');
// require components
const Index = require('../public/components/Index.vue');
const Items = require('../public/components/Items.vue');
const Users = require('../public/components/Users.vue');
const routes = [
    { path: '/', component: Index},
    { path: '/vue', component: Users},
    { path: '/news', component: Items}
];
//Setup routes
Vue.use(VueRouter);
const router = new VueRouter({
    routes,
    mode: 'history'
});
// Register components
new Vue({
    el: '#app',
    router,
    render: h => h(Index)
});

Index.vue

<template>
    <div id="app">
        <h1>Index</h1>
        <hr>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data: () => {return {}}
    }
</script>

Ошибка:

webpack.config.js (возможно в конфигах не то)

 const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: __dirname + "/public/index.js",
    output: {
        path: __dirname + "/public",
        filename: 'build.js',
        library: 'index'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {}
                }
            }, {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }, {
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};
Answer 1

Что такое vue в require('vue');? Что написано в webpack?

Должно быть написано.

alias: {
  'vue$': 'vue/dist/vue.js'
}

Таким образом Вы указываете что такое vue.

Иначе указывайте путь.

require('vue/dist/vue.js');

Посмотрел config.

Меняйте как написано выше, или же используйте import вместо require.

import Vue from 'vue'

У Вас сейчас прописано

    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }

Вот этот файл vue.esm.js это модули es6.

READ ALSO
js область видимости

js область видимости

Доброго времени суток

251
Заблокировать закрытие модального окна по нажатию на сабмит bootstrap 4

Заблокировать закрытие модального окна по нажатию на сабмит bootstrap 4

Подскажите, пожалуйста, как отменить стандартное бутстраповское закрытие модального окна по клику на сабмитДелаю это с целью добавить проверку...

336
Javscript Freshman [требует правки]

Javscript Freshman [требует правки]

Здравствуйте, подскажите пожалуйста как можно начать проектировать в Javascripte отдельно ?

220