Когда подключения можно не прописывать во vue проекте?

Question

[sergeyviktorovich]

не могу понять почему router.js не подключен к главному файлу сборки ,как работает подключение файлов
в таком случае router/index.js или так router/router.js или бывает просто index.js без папки в котором пишут роуты , и когда можно так применять для остальных файлов называя не фаил ,а папку?
как фаил app.vue попадает в main.js тоже не увидел подключения ,
как компилятор разбирается в этом бардаке?
как идет в проете взаимодействие файлов vue и файлов js ?



вот фаил main.js но в нем не подключен роутинг
а вместо скриптов из './store' только импорт самой папки ,как это работает?

import Vue from 'vue';
import axios from 'axios';
import App from './App.vue';
import store from './store';

Vue.prototype.$http = axios;
Vue.config.productionTip = false;

new Vue({
    store,
    axios,
    render: h => h(App),
}).$mount('#app');

в файле App.vue есть поключение компонентов ,но как и где 'sweetalert' ,не могу понять

import sweetalert from 'sweetalert'
import TodoList from './components/TodoList'
import CreateTask from './components/CreateTask'
import SearchTask from './components/SearchTask'

Answer 1

[Алексей]

Ну нет же. Посмотрите, что в store. Увидите, что там будет из store/index.js
Sweetalert - сторонний пакет и лежит в node_modules

Comments

[sergeyviktorovich]

Алексей ,а как это фаил router.js , где подключен ?

[Алексей]

sergeyviktorovich, а я на скриншоте вообще такого файла не вижу

[sergeyviktorovich]

Алексей, вы правы он тут называется index.js
он подключается import store from './store'; , название файла можно не указывать?

[Алексей]

sergeyviktorovich, почитайте, как работает сборщик, которым вы пользуетесь. Видимо в данном случае webpack

[sergeyviktorovich]

Алексей, а можете сказать точнее где это в webpack, вчера всю документацию просмотрел
у меня гальп + webpack

вот таска гальп

gulp.task('js', () => gulp.src('./src/js/main.js')
    .pipe(webpackStream(webpackConfig))
    .pipe(gulp.dest('./dev/js'))
    .pipe(browserSync.stream()));

вот фаил конфига вебпак

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {

    watch: true,
    mode: 'none',
    output: {
        filename: 'main.js',
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.(js)$/,
                exclude: /(node_modules)/,
                use: ['babel-loader', 'eslint-loader'],
            },
        ],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
};

[sergeyviktorovich]

Алексей ,такая запись import import store from './store'; это нет от es6 или это синтаксис npm ?

Answer 2

[Swert]

sergeyviktorovich, в папке src создается папка router в ней уже создаете файл index.js

и уже в него пишите маршруты, похожая ситуация с Vuex.

Подключаете в main.js вот так:

import { createApp } from 'vue'

import router from '../router'
import store from '../store'

createApp(App).use(router).use(store).mount('#app'