How i like to setup my vue projects

setting_up_vue_projects.md

update vue-cli

  vue-cli update -g

create project

  vue init webpack my-project

install additions

  npm install vuex node-sass sass-loader sass-resources-loader vue-awesome axios
  npm install node-sass@https://github.com/sass/node-sass/tarball/v5 --save-dev
  # until node-sass fixes hoek problem

---

configure files

.eslintrc.js

prefer 1 indent within script tags

  rules: {
    ...
    // allow 1 tab indent within script and switch case statements
    'indent': 'off',
    'vue/script-indent': ['warn', 2, { 'baseIndent': 1, 'switchCase': 1 }],
    // warn/error for all console.logs
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    // Suggest to use const when the vars aren't reassigned
    'prefer-const':  ['error', { destructuring: 'all', ignoreReadBeforeAssign: false }],
  }

add folders and files

new + file/folder

  src/
    assets/
    ├── + styles/
    │   └── + scss
    │       ├── + _reset.scss
    │       ├── + _setup.scss
    │       ├── + _vars.scss
    │       └── + index.scss
    ├── + images/
    └── + fonts/
    + pages/
    └── + Home.vue
    + utils/
    └── + index/
    + store/
    ├── + modules/
    │   └── + ui.js
    ├── + actions.js
    ├── + getters.js
    ├── + mutations.js
    ├── + state.js    
    └── + index.js

build/utils.js

register global scss file for access in components

  ...
  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
  ...
  scss: generateLoaders('sass')
    .concat({
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, '../src/assets/styles/scss/_vars.scss')
      }
    }),
    ...
  }