Catalogue of 0.

Get an in-depth understanding of the Typescript(I) -ES syntax class properties and decorators in Vue Get a deeper understanding of Typescript in Vue (3)-vue2 projects

1. An overview of the

Instead of using Typescript through vuE-class-Component and vue-property-decorator, Vue3 uses a simpler way to combine Typescript with Typescript. Here we take a closer look at Typescript(III)-v in Vue The UE2 project uses Typescript and implements it through Vue3 so you can get a sense of how Typescript flows in Vue3

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: 3.0.0
  • 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 3.x version

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

Type n without using 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 Project Introduction Main.ts

Page path: SRC/app.vue

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')
Copy the code

3.4 Page root component app.vue

Page path: SRC/app.vue

<template>
  <router-view/>
</template>
Copy the code

3.5 Route Configuration File

Path: SRC /router/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } 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'

const routes: Array<RouteRecordRaw> = [
  {
    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 = createRouter({
  history: createWebHashHistory(),
  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 { defineComponent } from "vue";
export default defineComponent({

})
</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 { defineComponent } from "vue";
export default defineComponent({

})
</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 router from '@/router'
import { defineComponent,ref } from "vue";
export default defineComponent({
    setup(){
        const userlist = ref([
            { id: 1.name: 'Joe'.age: 10 },
            { id: 2.name: 'bill'.age: 20 },
            { id: 3.name: 'Cathy'.age: 30 },
            { id: 4.name: 'Daisy'.age: 40}])function goDetail (id: number) {
            router.push('/userinfo/' + id)
        }
        return {
            userlist,
            goDetail
        }
    }
})
</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 { defineComponent } from "vue";
import router from '@/router'
export default defineComponent({
    props: {
        id: {type: Number}},setup(props){
        function goback () {
            router.go(-1)}return {
            goback
        }
    }
})
</script>
Copy the code

4. Conclusion

Compared with Typescript in Vue2, Typescript in Vue3 has the following features:

  • In combination withTypesriptIt’s much easier, no learning requiredvue-class-componentandvue-property-decorator, and useCommon variableswithfunctionIs a natural fit for Typescript type checking
  • Path module, route configuration unchanged, but use new function
  • Vue components need to be learnedModular ApiLearn how to define variables and evaluate properties using new functions

Overall, Vue3’s improvements make it easier to integrate with Typescript, making it more suitable for large VUE projects