A vue +vuex + typescript project code rewrite (SSR + PWA +vuex-class)

npm install typescript ts-loader --save-devCopy the code

resolve: {
   extensions: ['.js'.'.vue'.'.json'.'.ts'], // Add. Ts file parsing, if using TSX, add italias: {
      'vue$': 'vue/dist/vue.esm.js'.The '@': resolve('src'),}},Copy the code

 module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },Copy the code

const createLintingRule = () => ({
  test: / \. (js | vue | | ts TSX) $/, / / configured ts, TSX grammar testing support loader:'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'), emitWarning: ! config.dev.showEslintErrorsInOverlay } })Copy the code

entry: {
   app: './src/main.js'.ts},Copy the code

// tsconfig.json {// The file to compile"include": [
      "src/**/*"], // The compiled files need to be ignored"exclude": [
      "node_modules"], // compiler"compilerOptions": {// Contains a list of types that declare file paths"typeRoots": [
        "node_modules/@types"], // Parse in strict mode"strict": true// Allow default imports from modules that do not have default exports set"allowSyntheticDefaultImports": true// Enable the decorator"experimentalDecorators": true// Disable bidirectional covariant checking for function arguments."strictFunctionTypes": false// Allows javascript files to be compiled"allowJs": true, // The adopted module system"module": "esnext", // Compile the output target ES version"target": "es5"// How to handle modules"moduleResolution": "node"// There is an error with an implied any type on expressions and declarations"noImplicitAny": true, // A list of library files that need to be imported during compilation."lib": [
        "dom"."es5"."es6"."es7"."es2015.promise"]."sourceMap": true, // Style errors and messages, using colors and context."pretty": true}}Copy the code

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

<template>
  <div class="hello">
    <form id="loginFrom" method="get" action="#" @submit.prevent>
      <div class="input" id="nkdiv">... <div id="login-btn">
        <my-button 
          :disabled="button.disabled" 
          :value="button.value" 
          :btnStyle="button.btnStyle" 
          @click.native="login"
        />
      </div>
      <router-link to="/reset"><span class="button"> Forget your password? </span></router-link> <router-link to="/register"><span class="button" id="register-btn"> Register new users </span></router-link> </form> </div> </template> <script lang='ts'>
import { Vue, Component } from "vue-property-decorator"; /** * Here is a plugin for vuex-class. It does not support the use of class classes to write vuex. It simply supports TS. * https://github.com/ktsn/vuex-class * so I made a simple packaging, let vuex have inherited property, but in its lot below I really big write vuex - class. Js, is the * support class way, You are welcome to check it out. https://github.com/lzxb/vuex-class.js * / / / here is a decorator, corresponding vuex inside that several map... Import {Action, Mutation, Getter, namespace} from'vuex-class';
import { Toast } from '.. /common/comjs'; // The login Module is connected. const loginModule = namespace('login'); @Component({ components: {// write the component you are referencing here}, /* Since vue-property-decorator does not allow new attributes to be added, the same attributes as data,methods, etc., are valid only in this decoratorexportClass this has this property, but does not get */})exportDefault class login extends Vue {// the default class login extends Vue {// the default class login extends Vue$isEmpty@loginmodule.mutation ('$isEmpty') $isEmpty: any;
    @loginModule.Getter('_isEmpty') isEmpty: any;
    @loginModule.Action('userLogin') userLogin: any;
    @loginModule.Mutation('$assignParams') $assignParams :any;
    @loginModule.Getter('_res') res: any;

    nickname: string = ' ';
    password: string = ' ';

    button: MyButton.Button<MyButton.BtnStyle> = {
        disabled: false,
        value: 'login',
        btnStyle: {
          width: '7.75 rem',
          height: '1.175 rem',
          fontSize: '0.5 rem'}}created () {
        if(! this.$route.query.nickname) return;
        this.nickname = this.$route.query.nickname
    }

    async login () {
        let params = {
            nickname: this.nickname,
            password: this.password
        }
        this.$isEmpty(params);
        if (this.isEmpty) return Toast(' '.'Username and password cannot be empty');
        this.$assignParams(params);
        this.button.disabled = true;
        await this.userLogin();
        setTimeout(() => {
            this.button.disabled = false;
        }, 1000);
        if (this.res.data.token) {
            ...
        } 
        Toast(' ', this.res.data); }}Copy the code

class View extends BaseLoaderData<ChatRoom.View.RequestParams, string> {
	readonly namespaced: boolean = true;
	public readonly state: ChatRoom.View.State = {
		params: {
			id: ' '
		},
		res: { code: 0, data: ' ' },
		requestStatus: 'unrequest'
	};
	async saveView(): Promise<this> {
		this.$RequestStart(a); const res = await this.api.saveView(this.state.params); this.$RequestSuccess(res);
		return this;
	}
}
class ChatRoom extends VuexClass {
	readonly namespaced: boolean = true;
	articList: ArticList;
	view: View;
	modules: {
		articList: ArticList;
		view: View;
	};
	constructor() { super(new chatroom()); this.articList = new ArticList(); this.view = new View(new chatroom()); this.modules = { articList: this.articList, view: this.view }; }}export default ChatRoom;Copy the code