The background,

The React and Vue communities are increasingly using TypeScript, and TS makes code more readable and maintainable. From the official release of Vue3, the source code for Vue3 is written in TS, and better TypeScript support is also a highlight of the upgrade. Of course, in the actual development, how to correctly embrace TS and how to migrate to Vue3 are also the problems we have to face in the project. Here we have made a separate series for Vue3 and TS to communicate with you. This is the first part of the Vue3 + TS project series “Building Vue3 Project from 0 to 1”.

The rest of the series is as follows:

  • Vue3 + TS Project Series The first vuE3 Project from 0 to 1 Construction
  • TypeScript Syntax Summary part 2 of the VUE3 + TS Project Series
  • Vue3 + TS Project Series part 3 “VuE3 Composite API and Important Attribute Changes”

2. Official Quickstart introduction

Preparation: vue3

Quickstart, the official repository, recommends building our SPA project in two ways:

  • vite
  • vue-cli

1.vite

Vite sample

npm init vite-app vue3-ts
Copy the code

Json dependencies include TypeScript, vuex, vuue-Router, less, and sass.

Vite’s lightweight, out-of-the-box features meet the needs of most development scenarios and are perfect for quickly launching local Vue projects.

2,vue-cli

Official documentation vue-CLI

Vue-cli emphasizes interactive configuration through THE CLI, which makes the selection more flexible and controllable: rich official plug-in adaptation, GUI creation and management interface, and standardized development process.

Vue – cli example

npm install -g @vue/cli
vue create vue3-ts
Copy the code

Iii. Project construction

This project uses VUE-CLI to build

1, install,

NPM install -g@vue /cli // Check the version. Success vue --versionCopy the code

2. Create projects

You can also choose to create and manage projects with a graphical interface using vue UI commands

Vue create vue3-ts create and select custom templates, plug-ins, etcCopy the code

You can choose the default Settings or manually select features (select manual features here).

The default Settings

The default Settings are great for quickly prototyping a new project, while manual Settings provide more options that are more desirable for production-oriented projects

3, into thevue3-ts, install dependencies

  • ts
  • vuex
  • vue-router
  • vue3-lazy
  • stylus
// Install ts, You will be prompted to select Babel, styles, etc. CD vue3-ts vue add typescript vue add vuex vue add router NPM install vue3-lazy -s NPM install stylus stylus-loader --save-devCopy the code

Iv. Project structure

├─ ├─ download.exe └─ Download.exe └─ download.exe └─ download.exe └─ download.exe └─ download.exe └─ download.exe └─ download.exe └─ download.exe ├ ─ ─ the SRC │ ├ ─ ─ App. Vue │ ├ ─ ─ assets │ │ ├ ─ ─ logo. The PNG │ │ └ ─ ─ styles │ │ └ ─ ─ varible. Styl │ ├ ─ ─ components │ │ ├ ─ ─ HeaderNav. Vue │ │ └ ─ ─ the HelloWorld. Vue │ ├ ─ ─ main. Ts │ ├ ─ ─ the router │ │ └ ─ ─ but ts │ ├ ─ ─ shims - vue. Which s │ ├ ─ ─ store │ │ └ ─ ─ index. Ts │ ├ ─ ─ types │ │ └ ─ ─ movie. Ts │ └ ─ ─ views │ ├ ─ ─ the About the vue │ ├ ─ ─ the Detail. The vue │ ├ ─ ─ Home. Vue │ ├ ─ ─ the List. The vue │ └── ├─ ├─ vinj.├ ─ vinj.├ ─ vinj.txtCopy the code

Five, the source

Example source code address: vue3-ts

Finally, I hope you can realize the great dream of becoming a front-end master as soon as possible! Welcome to exchange ~

  • Wechat official account: Mr. Lian has cat disease
  • Nuggets: Obsidian
  • Personal blog: lianpf.github. IO /

Copyright of this article belongs to original author yao Ling all! Without permission, is strictly prohibited! To the illegal carrier, the original author reserves the right to pursue legal means! If you need to reprint, please contact wechat public number: Mr. Lian has cat disease, you can get the author’s contact information!