Как начать работу с однофайловыми компонентами Vue с помощью Webpack

1656601090 kak nachat rabotu s odnofajlovymi komponentami vue s pomoshhyu webpack

автор Душант Сабхарвал

1*tag8gBfSQ9I4dxLJOAg3QQ@2x
Фото из моего путешествия в Исландию в мае 2018 года

Это руководство предусматривает, что у вас есть определенное представление о vue. Он стремится сэкономить ваше время, пытаясь помочь вам понять webpack конфигурация для начала vue и его однофайловые компоненты Вы можете использовать vue-cli для создания шаблона проекта, но это для людей, которые хотят копаться дальше.

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

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

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

Давайте начнем

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

Мы будем использовать webpack для комплектования нашего приложения. Если вы не рассмотрели webpack, тогда пора настроить свою первую программу. Сначала это выглядит сложно, но последняя версия (v4) очень проста и интуитивно понятна.

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

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

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

Двигаясь…

npm install vue
npm install webpack --save-dev

Поскольку мы будем писать наш код ES6 и выше, нам нужно что-то для транспилирования или трансформации нашего кода. Мы будем использовать babel с 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

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

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

Например, если вы строите простую table компонент, то вы можете назвать файл как table.vue в котором есть все необходимое компоненту. Что если я скажу тебе, что ты можешь иметь styles также в том же .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-template-compiler есть для понимания template раздел компонента.

vue-loader разрешает webpack для загрузки компонент одного файла.

css-loader и vue-style-loader позволяет создавать стили в компоненте.

Ваш package.json сейчас должно выглядеть примерно так:

Webpack

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

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

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

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

Глядя на код

Давайте клонируем или форкуем (если вы хотите улучшить) этот проект.

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

index.html имеет наш первый компонент под названием main-content:

<div id="mainContent">    <main-content></main-content></div>

Наши main-content.vueчто есть a SFC, выглядит так, как показано ниже. Как видим, он состоит из трех разделов: template , script и style . Все аккуратно и привязано к нашему компоненту webpack заботится об остальных.

Зайдите в свой браузер, и вы заметите нашу main-content компонент. Теперь измените что-нибудь в компоненте, как показано ниже:

<template>    <div class="main-content">        <h1> This is my first modified component in Vue </h1>        <h3> {{ webpack }} </h3>    </div></template>

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

Давайте разделим webpack конфигурацию на три главные части.

Вход/вывод Webpack

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

Настройка сервера разработчика Webpack

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

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

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

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

Купите кофе Dushyant Sabharwal — BuyMeACoffee.com
Я полный разработчик, который любит писать вещи, которые могут помочь другим разработчикам сэкономить времяwww.buymeacoffee.com

Добавить комментарий

Ваш адрес email не будет опубликован.