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