自主搭建vue 2 + typescript 3.7 + eslint 6.0, 及起飞姿势. 附脚手架源码typescript-vue-eslint-starter


npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/experimental-utils @typescript-eslint/parser @typescript-eslint/typescript-estree eslint eslint-config-standard eslint-plugin-standard eslint-plugin-import eslint-plugin-promise eslint-loader eslint-plugin-node eslint-plugin-vue typescript ts-loader

项目依赖


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

2. Webpack loader配置 (ts-loader/eslint-loader)

完整webpack配置 [https://github.com/vok123/typescript-vue-eslint-starter/blob/master/build/webpack.config.js]

module: {
  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
      }
    }
  ];
}

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



module.exports = {
  plugins: ['vue', '@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    env: { es6: true },
    sourceType: 'module'
  },
  root: true,
  env: {
    browser: true,
    node: true,
    serviceworker: true
  },
  extends: ['plugin:vue/base', 'plugin:@typescript-eslint/recommended', 'plugin:vue/essential', 'standard'],
  rules: {
    // 设置默认eslint规则
    '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',
    semi: 'off',
    // 设置typescript-eslint规则
    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin/docs/rules
    '@typescript-eslint/semi': ['error'],
    '@typescript-eslint/indent': ['error', 2],
    '@typescript-eslint/explicit-function-return-type': 0
  }
};

4. 根目录添加 tsconfig.json


{
  "compilerOptions": {
    "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/@types/shims-vue.d.ts

声明.vue文件


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

声明组件实例属性或者方法 ( 类似 this.$route ) 来源[https://github.com/vuejs/vue-router/blob/dev/types/vue.d.ts]

declare module "vue/types/vue" {
  interface Vue {
    $message: (msg: string): void;
    $balala: string;
  }
}
// 在组件中使用
this.$balala
this.$message('Hello world');

声明new Vue自定义属性或者方法 (类似 new Vue({ router: router })) 来源[https://github.com/vuejs/vue-router/blob/dev/types/vue.d.ts]


declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    i18n: any
  }
}

// 使用
new Vue({
  i18n, ...
});

声明第三方npm包

// 声明 element-ui
declare module 'element-ui'

// 声明 axios
declare module 'axios' {
  import Axios from 'axios/index';
  export default Axios;
}

vue-property-decorator 装饰器使用

常用装饰器及方法

装饰器	用途	描述
Component	声明class组件	只要是个组件都必须加该装饰器
Prop	声明props	对应普通组件声明中的props属性
Watch	声明监听器	对应普通组件声明中的watch属性
Mixins	混入继承	对应普通组件声明中的mixins属性
Emit	子组件向父组件值传递	对应普通this.$emit()
Inject	接收祖先组件传递的值	对应普通组件声明中的inject属性
Provide	祖先组件向其所有子孙后代注入一个依赖	对应普通组件声明中的provide属性

用法

vue 钩子写法

// javascript
<script>
export default {
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  errorCaptured() {}
}
</script>

// --------typescript--------
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  beforeCreate() {}
  created() {}
  beforeMount() {}
  mounted() {}
  beforeUpdate() {}
  updated() {}
  activated() {}
  deactivated() {}
  beforeDestroy() {}
  destroyed() {}
  errorCaptured() {}
}

</script>

Component


// javascript

import helloWorld from './helloWorld.vue';
export default {
  components: {
    helloWorld
  }
}

// --------typescript--------

import helloWorld from './helloWorld.vue';
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {
    helloWorld
  }
})
export default class App extends Vue {}

Prop

// javascript
export default {
  props: {
    msg: {
      type: String,
      default: 'Hello world',
      required: true,
      validator: (val) => (val.length > 2)
    }
  }
}


// --------typescript--------

import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop({
    type: String,
    default: 'Hello world',
    required: true,
    validator: (val) => (val.length > 2)
  }) msg!: string
}

Watch

// javascript

export default {
  data() {
    return {
      value: ''
    };
  },
  watch: {
    value: {
      handler() {
        console.log(this.value);
      },
      deep: true,
      immediate: true
    }
  }
}

// --------typescript--------

import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  value: string = ''
  @Watch('value', { deep: true, immediate: true })
  valueWatch() {
    console.log(this.value);
  }
}

Mixins

// javascript

// -info.js
export default {
  methods: {
    mixinsShow() {
      console.log('徐蔡坤');
    }
  }
}

// -hello-world.vue
import mixinsInfo from './info.js';
export default {
  mixins: [mixinsInfo],
  mounted() {
    this.mixinsShow(); // 徐蔡坤
  }
}

// --------typescript--------
// -info.ts
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MixinsInfo extends Vue {
    mixinsShow() {
      console.log('徐蔡坤');
    }
}

// -hello-world.vue
import { Component, Vue, Mixins } from 'vue-property-decorator';
import mixinsInfo from './info.ts';

@Component
export default class HelloWorld extends Mixins(mixinsInfo) {
  mounted() {
    this.mixinsShow(); // 徐蔡坤
  }
}

Emit

// javascript

// -children.vue
<template>
  <button @click="$emit('submit', '唱, 跳')">提交</button>
</template>

// -parent.vue
<template>
  <children @submit="submitHandle"/>
</template>

<script lang="ts">
import children from './children.vue';
export default {
  components: {
    children
  },
  methods: {
    submitHandle(msg) {
      console.log(msg); // 唱, 跳
    }
  }
}
</script>

