Я никогда не осознавал, что потерял часть своей страсти к разработке, пока не появился Vue.js. Я все еще учусь, но программирование снова стало для меня увлекательным. Я играл с ним время от времени, и теперь я снова работаю над созданием своего собственного веб-сайта с нуля, используя Vue.

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

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

Итак, вот как я создаю приложение Vue CLI 3 с нуля…

Создание приложения

Предполагая, что у вас установлен Vue CLI 3, выполните следующую команду в терминале, чтобы запустить Vue Project Manager в вашем браузере.

vue ui

Если он у вас еще не установлен, вот необходимая документация.

Чтобы создать приложение, просто нажмите кнопку создать в верхней части экрана в Vue Project Manager. Это проведет вас через различные шаги, которые вы обычно должны делать в терминале, и позволит вам сохранить ваши настройки в качестве предустановки. Удобно!

Для своих проектов я обычно выбираю следующие варианты:

  • Менеджер пакетов: Пряжа
  • Пресет: Ручной (для первого проекта)
  • Особенности: Babel, маршрутизатор, препроцессоры CSS, линтер / форматтер.
  • Режим истории: включен
  • Препроцессор: SCSS / SASS
  • Линтер / форматтер: ESLint + Prettier (Lint при сохранении)

Затем нажмите Создать проект, и ваше приложение будет создано. Теперь у вас должен быть базовый проект Vue.js. Вы можете запустить это, перейдя на вкладку задач в Vue Project Manager и нажав serve, чтобы запустить свой сайт локально.

Настройка наших стилей

Прежде всего, создайте в папке src папку с именем стили. Здесь мы будем хранить все наши SCSS для приложения. В этой папке создайте файл, который будет использоваться для ваших глобальных стилей, например. global.scss

В диспетчере проектов Vue перейдите на вкладку Плагины и нажмите кнопку Добавить плагин. Мы хотим установить плагин под названием vue-cli-plugin-style-resources-loader.

После установки он добавит файл в корень вашего проекта под названием vue.config.js.

Перейдите в vue.config.js и добавьте следующий код, заменив имя / путь таблицы стилей тем, что вы назвали свой scss-файл для своих глобальных стилей.

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "scss",
      patterns: [path.resolve(__dirname, "./src/styles/global.scss")]
    }
  }
};

Теперь все стили из global.scss будут доступны для всего проекта и внутри компонентов. Обычно моя файловая структура SCSS сначала выглядит примерно так:

У меня есть базовые стили форматированного текста в _base.scss, а переменные, типографика и т. Д. Все хранятся в соответствующих папках как частичные. Затем они импортируются в глобальную таблицу стилей следующим образом:

@import "setup/normalize.scss";
@import "setup/typography.scss";
@import "setup/variables.scss";
@import "setup/mixins.scss";

@import "basics/base.scss";
@import "basics/layout.scss";
@import "basics/links.scss";
@import "basics/buttons.scss";

У меня также есть папка в каталоге стилей для компонентов. Каждый компонент, который я создаю во Vue, будет иметь собственный партиал scss. Полезной функцией Vue.js является то, что вы можете добавлять стили в файл компонента Vue, и они могут быть ограничены, чтобы они отображались только в том случае, если этот конкретный компонент отображается на странице.

Теперь, когда мы все настроены, добавлять стили к компоненту очень просто. Вот как это будет выглядеть в моем компоненте Example.vue

<template>
  <div>
    <h1>I am a component!</h1>
  </div>
</template>

<script>
export default {
  name: Example
}
</script>

<style lang="scss" scoped>
@import "../styles/components/example.scss";
</style>

Внутри файла _example.scss у вас будет доступ ко всем переменным / типографике / миксинам и всему остальному, что вы добавили в свои глобальные стили. Вы также можете записать это внутри тега стиля, например, так, чтобы $ c-title было именем нашей глобальной переменной для цвета заголовка:

<style lang="scss" scoped>
h1 {
  color: $c-title;
}
</style>

Однако я предпочитаю хранить все стили в одном месте (папка стилей и подпапки) с именами файлов, такими же, как и сам компонент. Это упрощает поиск и работу других людей.

Это была длинная статья, поэтому, если вы дошли до нее, спасибо за чтение! Надеюсь, это хоть как-то поможет. Получайте удовольствие от своих проектов Vue и создавайте что-нибудь потрясающее!