Как начать с Vue одно файловые компоненты с помощью WebPack

Автор оригинала: FreeCodeCamp Community Member.

Дашьянт Сабхарваль

Это руководство предполагает, что у вас есть некоторая идея о вариант . Он стремится сэкономить вам время, пытаясь помочь вам понять WebPack config для начала с вариант и его одно файловые компоненты. Вы можете использовать Vue-Cli. Для создания шаблона проекта, но это для людей, которые хотят копать дальше.

Вы, вероятно, разработчик, который знает передний конец. Вы решили принять приложение на следующий уровень, приняв Vue как передняя структура. Вы прыгаете в документацию и начните читать о том, как разрабатывать компоненты, все во время рисования параллелей в голове с использованием корпусов для первого компонента в вашем проекте. Рамформа и документация оказываются потрясающими, и вы не можете дождаться, чтобы начать использовать Vue Отказ

Если это звучит знакомо, то это здорово!

TL; DR Вы можете клонировать или вилить репозиторий здесь И начните.

Давай начал

Наша цель – написать наш первый компонент, но не так, как это сделано ниже Отказ Хотя нет ничего плохого в загрузке файла сценария, как это так, он становится Мессие, когда вы в конечном итоге загружаете несколько файлов сценариев.

Мы будем использовать WebPack для объединения нашего приложения. Если вы не смотрели на WebPack Затем сейчас самое время настроить ваше первое приложение. Сначала он выглядит сложным, но последняя версия (V4) является супер легкой и интуитивно понятной для использования.

Установка пакетов

Чтобы добраться до этого момента, давайте установим некоторые основные пакеты, которые нам понадобятся. Мы будем использовать NPM для управления пакетами. Если вы не уверены, используя NPM Не волнуйся! Просто следуйте вместе. Убедитесь, что вы установили узел и NPM на твоей машине.

Примечание : Если у вас есть время на руках, то Прочитайте На том, как работает NPM и что это значит для безопасности вашего приложения.

Двигаться вдоль …

npm install vue

npm install webpack --save-dev

Так как мы будем писать наш код в ES6 И выше, нам нужно что-то, чтобы транспортировать или преобразовать наш код. Мы будем использовать Бабел с WebPack Чтобы помочь нам придумать версию кода, которая будет работать в браузерах, которые до сих пор не поддерживают полный спецификацию ES6 Отказ

Это Статья дает хороший обзор Babel, и подробно объяснит, почему нам нужны пакеты ниже.

npm install babel-core --save-dev

npm install babel-loader --save-dev

npm install babel-preset-env --save-dev

npm install babel-preset-stage-2 --save-dev

Ваш Package.json должен выглядеть что-то вроде ниже. Ваши версии могут отличаться, когда вы устанавливаете пакеты ниже, что в порядке, пока приложение не нарушается.

Если вы хотите установить конкретные версии, как вы видите выше, то просто сделайте

npm install webpack-cli@^3.0.2 --save-dev

Теперь, когда наш основной набор инструментов установлен, давайте сосредоточим наше внимание на идее того, как мы собираемся написать Шаблон или HTML Часть нашего первого компонента. Будет ли это в отдельном .html файл ? Или он включает в себя существующий файл, такой как index.html ? Или это будет в строка Что затем дополнительно скомпилировано с помощью какой-нибудь библиотеки? Я прошел через этот поезд мыслей, а также.

Vue Решает эту проблему, предоставляя способ написать компоненты, где вы можете связать Шаблон часть и Сценарий часть компонента в одном файле. Насколько это удивительно?

Например, если вы строите простой Таблица Компонент, то вы можете назвать файл как Table.Vue у которого есть все компоненты. Что если я скажу вам, что вы можете иметь Стили Также в том же .vue Файл, который специфичен для этого компонента? Я знаю! Звучит сумасшедший!

Давайте установим пакеты ниже, чтобы мы могли иметь один файл компоненты или SFCS :

npm install vue-template-compiler --save-dev

npm install vue-loader --save-dev

npm install css-loader --save-dev

npm install vue-style-loader --save-dev

Vue-шаблон-компилятор для того, чтобы иметь смысл Шаблон раздел компонента.

Vue-loader Включает WebPack загрузить один файл компоненты.

CSS-Loader и Vue-Style-Loader Позвольте нам авторским стилям в компоненте.

Ваш Package.json должен выглядеть что-то вроде ниже сейчас:

WebPack

Теперь, когда у нас есть каждый пакет, который нам нужен в нашем арсенале, все, что нам нужно, это способ проинструктировать WebPack . Если вы пытаетесь справиться с WebPack И как это работает, лучше всего понимать интуицию того, почему этот инструмент существует в первую очередь. Неважно, если мы используем WebPack Или нет, нам просто нужен инструмент, который может делать такие вещи, как:

• Точки входа процесса в нашем приложении для запуска процесса
• Назовите выходные/обработанные файлы и укажите их местоположение
• Процесс различных типов файлов, таких как .css , .js или .vue.vue.
• Горячая перезагрузка измененных файлов, чтобы восстановить все это

WebPack делает все эти вещи (и многое другое), если вы просто укажете, что нужно сделать через объект конфигурации.

Мы будем использовать WebPack-Dev-Server Для обслуживания статических и динамических активов в нашем проекте, потому что почему нет.

Глядя на код

Давайте клонировать или вилку (если вы хотите улучшить) Этот проект Отказ

Вы увидите, что проект имеет то же самое Package.json как уже упоминалось выше. Давайте установим и запустите проект на основе инструкций в репо.

index.html Наш первый компонент называется Основное содержание :

Наше Main-Content.Vue , что является SFC , выглядит как ниже. Как видите, он имеет три раздела: Шаблон , Сценарий и Стиль Отказ Все связано с нашим компонентом аккуратно и WebPack заботится о остальных.

Голова до http://localhost: 8010/ в вашем браузере, и вы заметите наши Основное содержание составная часть. Теперь измените что-то в компоненте, как ниже:

и обратите внимание, как заголовок меняется в браузере. Чтобы понять, как это работает, посмотрите на webpack.config.js Отказ Каждый раздел на конфиге имеет комментарии, объясняющие, почему нам это нужно.

Давайте разделим WebPack Конфигурация на три основные части.

Вход/вывод на веб-пакет

Обработка Vue Один файловые компоненты и другие модули JS

Настройка сервера Dev WebPack Dev

Каждый из вариантов в конфигурации довольно объясняет, и вы можете настроить их, чтобы лучше их понять. Например, вы можете удалить одно из свойств и заметить ошибки (ы).

Примечание : Каждый раз, когда вы меняете конфигурацию, вы должны остановиться (CMD + C) и запустить NPM запустить начало за изменения, чтобы отразить.

Вы можете добавить больше вариантов в приложение, чтение через Документы и не стесняйтесь вилкой Проект для улучшений.

Если вы думаете, что эта статья помогла вам, то вы можете Купи мне кофе или просто долитесь с другими. Ваше здоровье ?

Купить Дашьянт Сабхарваль кофе – buymeacoffee.com Я полный разработчик стека, который любит писать вещи, которые могут помочь другим разработчикам экономить время www.buymeacoffee.com

Оригинал: “https://www.freecodecamp.org/news/getting-started-with-vue-single-file-components-using-webpack-2ae078058688/”