// --------typescript--------
// -children.vue
<template>
  <button @click="submit">提交</button>
</template>

<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator';

@Component
export default class Children extends Vue {
  @Emit()
  submit() {
    return '唱, 跳';
  }
}
</script>

// -parent.vue
<template>
  <children @submit="submitHandle"/>
</template>

<script lang="ts">
import children from './children.vue';
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {
    children
  }
})
export default class Parent extends Vue {
  submitHandle(msg: string) {
    console.log(msg); // 唱, 跳
  }
}
</script>

Provide/Inject

// javascript

// -children.vue
<script>
export default {
  inject: ['root'],
  mounted() {
    console.log(this.root.name); // rap, 篮球
  }
}
</script>

// -parent.vue

<template>
  <children />
</template>
<script>
import children from './children.vue';
export default {
  components: {
    children
  },
  data() {
    return {
      name: 'rap, 篮球'
    };
  },
  provide() {
    return {
      root: this
    };
  }
}
</script>


// --------typescript--------

// -children.vue

<script lang="ts">
import { Component, Vue, Inject } from 'vue-property-decorator';

@Component
export default class Children extends Vue {
  @Inject() root!: any
  mounted() {
    console.log(this.root.name); // rap, 篮球
  }
}
</script>

// -parent.vue

<template>
  <children />
</template>

<script lang="ts">
import children from './children.vue';
import { Component, Vue, Provide } from 'vue-property-decorator';
@Component({
  components: {
    children
  }
})
export default class Parent extends Vue {
  name: string = 'rap, 篮球'
  @Provide()
  root = this.getParent()
  getParent() {
    return this;
  }
}
</script>

计算属性

// javascript

export default {
  data() {
    return {
      hobby: '唱, 跳, rap, 篮球'
    };
  },
  computed: {
    msg() {
      return '我也会' + this.hobby;
    }
  },
  mounted() {
    console.log(this.msg); // 我也会唱, 跳, rap, 篮球
  }
}

// --------typescript--------

// -hello-world.vue
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  hobby: string = '唱, 跳, rap, 篮球'
  get msg() {
    return '我也会' + this.hobby;
  }
  mounted() {
    console.log(this.msg); // 我也会唱, 跳, rap, 篮球
  }
}

vuex-class 装饰器使用

装饰器	用途
State	获取vuex state
Getter	获取vuex getter
Mutation	获取vuex mutation
Action	获取vuex actions

vuex typescript 基础定义

// -store/store.ts

import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import user from './modules/user';

Vue.use(Vuex);
interface RootState {
  version: string;
}
const store: StoreOptions<RootState> = {
  strict: true,
  state: {
    version: '1.0.0'
  },
  modules: {
    user
  }
};

export default new Vuex.Store<RootState>(store);



// -store/modules/user.ts

import { Module } from 'vuex';
export interface UserInfo {
  uId: string;
  name: string;
  age: number;
}

interface UserState {
  userInfo: UserInfo;
}

const user: Module<UserState, any> = {
  namespaced: true,
  state: {
    userInfo: {
      uId: '',
      name: '',
      age: 0
    }
  },
  getters: {
    isLogin(state) {
      return !!state.userInfo.uId;
    }
  },
  mutations: {
    updateUserInfo(state, userInfo: UserInfo): void {
      Object.assign(state.userInfo, userInfo);
    }
  },
  actions: {
    async getUserInfo({ commit }): Promise<void> {
      let { userInfo } = await getUserInfo();
      commit('updateUserInfo', userInfo);
    }
  }
};

export default user;

vuex-class 装饰器

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { State, Getter, Action } from 'vuex-class';
import { UserInfo } from './store/modules/user';

@Component
export default class App extends Vue {
  @State('version') version!: string
  @State('userInfo', { namespace: 'user' }) userInfo!: UserInfo
  @Getter('isLogin', { namespace: 'user' }) isLogin!: boolean
  @Action('getUserInfo', { namespace: 'user' }) getUserInfo!: Function
  mounted() {
    this.getUserInfo();
    console.log(this.version); // 1.0.0
  }
}

</script>

在非vue组件的.ts中获取store数据

// test.ts

import store from './store/store';

if (store.getters['user/isLogin'] === false) {
  console.log('未登录');
}

typescript按需转换ES6 Api

默认情况下typescript在转换语法为es3或者es5时并不会转换ES6 Api, 例如(Object.values, Array.fill ...)
在这种情况下我们可以使用 (ts-polyfill) [https://github.com/ryanelian/ts-polyfill] 定向指定需要转换的api

最后编辑于：2019.12.06 14:25:20

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,324评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,303评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,192评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,555评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,569评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,566评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,927评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,583评论 0赞 257
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,827评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,590评论 2赞 320
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,669评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,365评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,941评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,928评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,159评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,880评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,399评论 2赞 342

自主搭建vue 2 + typescript 3.7 + eslint 6.0, 及起飞姿势. 附脚手架源码typescript-vue-eslint-starter

自主搭建vue 2 + typescript 3.7 + eslint 6.0, 及起飞姿势. 附脚手架源码typescript-vue-eslint-starter

目录

脚手架搭建

1. 安装依赖

2. Webpack loader配置 (ts-loader/eslint-loader)

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

4. 根目录添加 tsconfig.json

d.ts文件声明

src/@types/shims-vue.d.ts

vue-property-decorator 装饰器使用

vuex-class 装饰器使用

typescript按需转换ES6 Api

推荐阅读更多精彩内容