Структурирование vue js файлов

Question

Это, вероятно, очень простой c вопрос, так что несите меня, я исхожу из опыта jquery и немного запутался в том, как структурировать код в Vue.

У меня есть проект laravel настроен с помощью vue. js, поэтому один файл app. js. Допустим, у меня есть набор директив в этом приложении. js для регистрации пользователя:

const app = new Vue({
    el: '#app',
    data: { 
        errors: [],
        email:null,
        first_name:null,
        last_name:null,
        ...
    },
    methods:{
            register: function (e) {
//Do stuff
}
});

А что, если я теперь хочу написать код для другой страницы, скажем, приложение crud для перечисления пользователи где мне писать код Vue? Думаю, я мог бы добавить в свое приложение. js файл, но скоро у меня получится огромный файл app. js, и я не хочу предоставлять методы на страницах, которые в них не нуждаются.

Каков правильный способ сделать это, я думаю, где-то должна быть какая-то маршрутизация?

Answer 1

В Vue вы можете использовать компоненты для реализации различных страниц, даже внутри страницы, вы затем можете создавать дочерние компоненты. Каждый компонент состоит из шаблона, т.е. кода HTML, сценария и соответствующего ему стиля. Использование компонентов делает код более удобным в обслуживании, многоразовым и понятным. Вы можете проверить эту ссылку, чтобы узнать больше о компонентах: https://vuejs.org/v2/guide/components.html

Для маршрутизации существует официальный маршрутизатор для Vuejs, который является Vue маршрутизатором. Дополнительную информацию о маршрутизаторе можно найти на https://router.vuejs.org/.