Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the configuration steps for using typescript in vue". The explanation in this article is simple and clear and easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the configuration steps for using typescript in vue".

1. Vue old project introduces TypeScripenpm install vue-class-component vue-property-decorator-- savenpm install ts-loader typescript tslint tslint-loader tslint-config-standard-- save-dev.

Vue-class-component: extend vue to support typescript, and declare the original vue syntax to support ts

Vue-property-decorator: extending more decorators based on vue-class-component

Ts-loader: enable webpack to recognize ts files

Tslint-loader:tslint is used to constrain file encoding, but it can be installed or not. It is recommended to install it, which is beneficial to the code specification.

Tslint-config-standard: tslint configures standard-style constraints, which are also used to regulate ts code style

Note: the purpose of installing ts in this way is to change the Js syntax in the original vue project to Ts. For detailed steps, please see https://www.yisu.com/article/230703.htm. The syntax of supporting ts in vue.config.js or lower versions of webpack.base.conf is not fully displayed in this blog, so I modify it as follows:

/ / for the file plug-in configuration, you need to write it in the object configureWebpack. 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, as long as you select customization when you create a project with the command vue create app-name, as follows:

In the second step, just select the above items, use the spacebar to select them in the terminal, and press enter after the selection. The meaning of the selection is as follows:

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

The configuration details for the next step are as follows:

Use class-style component syntax? Do you use class-style component syntax to enter Y enter Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Do you use Babel and TypeScript (modern mode, automatic detection of polygon filling, JSX required by trans) to enter Y enter Use history mode for router? (Requires proper server setup for index fallback in production) (Yapin) whether to use history route pattern to enter N enter Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default) to choose preprocessor mode I often choose Sass/SCSS (with node-sass) Pick a linter / formatter config: (Use arrow keys): select syntax detection specification generally default to the first ESLint with error prevention only But using ts, you can choose TSLintPick additional lint features: (Press to select, to toggle all, to invert selection) check on save / check on submission. Check on general development. Select the first one to check Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? on save. (Use arrow keys) choose the location where the configuration information can be stored separately or incorporated into package.json. Generally speaking, the first one is chosen by default. The plug-in configuration is stored separately in a file called Save this as a preset for future projects? Whether to save it as a preset, so that you do not have to re-select enter N next time you create a project.

After the above options are completed, the project is successfully built. The project directory is as follows:

The vue.config.js file needs to be created by yourself and can be placed in the project root directory.

Thank you for your reading, the above is the content of "what are the configuration steps of using typescript in vue". After the study of this article, I believe you have a deeper understanding of what the configuration steps of using typescript in vue are, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.