configuración de vue3+vite+ts

Directorio de artículos

1. configuración del alias src

Descargar pathmódulo

npm i @tipos/ruta

vue.config.tsConfigure la ruta del alias en

// vite.config.ts
import {
    
    defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
    
    
    plugins: [vue()],
    resolve: {
    
    
        alias: {
    
    
            "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
        }
    }
})

existirTypeScripe配置编译命令

// tsconfig.json
{
    
    
  "compilerOptions": {
    
    
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": {
    
     //路径映射，相对于baseUrl
      "@/*": ["src/*"] 
    }
  }
}

2. configuración svg

Instalar dependencias

npm install vite-plugin-svg-icons -D

vite.config.tsConfigurar el complemento en

import {
    
     createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
    
    
  return {
    
    
    plugins: [
      createSvgIconsPlugin({
    
    
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

Importar a principal

import 'virtual:svg-icons-register'

usar
注意点El nombre de la carpeta es opcional; consulte la ruta de almacenamiento específica y la ruta de configuración del complemento.

    <svg aria-hidden="true">
      <!-- #icon-文件夹名称-图片名称 -->
      <use href="#icon-login-eye-off" />
    </svg>

2.1 Encapsular componentes globales de svg

src/componentsCrear un SvgIconcomponente en el directorio.

<template>
  <div>
    <svg :style="{ width: width, height: height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
defineProps({
    
    
  //xlink:href属性值的前缀
  prefix: {
    
    
    type: String,
    default: '#icon-'
  },
  //svg矢量图的名字
  name: String,
  //svg图标的颜色
  color: {
    
    
    type: String,
    default: ""
  },
  //svg宽度
  width: {
    
    
    type: String,
    default: '16px'
  },
  //svg高度
  height: {
    
    
    type: String,
    default: '16px'
  }

})
</script>
<style scoped></style>

Cree un archivo en la carpeta src index.ts: se utiliza para registrar todos los componentes globales en la carpeta de componentes.

import SvgIcon from './SvgIcon/index.vue';
import type {
    
     App, Component } from 'vue';
const components: {
    
     [name: string]: Component } = {
    
     SvgIcon };
export default {
    
    
    install(app: App) {
    
    
        Object.keys(components).forEach((key: string) => {
    
    
            app.component(key, components[key]);
        })
    }
}

Declare el tipo de componente global. types/components.d.ts
Para configuraciones específicas, consulte element-plus.

// 设置全局组件类型
import SvgIcon from '@/components/SvgIcon.vue'
// 2. 声明 vue 类型模块
declare module 'vue' {
    
    
  // 3. 给 vue  添加全局组件类型，interface 和之前的合并
  interface GlobalComponents {
    
    
    // 4. 定义具体组件类型，typeof 获取到组件实例类型
    // typeof 作用是得到对应的TS类型
    SvgIcon: typeof SvgIcon
  }
}

Introduzca archivos en el archivo de entrada e instale complementos personalizados src/index.tsmediante métodosapp.use

import gloablComponent from './components/index';
app.use(gloablComponent);

3. Integre scss y css para completar la personalización del tema.

En primer lugar, $ambos y :rootson métodos para definir variables CSS, pero tienen algunas diferencias.

:rootLos selectores se utilizan para definir variables CSS globales, generalmente utilizadas en el elemento raíz (es decir, elemento HTML). Por ejemplo:

:root {
    
    
  --primary-color: #007bff;
}

body{
    
    
color:var(--primary-color)
}

Esto define una variable global llamada --primary-color que se puede utilizar en toda la página.
Y $es Sasso @es Lesssintaxis para definir variables en preprocesadores CSS. En Sass, puedes usar $la notación para definir variables, por ejemplo:

$primary-color: #007bff;
body {
    
    
  color: $primary-color;
}

Esto define una $primary-colorvariable nombrada y la aplica al atributo de color en el elemento del cuerpo.
En general, :rootse utiliza para definir variables CSS globales y $se utiliza para definir variables en el preprocesador. Ambos funcionan de manera similar, pero utilizan métodos ligeramente diferentes.

3.1 Configurar scss en invitación

Cuando lo use en el archivo de estilo global index.scss, $ 变量se informará un error, por lo que es necesario introducir variables globales en el proyecto $.

$base-menu-background: #001529;
::-webkit-scrollbar-track {
    
    
    background: $base-menu-background;
}

La configuración del archivo es vite.config.tsla siguiente:

export default defineConfig((config) => {
    
    
	css: {
    
    
      preprocessorOptions: {
    
    
        scss: {
    
    
        // 用于解析$定义的样式
          javascriptEnabled: true,
          additionalData: '@import "./src/styles/variable.scss";',
        },
      },
    },
	}
}

4. Configuración de variables de entorno

Durante el proceso de desarrollo del proyecto, habrá tres etapas: entorno de desarrollo, entorno de prueba y entorno de producción (es decir, entorno formal). El estado de las solicitudes (como direcciones de interfaz, etc.) en diferentes etapas es diferente. Cambiar manualmente la dirección de la interfaz es bastante tedioso y propenso a errores. Entonces surgió la necesidad de configurar las variables de entorno. Solo necesitamos hacer una configuración simple y dejar el trabajo de cambiar los estados del entorno al código.

Los desarrolladores del entorno de desarrollo (desarrollo)
trabajan en su propia rama de desarrollo. Cuando el desarrollo alcanza un cierto nivel, sus colegas fusionarán el código y realizarán una depuración conjunta.

El entorno de prueba (testing)
es el entorno donde trabajan los colegas de prueba, generalmente lo implementan los propios colegas de prueba y luego lo prueban en este entorno.

El entorno de producción (producción)
se refiere al entorno utilizado para la operación y entrega formal en el desarrollo de software. El entorno de producción generalmente desactiva los informes de errores y activa los registros de errores. (Entorno proporcionado oficialmente a los clientes).

Nota: Generalmente, un entorno corresponde a un servidor, y los entornos de desarrollo y prueba de algunas empresas son un servidor. ! !

¡Agregue archivos para entornos de desarrollo, producción y prueba al directorio raíz del proyecto respectivamente!

.env.development
.env.production
.env.test

entorno de desarrollo

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = '项目的标题'
VITE_APP_BASE_API = '/dev-api'

Entorno de producción

NODE_ENV = 'production'
VITE_APP_TITLE = '项目标题'
VITE_APP_BASE_API = '/prod-api'

entorno de prueba

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_TITLE = '项目的标题'
VITE_APP_BASE_API = '/test-api'

package.jsonEjecutar comando en configuración

 "scripts": {
    
    
    "dev": "vite --open",
    "build:test": "vue-tsc && vite build --mode test",
    "build:pro": "vue-tsc && vite build --mode production",
    "preview": "vite preview"
  },

index.htmlutilizada enVITE_APP_TITLE

Instalar complemento

npm add vite-plugin-html -D

vite.config.tsConfiguración

import {
    
     createHtmlPlugin } from 'vite-plugin-html'
plugins: [
  createHtmlPlugin()
]

index.html <%=环境变量名%> Obtener valor

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%=VITE_APP_TITLE%></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script

5. Adaptación del terminal móvil

Úselo para vwcompletar la adaptación del terminal móvil
e instalar el módulo.

npm install postcss-px-to-viewport -D

Configuración: postcss.config.ts

module.exports = {
    
    
  plugins: {
    
    
    'postcss-px-to-viewport': {
    
    
      // 设备宽度375计算vw的值
      viewportWidth: 375,
    },
  },
};

6. Cargar automáticamente según demanda

Instalar

npm i unplugin-vue-components -D

usar

import Components from 'unplugin-vue-components/vite'
  plugins: [
    // 解析单文件组件的插件
    vue(),
    // 自动导入的插件，解析器可以是 vant element and-vue 
    Components({
    
    
      dts: false,
      // 原因：Toast Confirm 这类组件的样式还是需要单独引入，样式全局引入了，关闭自动引入
      resolvers: [VantResolver({
    
     importStyle: false })]
    })
  ],

y uso

npm i ant-design-vue@next

import Components from 'unplugin-vue-components/vite'
import {
    
     AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
    
    
  plugins: [
    .......其它plugins配置
    Components({
    
    
      resolvers: [
        AntDesignVueResolver(),
      ]
    }),
  ........其它plugins配置
  ]
})

Enlace de referencia de uso detallado

Siete, configuración simulada

Instalar

pnpm i vite-plugin-mock mockjs -D

vite.config.tsHabilitar complemento en el archivo de configuración

import {
    
     viteMockServe } from 'vite-plugin-mock'
plugins: [
    viteMockServe({
    
    
     // mockPath 默认不配置地洞找src同级的目录
      mockPath: './src/mock',
      localEnabled: true
    })
]

//用户信息数据
function createUserList() {
    
    
    return [
        {
    
    
            userId: 1,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'admin',
            password: '111111',
            desc: '平台管理员',
            roles: ['平台管理员'],
            buttons: ['cuser.detail'],
            routes: ['home'],
            token: 'Admin Token',
        },
        {
    
    
            userId: 2,
            avatar:
                'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
            username: 'system',
            password: '111111',
            desc: '系统管理员',
            roles: ['系统管理员'],
            buttons: ['cuser.detail', 'cuser.user'],
            routes: ['home'],
            token: 'System Token',
        },
    ]
}

export default [
    // 用户登录接口
    {
    
    
        url: '/api/user/login',//请求地址
        method: 'post',//请求方式
        response: ({
     
      body }) => {
    
    
            //获取请求体携带过来的用户名与密码
            const {
    
     username, password } = body;
            //调用获取用户信息函数,用于判断是否有此用户
            const checkUser = createUserList().find(
                (item) => item.username === username && item.password === password,
            )
            //没有用户返回失败信息
            if (!checkUser) {
    
    
                return {
    
     code: 201, data: {
    
     message: '账号或者密码不正确' } }
            }
            //如果有返回成功信息
            const {
    
     token } = checkUser
            return {
    
     code: 200, data: {
    
     token } }
        },
    },
    // 获取用户信息
    {
    
    
        url: '/api/user/info',
        method: 'get',
        response: (request) => {
    
    
            //获取请求头携带token
            const token = request.headers.token;
            //查看用户信息是否包含有次token用户
            const checkUser = createUserList().find((item) => item.token === token)
            //没有返回失败的信息
            if (!checkUser) {
    
    
                return {
    
     code: 201, data: {
    
     message: '获取用户信息失败' } }
            }
            //如果有返回成功信息
            return {
    
     code: 200, data: {
    
    checkUser} }
        },
    },
]

Enlace de referencia de sintaxis detallada simulada