vue+vuex+eslint+typescript

安裝依賴

安裝開發依賴：

npm i -D @vue/cli-plugin-eslint @vue/eslint-config-standard @vue/eslint-config-typescript eslint eslint-loader eslint-plugin-node eslint-plugin-vue typescript ts-loader

安裝項目依賴

npm i -S vue-class-component vue-property-decorator vuex-class

在webpack中配置loader（ts-loader/eslint-loader）

rules: [
      {
        test: /\.ts(x)?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true,
          happyPackMode: false,
        },
      },
      {
        test: /\.(js|vue|ts|tsx|jsx)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: false,
          extensions: ['.js', '.jsx', '.vue', '.ts', '.tsx'],
          cache: false,
          emitWarning: true,
          emitError: false,
        },
      }
]

根目錄添加eslint配置文件 .eslintrc.js

module.exports = {
  plugins: ['vue', '@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2017,
    sourceType: 'module'
  },
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/base',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/essential',
    '@vue/standard',
    '@vue/typescript'
  ],
  rules: {
    // eslint rules
    'one-var': 0,
    'arrow-parens': 0,
    'generator-star-spacing': 0,
    'no-debugger': 0,
    'no-console': 0,
    semi: [2, 'always'],
    'no-extra-semi': 2,
    'space-before-function-paren': 0,
    eqeqeq: 0,
    'spaced-comment': 0,
    'no-useless-escape': 0,
    'no-tabs': 0,
    'no-mixed-spaces-and-tabs': 0,
    'new-cap': 0,
    camelcase: 0,
    'no-new': 0,
    indent: 'off',
    // typescript-eslint rules
    '@typescript-eslint/indent': ['error', 2],
    '@typescript-eslint/explicit-function-return-type': 0,
    '@typescript-eslint/no-explicit-any': 'off'
  }
};

根目錄添加 tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": ".",
    "types": ["webpack-env", "node"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

d.ts文件聲明

在src文件下新建shims-vue.d.ts文件，聲明.vue文件

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

vue-property-decorator 裝飾器使用

vue-property-decorator提供了裝飾器來簡化書寫，裝飾器如下：

• @Component
• @Prop
• @Watch
• @Emit
• @Inject
• @Provide
• Mixins (the helper function named mixins defined at vue-class-component)

具體用法如下：（裝飾器的後面不能加分號）

<script lang="ts">
import listChild from './listChild.vue';
import { Vue, Component, Emit, Prop, Watch } from 'vue-property-decorator';
@Component({
  components: { listChild }
})
export default class List extends Vue {
  test: string = 'test';
  @Prop({ type: string, default: '' })
  prosdata: string | undefined;
  @Emit('onemit')
  onEmit(item: any): number {
    this.dd += item;
    return item; // 返回的值會當做父組件該方法的參數
  }
  @Watch('dd')
  watchDD(val: string): void {
    console.log('watchDD', val);
  }
  mounted() {
  }
}
</script>

vuex-class 裝飾器使用

vuex-class提供了裝飾器來簡化書寫vuex

• State
• Getter
• Action
• Mutation
• namespace：當分模塊調用內部的getters,actions,mutations時，需要引入namespaces

//在state/index.ts文件中
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

interface iState {
  storeTest: string;
}
const state: iState = {
  storeTest: 'storeTest'
};
export default new Vuex.Store({
  state,
  getters: {
    storeTestGetter (state) {
      return state.storeTest + ' computed';
    }
  },
  mutations: {
    editStoreTest (state: any, value: string): void {
      state.storeTest = value;
    }
  },
  modules: {
    modA: {
      namespaced: true,
      state: {
        modulesAstate: 'modulesAstate'
      },
      mutations: {
        editModAState (s, value) {
          s.modulesAstate = value;
        }
      }
    }
  }
});


//在vue文件中
<script lang="ts">
import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
const modAState = namespace('modA', State);
const modAMutation = namespace('modA', Mutation);
@Component
export default class List extends Vue {
  @State storeTest;
  @Getter storeTestGetter;
  @Mutation editStoreTest:any;
  @modAState modulesAstate: any;
  @modAMutation('editModAState') editModAStateFn;
  mounted() {
    this.editStoreTest('sss');
    setTimeout(() => {
      this.editModAStateFn('dddddd');
    }, 3000);
  }
}
</script>