Catalogue of 0.

Get an in-depth understanding of the Typescript(I) -ES syntax class properties and decorators in Vue Understand Typescript in Vue (3)- Use Typescript in the vue2 project

1. An overview of the

After learning about class definitions and the VUe-class-Component project and Typescript syntax in ES, let’s get a taste of working with Typescript in vue projects by creating a vue-CLI project

2. The preface

2.1 Effects to be done

  • User list page

  • User Details page

  • Permission list page

2.2 Version of the tool or package used this time

  • @ vue/cli: 4.5.8
  • Vue: 2.6.11
  • Vue – class – component: 7.2.3
  • Vue – property – the decorator: 8.4.2
  • Vue – the router: 3.2.0
  • Typescript: 3.9.3

Step 4.

3.1 Creating a Project using vue-CLI

vue create hello-ts
Copy the code
Vue CLI v4.5.8? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) > Manually select featuresCopy the code

Manually: user-defined Select feature configuration. After the selection is complete, the package is installed

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
>(*) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing  
Copy the code

The options are as follows: Choose Vue version: selects the Vue version. TypeScript: TypeScript language Writes Vue items. Babel: converts ES6 to ES5

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview) 
Copy the code

Select Vue 2.x

? Use class-style component syntax? (Y/n) y  
Copy the code

Type y to use class-style component syntax

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) y 
Copy the code

Type y, using Babel with TypeScript for auto-detected padding

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
Copy the code

Enter n to use the hash routing mode

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated) 
Copy the code

Select the standard configuration of ESLint

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
Copy the code

Validates JS and TS while saving the file

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json  
Copy the code

Save Babel and ESLint configurations as separate files

? Save this as a preset for future projects? (y/N) n
Copy the code

Type n to not save as a preset

3.2 VSCode installs ESLint extensions and configurations

Add the hello-ts project to the root path of vscode and install the eslint extension for vscode

Keyboard down,’ CTRL + Shift + P ‘, type ‘setting.json’, click ‘Preference: Open Settings’

Add configuration:

{
    // esLint extends automatic repair of saves
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    // Validate reservation, default ["javascript", "javascriptreact"], append "typescript"
    "eslint.validate": [
        "javascript"."javascriptreact"."typescript"]}Copy the code

3.3 typescript describes file addition

To enable typescript to detect the type of the variable this belongs to in Vue components, create a file named vue-shims.d.ts under SRC

import VueRouter from 'vue-router'
import {Route} from 'vue-router'  
declare module 'vue/types/vue' {
    export interface Vue {
        $router: VueRouter,
        $route: Route
    }
}
Copy the code

3.4 Page root component app.vue

Page path: SRC/app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
Copy the code

3.5 Route Configuration File

Page path: SRC /router/index.js

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '.. /components/Home.vue'
import Users from '.. /components/Users.vue'
import Right from '.. /components/Right.vue'
import UserInfo from '.. /components/UserInfo.vue'
Vue.use(VueRouter)
RouteConfig {routes} RouteConfig {routes} RouteConfig {routes} RouteConfig
const routes: Array<RouteConfig> = [
  {
    path: '/'.name: 'Home'.component: Home,
    redirect: '/users'.children: [{path: '/users'.component: Users },
      { path: '/rights'.component: Right },
      { path: '/userinfo/:id'.component: UserInfo, props: true}}]]const router = new VueRouter({
  routes
})

export default router
Copy the code

3.6 Home components

Page path: SRC /components/ home.vue

<template>
  <div>
    <! -- Header area -->
    <header class="header">Background management system</header>
    <! -- Middle main area -->
    <div class="main">
      <! -- Left menu bar -->
      <div class="content left">
        <ul>
          <li><router-link to="/users">User management</router-link></li>
          <li><router-link to="/rights">Rights management</router-link></li>
        </ul>
      </div>
      <! -- Right content area -->
      <div class="content right">
        <div class="main-content"><router-view /></div>
      </div>
    </div>
  </div>
</template>

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

@Component
export default class Home extends Vue {}
</script>

<style>
html.body.#app {
  margin: 0;
  padding: 0px;
  height: 100%;
}
.header {
  height: 50px;
  background-color: #545c64;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  color: #fff;
}
.footer {
  height: 40px;
  line-height: 40px;
  background-color: # 888;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
}
.main {
  display: flex;
  position: absolute;
  top: 50px;
  bottom: 0px;
  width: 100%;
}
.content {
  flex: 1;
  text-align: center;
  height: 100%;
}
.left {
  flex: 0 0 20%;
  background-color: #545c64;
}
.left a {
  color: white;
  text-decoration: none;
}
.right {
  margin: 5px;
}
.btns {
  width: 100%;
  height: 35px;
  line-height: 35px;
  background-color: #f5f5f5;
  text-align: left;
  padding-left: 10px;
  box-sizing: border-box;
}
button {
  height: 30px;
  background-color: #ecf5ff;
  border: 1px solid lightskyblue;
  font-size: 12px;
  padding: 0 20px;
}
.main-content {
  margin-top: 10px;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  height: 45px;
  line-height: 45px;
  background-color: #a0a0a0;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td.th {
  border: 1px solid #eee;
  line-height: 35px;
  font-size: 12px;
}

th {
  background-color: #ddd;
}
</style>
Copy the code

3.7 Right component

Page path: SRC/components/Right vue

<template>
    <div>
        <h3>Rights Management area</h3>
    </div>
</template>

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

@Component
export default class Right extends Vue {}</script>
Copy the code

3.8 the Users component

Page path: SRC/components/Users. Vue

<template>
    <div>
        <h3>User Management area</h3>
        <table>
            <thead>
            <tr><th>Serial number</th><th>The name</th><th>age</th><th>operation</th></tr>
            </thead>
            <tbody>
            <tr v-for="item in userlist" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                <a href="javascript:;"  @click="goDetail(item.id)">details</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component
export default class Users extends Vue {
    userlist = [
      { id: 1.name: 'Joe'.age: 10 },
      { id: 2.name: 'bill'.age: 20 },
      { id: 3.name: 'Cathy'.age: 30 },
      { id: 4.name: 'Daisy'.age: 40 }
    ]

    goDetail (id: number) {
      this.$router.push('/userinfo/' + id)
    }
}
</script>
Copy the code

3.9 the UserInfo components

Page path: SRC/components/Users. Vue

<template>
  <div>
    <h5>User details page -- User Id: {{Id}}</h5>
    <button @click="goback()">back</button>
  </div>
</template>

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

@Component
export default class UsersInfo extends Vue { @Prop() id! : number goback () {this.$router.go(-1)}}</script>
Copy the code