Use Typescript configuration steps in Vue

Use Typescript configuration steps in Vue

Through the development of various front-end frameworks, such as vue3.0, react and angular, the source code of frameworks are all written in ts (typescript), so I feel that the development trend of future medium and large projects is also inseparable from ts. Therefore, I wrote documents using vue combined with ts according to some introductory tutorials, which is suitable for getting started with configuring vue+ts projects.

1. TypeScript is introduced into the old Vue project

npm install vue-class-component vue-property-decorator --save
npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

vue-class-component : extends vue to support typescript, and supports ts in a declarative way

vue-property-decorator : Extend more decorators based on vue-class-component

ts-loader : enables webpack to recognize ts files

tslint-loader : tslint is used to constrain file encoding. It can be installed or not. It is recommended to install it, which is conducive to code standardization.

tslint-config-standard : tslint configures standard style constraints, which is also used to standardize ts code style

注: This way of installing ts is to change the Js syntax in the original vue project to Ts. For detailed steps, please refer to https://www.jb51.net/article/230703.htm. This blog does not fully display the configuration support for ts syntax in vue.config.js or lower versions of webpack.base.conf, so I modified it as follows:

// For file plugin configuration, it needs to be written in the configureWebpack object.
module.exports = {
    configureWebpack: {
        resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
        module: {
            rules:
                {
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    enforce: 'pre',
                    loader: 'tslint-loader'
                },
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    exclude: /node_modules/,
                    options:
                        appendTsSuffixTo: [/\.vue$/],
                    }
                }
            ]
        }
    }
}

Create a Vue+Typescript project from scratch

This method is relatively simple. You can create it by simply selecting Custom when creating a project with the command vue create app-name Follow the steps below:

insert image description here

insert image description here

In the second step, just select the above options. Use the space bar to select them in the terminal, and press Enter after selecting. The meanings of the options are as follows:

 (*) Babel //ES6 to ES5
 (*) TypeScript //Using ts
 ( ) Progressive Web App (PWA) Support //Progressive Web App (*) Router //Routing (*) Vuex //State Management (*) CSS Pre-processors //CSS preprocessing (*) Linter / Formatter //Specification type ( ) Unit Testing //Test ( ) E2E Testing //Test

The next step configuration details are as follows:

Use class-style component syntax? (Y/n) Do you want to use class-style component syntax? Enter Y and press Enter Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, trans
piling JSX)? (Y/n) Do you use Babel and TypeScript (modern mode, automatic detection of polygon fills, trans required (JSX) Enter Y Enter Use history mode for router? (Requires proper server setup for index fallback in product
ion) (Y/n) Do you want to use history routing mode? Enter N and press Enter. Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default) I usually choose Sass/SCSS (with node-sass)

Pick a linter / formatter config: (Use arrow keys): Select the syntax detection specification. Generally, the first one, ESLint with error prevention only, is the default. However, if you use ts, you can choose TSLint

Pick additional lint features: (Press to select, to toggle all, to invert selection) Select Check on Save / Check on Submit Generally, select the first check on save during development Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) Select where to store the configuration information, either separately or in package.json Generally, the first one is selected by default, and the plugin configuration is stored in a separate file Save this as a preset for future projects? (y/N) Do you want to save it as a preset so that you don't have to re-select it next time you create a project? Enter N and press Enter

After completing the above options, the project is built successfully, and the project directory is as follows:

insert image description here

You need to create the vue.config.js file yourself and put it in the root directory of the project.

This is the end of this article about the steps to use typescript configuration in vue. For more relevant vue typescript configuration content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • The simplest tutorial for integrating Vue with TypeScript (recommended)
  • Detailed configuration of using Typescript in Vue2 Vue-cli

<<:  A detailed discussion on detail analysis in web design

>>:  Solve the problem that the VMWare virtual machine centos time is inconsistent with the local time

Recommend

In-depth explanation of Vue multi-select list component

A Multi-Select is a UI element that lists all opt...

The iframe refresh method is more convenient

How to refresh iframe 1. To refresh, you can use j...

What kinds of MYSQL connection queries do you know?

Preface If the query information comes from multi...

CentOS 6.5 installation mysql5.7 tutorial

1. New Features MySQL 5.7 is an exciting mileston...

Detailed comparison of Ember.js and Vue.js

Table of contents Overview Why choose a framework...

Implement 24+ array methods in JavaScript by hand

Table of contents 1. Traversal Class 1. forEach 2...

In-depth analysis of the Tomcat server of Centos 7 system

Table of contents 1. The origin of tomcat 1. Tomc...

Simple example of HTML checkbox and radio style beautification

Simple example of HTML checkbox and radio style b...

MySQL slave library Seconds_Behind_Master delay summary

Table of contents MySQL slave library Seconds_Beh...

Introduction to Linux system swap space

Swap space is a common aspect of computing today,...

How to use jconsole to monitor remote Tomcat services

What is JConsole JConsole was introduced in Java ...

Summary of pitfalls in importing ova files into vmware

Source of the problem As we all know, all network...

Seven Principles of a Skilled Designer (1): Font Design

Well, you may be a design guru, or maybe that'...

Interpretation of CocosCreator source code: engine startup and main loop

Table of contents Preface preparation Go! text St...