@font-face {
font-family: 'Geometria';
src: local('Geometria Thin'), local('Geometria-Thin'),
url('~@/assets/fonts/geometria/Geometria-Thin.woff2') format('woff2'),
url('~@/assets/fonts/geometria/Geometria-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
}
import '@/styles/main.scss';
import Vue from 'vue';
//...
@import "base/normalize";
@import "base/init";
@import "base/typography";
@import "base/code";
@import "base/links";
@import "base/tables";
@import "base/buttons";
@import "base/control-group";
@import "base/general-form";
@import "parts/transitions";
...
$NODE_ENV: development;
@import "cfg-vars";
$NODE_ENV: production;
@import "cfg-vars";
$DEV_MODE: $NODE_ENV == development;
$MAX_INT32: 2147483647;
@import "cfg-vrhythm";
@import "cfg-grid";
@import "../../../node_modules/vrhythm/source/vrhythm";
@import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../mixins";
@import "cfg-z-indexes";
$wt-family-base: "Open Sans", sans-serif;
$wt-family-head: "Roboto Slab", serif;
$font-family-monospace: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
//==
//== Color palette
//== ======================================= ==//
$palette-light-blue: #3c8dbc; // Primary
$palette-red : #dd4b39; // Danger
$palette-green : #00a65a; // Success
$palette-aqua : #00c0ef; // Info
$palette-yellow : #f39c12; // Warning
...
const NODE_ENV = process.env.NODE_ENV === 'development'
? 'development'
: 'production';
//...
module.exports = {
//...
css: {
extract: NODE_ENV === 'production',
loaderOptions: {
sass: {
data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
},
},
},
};
{
...
chainWebpack: config => {
config.plugins.delete('prefetch');
config.plugins.delete('preload');
},
...
}
.browserlistrc
.For browser- or Electron-based projects, we recommend using a .browserslistrc file to specify targets. You may already have this configuration file as it is used by many tools in the ecosystem, like autoprefixer, stylelint, eslint-plugin-compat and many others.
script
сам vue.js и дист-сборку плагина https://github.com/phegman/v-show-slide/blob/maste..."use strict";var _createClass=function(){function e(e,i){for(var t=0;t<i.length;t++){var n=i[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(i,t,n){return t&&e(i.prototype,t),n&&e(i,n),i}}();function _classCallCheck(e,i){if(!(e instanceof i))throw new TypeError("Cannot call a class as a function")}var VShowSlide=function(){function e(){_classCallCheck(this,e),this.easingOptions={builtIn:["linear","ease","ease-in","ease-out","ease-in-out"],custom:{}}}return _createClass(e,[{key:"install",value:function(e,i){this.validateOptions(i),e.directive("show-slide",{bind:this.bind.bind(this),inserted:this.inserted.bind(this),componentUpdated:this.componentUpdated.bind(this)})}},{key:"bind",value:function(e,i){this.parseArgs(e,i)}},{key:"inserted",value:function(e,i){this.initializeTarget(e,i.value)}},{key:"componentUpdated",value:function(e,i){this.toggleSlide(e,i)}},{key:"validateOptions",value:function(e){void 0!==e&&e.hasOwnProperty("customEasing")&&(this.easingOptions.custom=e.customEasing)}},{key:"kebabToCamel",value:function(e){return e.replace(/-([a-z])/g,function(e){return e[1].toUpperCase()})}},{key:"parseArgs",value:function(e,i){if(i.hasOwnProperty("arg")){var t=i.arg.split(":");this.validateEasing(e,t),this.validateDuration(e,t)}else e.duration=300,e.durationInSeconds="0.3s",e.easing="ease"}},{key:"validateEasing",value:function(e,i){i.hasOwnProperty(1)?this.easingOptions.builtIn.includes(i[1])?e.easing=i[1]:this.easingOptions.custom.hasOwnProperty(this.kebabToCamel(i[1]))?e.easing=this.easingOptions.custom[this.kebabToCamel(i[1])]:e.easing="ease":e.easing="ease"}},{key:"validateDuration",value:function(e,i){e.duration=i.hasOwnProperty(0)?parseInt(i[0]):300,e.durationInSeconds=e.duration/1e3+"s"}},{key:"initializeTarget",value:function(e,i){i||(e.style.height="0px"),e.style.overflow="hidden",e.style.transition="height "+e.easing+" "+e.durationInSeconds}},{key:"toggleSlide",value:function(e,i){i.value!==i.oldValue&&(i.value?this.slideOpen(e):this.slideClosed(e))}},{key:"slideOpen",value:function(e){e.isAnimating&&clearTimeout(e.timeout),e.isAnimating=!0;var i=e.scrollHeight;e.style.height=i+"px",e.timeout=setTimeout(function(){e.style.height="auto",e.isAnimating=!1},e.duration)}},{key:"slideClosed",value:function(e){e.isAnimating&&clearTimeout(e.timeout),e.isAnimating=!0;var i=e.scrollHeight;e.style.height=i+"px",setTimeout(function(){e.style.height="0px"},25),e.timeout=setTimeout(function(){e.isAnimating=!1},e.duration)}}]),e}(),vShowSlide=new VShowSlide;
Vue.use(vShowSlide, {
customEasing: {
exampleEasing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
}
});
<v-tabs v-model="active">
<v-tab v-for="n in 3" :key="n">Item {{ n }}</v-tab>
<v-tab-item v-for="n in 3" :key="n">
Любое содержимое
</v-tab-item>
</v-tabs>
data: function(){
return {
tabList: [
{caption: 'Вкладка 1', content: '<h1>Содержимое первой вкладки</h1>'},
{caption: 'Вкладка 2', content: '<h1>Содержимое второй вкладки</h1>'},
{caption: 'Вкладка 3', content: '<h1>Содержимое третьей вкладки</h1>'},
]
}
}
<v-tab v-for="(tab, index) in tabList" :key="index">Item {{ tab.caption }}</v-tab>
<v-tab-item v-for="(tab, index) in tabList" :key="index">
<div v-html="tab.content"></div>
</v-tab-item>
<v-tab :key="1">Tab 1</v-tab>
<v-tab :key="2">Tab 2</v-tab>
<v-tab-item :key="1">Содержимое вкладки 1</v-tab-item>
<v-tab-item :key="2">Содержимое вкладки 2</v-tab-item>
if(this.type == 'password') this.type = 'text'
else this.type = 'password'
Соответственно первая загрузка была долгой, так как грузила скрипты и стили всех страниц.
<script type="text/javascript">
window.__STATE__ = <?= json_encode($allData) ?>;
</script>
created () {
if (window.__STATE__ && window.__STATE__.myData) {
this.myData = window.__STATE__.myData;
} else {
axios.get( .... )
}
}