vue + element-ui + vuex + typescript 构建后台管理系统

最近公司的项目使用了typescript 用的不是特别熟练 特此准备重头开始 搭建一个纯前端 管理系统页面 后续会将jsx 也集成进来

使用vue-cli 搭建

npm install vue-cli 安装vue脚手架
npm install cnpmnpm 安装依赖包 实在是太慢了

vue init webpack vue-admin-master
? Project name vue-admin-master
? Project description vue-admin
? Author sun
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

然后cnpm install
npm run dev

一个简单vue项目搭建成功

引入typescript

ts-loader typescript 必须安装

npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

安装vue的官方插件

npm install vue-class-component vue-property-decorator --save

• vue-class-component：使用 TypeScript/装饰器 增强 Vue 组件
• vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器
• ts-loader：让webpack 可以识别.ts文件
• .tsx文件 tslint-loader跟tslint：eslint 跟 tslint 作用基本一样
• tslint-config-standard：tslint 配置 standard风格的约束

配置 webpack

 ./build/webpack.base.conf.js 对ts 进行配置 

将main.js 改成main.ts
babel-polyfill 是对ie浏览器做的兼容

entry: {
    // app: './src/main.js'
    app: ["babel-polyfill", "./src/main.ts"]
  },

resolve: {
    extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

找到module.rules 添加webpack对.ts的解析

//为module添加.ts/.tsx解析规则
     {
       test: /\.ts$/,
       exclude: /node_modules/,
       enforce: 'pre',
       loader: 'tslint-loader'
     },
     {
       test: /\.tsx?$/,
       loader: 'ts-loader',
       exclude: /node_modules/,
       options: {
         appendTsSuffixTo: [/\.vue$/],
       }
     },

添加tsconfig.json

在项目下 添加 tsconfig.json
ts-loader 会检索当前目录下的 tsconfig.json 文件，根据里面定义的规则来解析.ts文件

{
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["*", "src/*"]
    },
    "jsx": "preserve",
    "jsxFactory": "h",
    // 启用 vue-class-component 及 vuex-class 需要开启此选项
    "experimentalDecorators": true,
    // 启用 vuex-class 需要开启此选项
    "strictFunctionTypes": false
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "module": "esnext",
    "target": "es5",
    "moduleResolution": "node",
    "isolatedModules": true,
    "lib": [
      "dom",
      "es5",
      "es6",
      "es7",
      "es2015.promise"
    ],
    "sourceMap": true,
    "pretty": true
  }
}

添加 tslint.json

在项目下 添加 tslint.json
tslint-loader 作用等同于 eslint-loader

{
  "extends": [
    "tslint-eslint-rules"
  ],
  "rulesDirectory": [],
  "rules": {
    "adjacent-overload-signatures": false,
    "ban-comma-operator": true,
    "ban-type": [true, ["object","User {} instead."],["string"]],
    "no-any": false,
    "no-empty-interface":true,
    "no-internal-module": true,
    "no-magic-numbers": false,
    "no-namespace": [ true,"allpw-declarations"],
    "no-non-null-assertion": true ,
    "no-parameter-reassignment": true,
    "no-reference": true,
    "no-unnecessary-type-assertion": false,
    "no-var-requires": false,
    "prefer-for-of":true,
    "promise-function-async": false,
    "typedef": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "typedef-whitespace": true,
    "unified-signatures": true,
    "await-promise": false,
    "ban": [
      true,
      "eval",
      {"name": "$", "message": "please don't"},
      ["describe", "only"],
      {"name": ["it", "only"], "message": "don't focus tests"},
      {
        "name": ["chai", "assert", "equal"],
        "message": "Use 'strictEqual' instead."
      },
      {"name": ["*", "forEach"], "message": "Use a regular for loop instead."}
    ],
    "curly": true,
    "forin":true,
    "import-blacklist":true,
    "label-postion": true,
    "no-arg":true,
    "no-bitwise":true,
    "no-conditional-assignmen": true,
    "no-console": false,
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-super": true,
    "no-empty":true,
    "no-eval": true,
    "no-floating-promises": false,
    "no-for-in-array": false,
    "no-implicit-dependencies": false,
    "no-inferred-empty-object-type": false,
    "no-invalid-template-strings":  true,
    "no-invalid-this": true,
    "no-misused-new": true,
    "no-null-keyword": false,
    "no-object-literal-type-assertion": false,
    "arrow-parens":  false
  },
  "ecmaFeatures": {
    "objectLiteralShorthandProperties": true
  }
}

.vue文件改造

ts 对 .vue 文件 并不能支持 需要在src 下边引用 vue-shim.d.ts 这样才能做到相应的语法检查和智能提示，我们自己编写的.d.ts文件直接放在项目的目录下，ts自己会去识别

import Vue from 'vue'
//识别.vue文件
declare module "*.vue" {
  export default Vue;
}
//element ui 组件
declare module 'vue/types/vue' {
  interface Vue {
    $Message: any,
    $Modal: any,
  }
}

vue-class-component

初始数据可以直接声明为实例的属性，而不需放入data() {return{}}中

vue-property-decorator

vue-property-decorator 是在 vue-class-component 上增强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器：

@Emit
@Inject
@Model
@Prop
@Provide
@Watch
@Component (从 vue-class-component 继承)

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component
export class App extends Vue {
  
  @Prop()
  a: number = 1

  @Prop({ default: 'default value' })
  b: string

  @Prop([String, Boolean])
  c: string | boolean

  @Prop({ type: null })
  d: any

  @Watch('watch')
  onWatch(val: string, oldVal: string) { }
}

等价于

export default {
  props: {
    checked: Boolean,
    a: Number,
    b: {
      type: String,
      default: 'default value'
    },
    c: [String, Boolean],
    d: { type: null }
  }
  methods: {
    onWatch(val, oldVal) { }
  },
  watch: {
    'watch': {
      handler: 'onWatch',
      immediate: false,
      deep: false
    }
  }
}

未完待续