Я никогда не осознавал, что потерял часть своей страсти к разработке, пока не появился 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 и создавайте что-нибудь потрясающее!