Vue Cookbook

Installation

1
sudo npm install -g @vue/cli-init

Create a new project

1
2
3
4
5
6
7
vue init webpack <project-name> or
vue create <project-name>
cd  <project-name>

npm install --save vuex
npm install --save bootstrap font-awesome
npm install --save axios vue-axios

  • Build with base-href

    Make a vue.config.js in the application root.

    1
    2
    3
    4
    5
      module.exports = {
      baseUrl: process.env.NODE_ENV === 'production'
        ? '/<your-base-href>/'
        : '/'
    }

Configure deploy setting for gh-pages

1
npm i angular-cli-ghpages --save-dev
1
2
3
4
"scripts": {
  ...
  "deploy": "npx ngh --no-silent"
}

How to watch, observe state values

  • use watch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default() {

  computed: {
    count() {
      return this.$store.gettters.count;
    }
  },

  watch: {
    count(newCount, oldCount) {
      this.count = newCount;
    }
  },

}
  • use mapGetters
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import { mapGetters } from 'vuex';

export default {
  computed: {
      ...mapGetters({
        count: 'getCount'
      })
  }
}

// store

const getters = {
  getCount: state => state.xxxx.length,
}

Remove #bang on URL

Add router opotions { mode: ‘history’}

1
2
3
4
5
6
7
8
export default new Router({
  mode: 'history',
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }]
})

ESlint for vscode

1
2
3
4
5
6
7
8
9
10
11
12
13
"editor.formatOnSave": false,
"javascript.format.enable": false,
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
"eslint.options": {
  "extensions": [ ".html", ".js", ".vue", ".jsx" ]
},
"eslint.validate": [
  { "language": "html", "autoFix": true },
  { "language": "vue", "autoFix": true },
  { "language": "javascript", "autoFix": true },
  { "language": "javascriptreact", "autoFix": true }
]