Vue3+ts development efficiency improvement

1. Vite + pnpm project initialization

        pnpm:  10 times faster than npm or yarn

        pnpm differs from other package managers such as npm and Yarn in that it uses a unique installation method called "hard links". When you install a package using PNPM, it doesn't copy the package's files into each project's node_modulesdirectory, but creates hard links to a central storage location. This means that multiple projects can share the same package file, saving disk space and reducing installation time.

        pnpm also supports a feature called "virtual packages", which allows you to create aliases for packages. Virtual packages can be used to install multiple versions of a package at the same time, or to replace a package without changing the dependencies of other packages.

pnpm is designed to be fast and efficient, and its developers claim that it can be up to 10 times faster than npm or yarn in some cases. It also supports a wide range of package lock file formats, including those used by npm, yarn.

        vite: faster than vue-cli

        Vite does not need to package all code into one or more static files in advance. Instead, Vite will dynamically compile and serve the required modules when the browser requests resources, and generate corresponding static files in memory. This approach improves the development experience and build speed. It also supports features such as hot updates and code splitting, enabling developers to develop, debug and deploy faster.

        use:

 

2, setup syntax sugar

(1) No need to write setup function, and export default{} by default

(2) Components only need to be introduced without registration

(3) Attributes and methods do not need to be returned, and can be used directly in the template template

   

                No setup syntactic sugar, App.vue file

<template>
  <div @click="changeTitle">
    {
    
    { title }}
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script lang="ts">
import { ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
export default {
  components: {
    HelloWorld
  },
  setup() {
    let title = ref('123456')
    const changeTitle = () => {
      title.value = '哈哈哈'
    }
    return {
      title,
      changeTitle
    }
  }
}
</script>

                Use setup syntax sugar, App.vue file

<template>
  <div @click="changeTitle">
    {
    
    { title }}
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import HelloWorld from './components/HelloWorld.vue'
  let title = ref('123456')
  const changeTitle = () => {
    title.value = '哈哈哈'
  }
</script>

3. Automatic import

        It can automatically import third-party plug-in libraries such as component and vue, instead of manual import, the following configuration is required:

  // Install the auto-import plugin

  pnpm add unplugin-auto-import unplugin-vue-components -D

        vite.config.ts configuration

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 配置需要自动导入的库
      imports: [
        'vue'
      ],
      // 生成到的地址
      dts: 'types/auto-imports.d.ts',
      // 配置本地需要自动导入的库
      dirs: [
      ],
    }),
    Components({
      // 生成组件的地址
      dts: 'types/components.d.ts',
    }),
  ],
})

        types/auto-imports.d.ts: Automatically generated by the system, showing third-party libraries imported on demand

        types/components.d.ts: Automatically generated by the system, showing which components are imported 

        

        Remove all imports, the ref is marked red, and the imported B component cannot be prompted

 

        Reason: We found in the types/components.d.ts directory that the plug-in uses the type implemented by @vue/runtime-core , and the ts configuration cannot recognize the package under the types folder

         To solve the above problems:

pnpm add @vue/runtime-core -D

        Open tsconfig.json  and add the following code

 

4. Configure the path prefix

        Configuration:

pnpm add @types/node -D

        The configuration of vite.config.ts is as follows

import { fileURLToPath } from 'url'
import { defineConfig } from 'vite'

const baseSrc = fileURLToPath(new URL('./src', import.meta.url))

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '~': baseSrc,
      '~@': baseSrc,
    },
  }
})

       tsconfig.json: configure  baseUrl and paths

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": [
      "ESNext",
      "DOM"
    ],
    "skipLibCheck": true,
    "noEmit": true,
    // 路径配置
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "src/*"
      ],
      "~@/*": [
        "src/*"
      ]
    }，
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/env.d.ts",
    "types/**/*.d.ts",
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

        after configuration 

5. Environment variable prompt

        By default, vite will use dotenv to read the following files as our environment variables. By default, in order to prevent accidentally leaking some environment variables to the client, only variables prefixed with VITE_ will be exposed to the code processed by vite

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

There will be no code prompts before configuration   

        Move src/vite-env.d.ts to the types folder, rename it to env.d.ts  , and add the following code to env.d.ts :

/// <reference types="vite/client" />
declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}

interface ImportMetaEnv {
    readonly VITE_BASE: string
}

interface ImportMeta {
    readonly env: ImportMetaEnv
}

 

~~~Continuous update~~~