Additional configuration info and files to set up a Vue CLI project as per my tastes
Custom rules:
'brace-style': 0,
'comma-dangle': 0,
'no-multi-spaces': 0,
'no-multiple-empty-lines': 0,
'padded-blocks': 0,
'space-in-parens': 0,
'space-before-function-paren': 0,
'template-curly-spacing': 0
Paste into .eslintrc
-
Normalize
yarn add normalize.css
-
import in
main.js
:
import 'normalize.css'
- copy
src/styles
into new project scaffold - Add foundation imports in
App.vue
:
@import '@/styles/reset.scss';
@import '@/styles/fontface.scss';
@import '@/styles/scrollbar.scss';
- Import core in any component that requires scss tooling
@import '@/styles/core.scss';
- If using Three.js:
yarn add three
- If using GLSL files:
yarn add raw-loader glslify-loader
and add these loader tests in/vue.config.js
:
module.exports = {
chainWebpack: config => {
config.module.rule('glsl').test( /\.(glsl|frag|vert)$/ ).use( 'raw-loader' ).loader( 'raw-loader' ).end()
config.module.rule('glsl').test( /\.(glsl|frag|vert)$/ ).use( 'glslify-loader' ).loader( 'glslify-loader' ).end()
}
}
-
Lodash.defaultsDeep
yarn add lodash.defaultsdeep
-
To remove hot reloading, add to
vue.config.js
:
module.exports = {
chainWebpack: config => {
config.module.rule( 'vue' ).use( 'vue-loader' ).loader( 'vue-loader' ).tap( options => {
options.hotReload = false; return options
} )
}
}