This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

The scaffold Git address continues to be updated at….

An overview of

The previous chapter successfully introduced VUe3 (linking) and configured SCSS, assets, etc. You can basically write code on it. The next task is ts introduction.

Vue3 supports typescript well and is much easier to configure than VUe2, but there are a few details that need to be noted

  1. Tsconfig. json file: Set the module and moduleResolution fields
  2. Create. D. ts files in vue project
  3. Vue + TS project introduces images

Ts installation and configuration file modification

  1. Install ts globally, and then use commands to generate configuration files.
  2. Install typescript in the project and configure ts-Loader.

Global installation, generating configuration files

Use the following command to install typescript globally

npm install -g typescript**
Copy the code

Run TSC-V on the console and output the version number. The installation is successful

Run the following command to generate the tsconfig.json file in the root directory. The configuration file generated by using this command is conveniently complete and annotated (but in English).

tsc --init
Copy the code

After generating the tsconfig.json file, several fields need to be modified.

Project Configuration

Next you need to install the TS in your scaffolding and configure the TS-Loader.

Webpack configuration ts

Install dependencies

yarn add typescript ts-loader -D
Copy the code

Ts – loader configuration

module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
              {
                loader: 'ts-loader',
                options: {
                  appendTsSuffixTo: [/\.vue$/]
                }
              }
            ]
        }
    ]
}

Copy the code

The appendTsSuffixTo option needs to be configured to work on the Vue file

The above is the official explanation of appendTsSuffixTo

shims-vue.d.ts

The ts declaration file must be in the project to make the TS aware of the. Vue file.

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Copy the code

The above is an error without a. D. ts file

Import images into the project

The use of images in TS projects also requires some configuration

  1. Declare the image type in.d.ts

  1. Configure the include in tsconfig.json

A simple example

Now you can write a simple example of introducing images in your project

<template> <div> <h1>{{name}}</h1> <img src="~assets/logo.png" alt=""> <div class="bg"></div> </div> </template> <script  lang="ts"> import { defineComponent, ref } from 'vue' export default defineComponent({ setup() { const name = ref<string>('name') return { name } }, }) </script> <style lang="scss"> @import './index.scss'; .bg { width: 200px; height: 200px; background: url("~assets/logo.png"); background-size: 100% 100%; } </style>Copy the code

If you want to use ~assets in the figure above, you need to configure the path alias in webpack, whether SRC in IMG or setting the background, which is very convenient. The configuration method is as follows

resolve: { alias: { assets: path.resolve(process.cwd(), './src/assets'), '@': path.resolve(process.cwd(), './src') // asserts: path.resolve(__dirname, '.. /src/assets') } }Copy the code

conclusion

This chapter introduces TS in scaffolding and completes a number of configurations. In the next chapter, WE’ll introduce ESLint in scaffolding.