При разработке необходимо использовать gulp или webpack.
Структура может быть различной в зависимости от проекта, но выделять
- компоненты
- стейты
- ресурсы (стили, скрипты, картинки), которые никак нельзя вынести в какой-то отдельный компонент
<template> | |
<div class="item" :class="itemClasses" :data-id="item.id"> | |
<div class="item-container"> | |
<div class="item-cover"> | |
<div class="item-cover-thumb" :style="thumbUrl"></div> | |
<div class="item-cover-mask"></div> | |
</div> | |
<div class="item-content"> | |
<div class="item-title" :class="titleClasses"> | |
<a class="item-link" :href="item.url" v-if="item.url && !fullArticle"> |
import Vue from 'vue' | |
import Vuex from 'vuex' | |
import slice from 'lodash/slice' | |
import take from 'lodash/take' | |
import flattenDeep from 'lodash/flattenDeep' | |
import each from 'lodash/each' | |
Vue.use(Vuex) | |
const URL = '/teasers' |
# Path to your oh-my-zsh installation. | |
export ZSH=$HOME/.oh-my-zsh | |
# Set name of the theme to load. | |
# Look in ~/.oh-my-zsh/themes/ | |
# Optionally, if you set this to "random", it'll load a random theme each | |
# time that oh-my-zsh is loaded. | |
ZSH_THEME="robbyrussell" |
@import "imports/variables.css"; | |
:root { | |
--Checkbox-uncheck-border-color: #979797; | |
} | |
@component Checkbox { | |
position: relative; |
{ | |
"remove-empty-rulesets": true, | |
"always-semicolon": true, | |
"block-indent": 2, | |
"color-case": "upper", | |
"color-shorthand": false, | |
"element-case": "lower", | |
"eof-newline": true, | |
"exclude": [ | |
".git/**", |
$vr-font-size: 15px !global; | |
$vr-line-height: 1.5 !global; | |
$vr-cap-height: 0.6 !global; | |
$vr-line-scale: 2 !global; | |
$vr-grid-unit: $vr-line-height * $vr-font-size / $vr-line-scale !global; // (px) | |
@function em($px: 0, $font-size: $vr-font-size) { | |
@return $px / $font-size + em; | |
} |
{ | |
"directory": "bower_components" | |
} |
// http://compass-style.org/reference/compass/helpers/sprites/ | |
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) | |
//http://compass-style.org/reference/compass/helpers/sprites/#sprite-file | |
$sprite-image: sprite-file($map, $sprite) | |
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-url | |
$sprite-map: sprite-url($map) | |
// http://compass-style.org/reference/compass/helpers/sprites/#sprite-position |