Introducción detallada y práctica de vue + ts + vite

Vite es una herramienta para empaquetar código front-end. Primero, puede comprender el método de empaquetado y construcción de Vite a través de una imagen.

1. Conocimientos previos: administradores de paquetes de npm y hilados

1. comandos e instrucciones comunes de npm

// 查看npm版本
npm -v

// 初始化一个项目，会出现一个package.json配置文件，可以在后面加上-y ，快速跳过问答式界面
npm init

// 安装依赖包
npm install // 根据项目中的package.json文件自动下载项目所需的全部依赖
npm install 包名 --save-dev (npm install 包名 -D) // 安装的包只用于开发环境，不用于生产环境，会出现在package.json文件中的devDependencies属性中。
npm install 包名 --save (npm install 包名 -S) // 安装的包需要发布到生产环境的，会出现在package.json文件中的dependencies属性中

// 更新
npm update 包名 // 更新指定包

// 移除依赖包
npm uninstall 包名 // 卸载指定包

// 查看
npm list // 查看当前目录下已安装的node包
npm list -g // 查看全局已经安装过的node包
npm info 指定包名 // 查看远程npm上指定包的所有版本信息
npm config list // 查看配置信息
npm ls 包名 // 查看本地安装的指定包及版本信息，没有显示empty
npm ls 包名 -g // 查看全局安装的指定包及版本信息，没有显示empty
npm root // 查看当前包的安装路径
npm root -g // 查看全局的包的安装路径

// 其他
npm config set registry https://registry.npm.taobao.org //  修改包下载源，此处修改为了淘宝镜像
npm --help // 查看npm帮助命令
npm 指定命令 --help // 查看指定命令的帮助

2. Hilo de comandos e instrucciones comunes

// 初始化一个新项目
yarn init 

// 运行脚本
yarn run // 用来执行在 package.json 中 scripts 属性下定义的脚本

// 发布包
yarn publish

// 添加依赖包
yarn add [package] // 会自动安装最新版本，会覆盖指定版本号
yarn add [package] [package] [package] // 一次性添加多个包
yarn add [package]@[version] // 添加指定版本的包
yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest）

// 将依赖项添加到不同依赖项类别，不添加则默认安装到package.json中的dependencies里
yarn add [package] --dev 或 yarn add [package] -D // 加到 devDependencies
yarn add [package] --peer 或 yarn add [package] -P // 加到 peerDependencies
yarn add [package] --optional 或 yarn add [package] -O // 加到 optionalDependencies

// 升级依赖包
yarn upgrade [package] // 升级到最新版本
yarn upgrade [package]@[version] // 升级到指定版本
yarn upgrade [package]@[tag] // 升级到指定tag

// 移除依赖包
yarn remove [package] // 移除包

// 安装package.json里的包依赖，并将包及它的所有依赖项保存进yarn.lock
yarn 或 yarn install // 安装所有依赖
yarn install --flat // 安装一个包的单一版本
yarn install --force // 强制重新下载所有包
yarn install --production // 只安装生产环境依赖

// 显示某个包的信息
yarn info [package] // 可以用来查看某个模块的最新版本信息

// 缓存相关
yarn cache
yarn cache list // 列出已缓存的每个包
yarn cache dir // 返回全局缓存位置
yarn cache clean // 清除缓存

2. Crea un proyecto de invitación

Asegúrese de que la versión del nodo sea superior a 12.0

1. Instale la última versión del sitio web oficial de Vite.

npm init vite@latest // 安装最新版本的vite

Este artículo muestra cómo vue+tscrear un proyecto basado en la última versión de vite y seguir las instrucciones para ejecutar el proyecto.

cd "项目名称" // 进入项目目录
npm instasll // 安装依赖包
npm run dev // 运行项目

2. Instale la versión vite1.x

Instale el comando del proyecto vite: yarn create vite-app "项目名称"o npm init vite-app + "项目名称"
de la siguiente manera: (no recomendado)



En este punto, un proyecto vite se ha creado y ejecutado exitosamente.

3. Análisis de la estructura del directorio

La estructura inicial del directorio del proyecto vite+vue+ts es la siguiente:

1 、.vscode

Los archivos en este directorio extensions.jsonregistran la configuración relacionada con la herramienta de desarrollo vscode.

2 、node_modules

Ejecutando el comando de instalación npm installo yarnel directorio del paquete de dependencia generado automáticamente.

3 、public

Vite copiará intactos todos los archivos colocados en la carpeta pública al directorio raíz de la carpeta empaquetada.
Cosas a tener en cuenta al usar archivos en público: 1) Siempre debe usar el directorio raíz /para hacer referencia a archivos en la carpeta pública, como usar /favicon.icopara hacer referencia a public/favicon.icoarchivos; 2) Los archivos en público no pueden usar javascript para importar recursos.

4 、src

Ubicación de almacenamiento del código de recursos relacionado con el proyecto.

1）assets

Se utiliza para almacenar todos los archivos de recursos estáticos (css, fuentes, etc.) en el proyecto.

2）components

Se utiliza para almacenar todos los componentes personalizados del proyecto.

3）App.vue

Es el componente raíz del proyecto.

4）main.ts

Es la entrada a todo el proyecto.

5）style.css

Una tabla de archivos de estilo básica que es global para todo el proyecto.

6）vite-env.d.ts

En proyectos desarrollados usando ts, .d.tsel archivo al final se usa principalmente para TypeScript para identificar .vuearchivos. .vueEl archivo no es un tipo de archivo normal. ts no puede entender vuepara qué sirve el archivo. Aquí, se le dice a ts que el archivo vue es de este tipo. Sin el archivo de declaración en este archivo declare, encontrará importque todos los archivos de tipo vue informarán errores. Y js en sí no tiene tipo. El servicio de lenguaje de ts necesita el archivo .d.ts para identificar el tipo, de modo que se pueda realizar la verificación de sintaxis correspondiente y el aviso inteligente.

5 、.gitignore

Archivos ignorados al enviar código al repositorio de git. Identifica qué archivos no necesitan enviarse al repositorio de git. Los contenidos pueden ser carpetas específicas o sufijos de archivos, como se muestra a continuación.

6 、index.html

Vite, el único archivo de entrada de página html en la aplicación SPA de una sola página, index.htmllo considera y la base de URL se restablecerá automáticamente.

Para proyectos empaquetados con vue + ts + webpack, se main.tsconsidera el punto de entrada, index.htmlpero se coloca en publicuna carpeta y se usa como plantilla. Al crear recursos, los enlaces de recursos se inyectarán automáticamente en index.htmlel archivo y se pueden usar <%=BASE_URL%>para insertar contenido.

7 、package-lock.json

Contiene información sobre la versión exacta de cada dependencia instalada, así como una suma de verificación del código para garantizar que el código sea exactamente el mismo. Este archivo bloquea la versión de cada dependencia que instaló. Esto garantiza que no instale dependencias incorrectas. y evitará situaciones malas causadas por desarrolladores que cambian o actualizan accidentalmente la versión. Generalmente, este archivo no se modificará fácilmente. El entendimiento simple es: bloquear la versión del paquete de dependencia para garantizar que otros puedan obtener el mismo entorno de dependencia cuando usan npm para instalar el paquete de dependencia del proyecto. Si el comando ejecutado al instalar el paquete en el desarrollo posterior es: npm install [email protected], entonces package-lock.jsoneste archivo se modificará simultáneamente.
ps : Si el comando ejecutado antes de instalar el paquete dependiente no lo es, npmentonces yarneste archivo no existe, pero yarn.lockse genera un archivo, cuya función también es bloquear el número de versión del paquete durante la instalación.

8 、package.json

Archivo de descripción del proyecto, que registra información relacionada con el proyecto actual, los detalles son los siguientes:

{
    
    
  "name": "vite-project", // 项目名称
  /*
  主要是防止执行了npm publish发布了不想发布的包，或发布到不想发布的npm私服,
  只有移除掉该属性才能执行发布命令npm publish,
  如果不想每次新建项目都手动设置，可以进行全局配置：npm config set init-private true
  */
  "private": true,
  "version": "0.0.0", // 项目版本
  /*
  用于定义package.json文件和该文件所在目录根目录中.js文件和无拓展名文件的处理方式。
   值为'moduel'则当作es模块处理，值为'commonjs'则被当作commonJs模块处理，不指定值则默认按照commonJs规范处理。
   但无论type字段为何值，.mjs的文件都按照es模块来处理，.cjs的文件都按照commonJs模块来处理
  */
  "type": "module", 
  "scripts": {
    
      // scripts中配置以键值对（key：value）的形式来取“别名”
    "dev": "vite", // 项目运行命令，文中第一步运行npm run dev就是从这得到的，如果名称dev换成了serve，那么在运行项目时的命令就是：npm run serve
    "build": "vue-tsc --noEmit && vite build", // 项目打包命令，打包项目时执行：npm run build
    "preview": "vite preview"
  },
  // 正式环境依赖所需要的第三方模块（包），安装命令一般是：npm install "依赖包名"
  "dependencies": {
    
    
    "vue": "^3.2.37"
     /* 包名: 版本号
    	版本号前面的符号一般有两种：~ ，^，区别：
    	^的意思是最近的一个大版本，比如 ^1.0.2 将会匹配所有 1.x.x, 但不包括2.x.x
    	~的意思是匹配最近的小版本，比如 ~1.0.2 将会匹配所有的1.0.x版本，但不匹配1.1.0
    	如果没有上面这2种符号，则表示安装精确的版本
	*/
  },
   /*
  	开发时依赖所需要的第三方模块（包），安装命令一般是：npm install -D "依赖包名"，或 npm install --save-dev "依赖包名" ，
  	如:新增sass包可执行命令npm install -D sass 或 npm install --save-dev sass 
  特别注意要加-dev表示是开发时用的依赖包
  */
  "devDependencies": {
    
    
    "@vitejs/plugin-vue": "^3.0.0", // @vitejs/plugin-vue 插件会将 .vue 文件编译并拆分成三个部分，包括模版，脚本和样式
    "typescript": "^4.6.4",
    "vite": "^3.0.0",
    "vue-tsc": "^0.38.4"
  }
}

9 、README.md

Generalmente se utiliza para registrar instrucciones relacionadas con el proyecto.

10 、tsconfig.json

Archivo de configuración del compilador TypeScript. El compilador TypeScript puede compilar el código de acuerdo con sus reglas.

{
    
    
  "compilerOptions": {
    
    
    "target": "ESNext", // 目标语言的版本
    "useDefineForClassFields": true, // 标志用作迁移到即将推出的类字段标准版本的一部分，默认：false。
    "module": "ESNext", // 生成代码的模板标准
    "moduleResolution": "Node", // // 模块解析策略，ts默认用node的解析策略，即相对的方式导入
    "strict": true, // 是否启动所有严格检查的总开关，默认：false，启动后将开启所有的严格检查选项。
    "jsx": "preserve", // 指定 jsx 格式
    "sourceMap": true, // 生成目标文件的sourceMap文件
    "resolveJsonModule": true, // 是否解析 JSON 模块，默认：false。
    "isolatedModules": true, // 是否将每个文件转换为单独的模块，默认：false。
    "esModuleInterop": true, // 是否通过为所有导入模块创建命名空间对象，允许CommonJS和ES模块之间的互操作性，开启改选项时，也自动开启allowSyntheticDefaultImports选项，默认：false。
    "lib": ["ESNext", "DOM"], // 指定项目运行时使用的库。
    "skipLibCheck": true  // 是否跳过声明文件的类型检查，这可以在编译期间以牺牲类型系统准确性为代价来节省时间，默认：false。
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], // 解析的文件
  "references": [{
    
     "path": "./tsconfig.node.json" }] // 项目引用，是TS3.0 中的一项新功能，它允许将 TS程序组织成更小的部分。
}

Para obtener más configuración e instrucciones, consulte: configuración detallada de tsconfig.json y documentación de ts

11 、tsconfig.node.json

Archivo de configuración de tipo complemento en vite, se utilizan los campos tsconfig.jsondel archivo .references

12 、vite.config.ts

Configuraciones relacionadas con la compilación de Vite, el contenido predeterminado es el siguiente:

En el desarrollo real, las configuraciones e instrucciones comunes se pueden denominar de la siguiente manera:

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 需要安装的插件@types/node
import viteCompression from "vite-plugin-compression"; // gzip必备插件，需要安装：npm i vite-plugin-compression -D
export default defineConfig({
    
    
  base: "./", //  生产环境路径，类似publicPath，'./'避免打包访问后空白页面，要加上，不然线上也访问不了
  // 代理相关配置
  server: {
    
    
    host: "localhost", // 服务器主机名
    port: 3001, // 端口号
    strictPort: false, // 若3000端口被占用,是否直接结束项目
    https: false, // 是否开启 https
    open: true, // 是否自动在浏览器打开
    proxy: {
    
    
      "/api": {
    
    
        target: "", // 后台接口
        changeOrigin: true,
        secure: false, // 如果是https接口，需要配置这个参数
        // ws: true, // websocket是否支持
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
  // 打包相关
  build: {
    
    
    target: "es2020", //指定es版本,浏览器的兼容性
    outDir: "dist",
    assetsDir: "assets", // 指定静态资源存放路径
    // cssCodeSplit: true, // css代码拆分,禁用则所有样式保存在一个css里面
    sourcemap: false, // 是否构建source map 文件
    // manifest: true, // 是否在outDir中生成 manifest.json
    rollupOptions: {
    
    
      // input: '/path/to/main.ts' // 覆盖默认的 .html 入口
    }
  },
  resolve: {
    
    
    // 配置项目路径别名，在开发时不需要写完整的路径名称，需要安装 @types/node，执行命令npm i -D @types/node --save-dev即可
    alias: {
    
    
      "@": path.resolve(__dirname, "src"),
      "@assets": path.resolve(__dirname, "src/assets"),
      "@components": path.resolve(__dirname, "src/components"),
    },
  },
  // 引入第三方的配置
  optimizeDeps: {
    
    
    include: [],
  },
  // 插件相关配置
  plugins: [
    vue(),
    viteCompression({
    
    
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: "gzip",
      ext: ".gz",
    })
  ]
})

Debido a que el proyecto usa ts, después de configurar el alias de ruta, debe agregar la siguiente configuración al archivo de configuración tsconfig.json:

Para una configuración más detallada, consulte el sitio web oficial de vite .

13 、其他

1）.gitignore

De hecho, el desarrollo generalmente implica enviar código al repositorio de git. .gitignoreLos archivos registrados son los archivos que se ignoran al enviar el código al repositorio de git. Identifica qué archivos no necesitan enviarse al repositorio de git. Los contenidos pueden ser carpetas específicas o sufijos de archivos, como se muestra a continuación.

2）dist

npm run buildEl directorio generado después de ejecutar el comando de empaquetado .

En este punto, se ha completado el análisis básico del directorio del proyecto Vite. En el proceso de desarrollo posterior, puede agregar directorios y otras operaciones usted mismo.

4. Procesamiento de recursos estáticos

1. Introducir recursos como URL

import imgUrl from './img.png' // 通过import导入图片时，会自动生成一个url，可直接使用

Este método es similar a webpack file-loader, la diferencia es que vite importpuede usar rutas públicas absolutas.

2. Para importar recursos como cadenas
import testString from './testString?raw, solo necesita agregar el sufijo ?raw al importar archivos.

3. Introducir recursos como trabajadores.

import Worker from './testWorker.js?worker // 只需要在文件后面加上 ?work
const worker = new Worker()

// 将worker作为base64字符串引入，则需要加上inline
import WorkerBase64 from './testWorkerBase64.js?worker&inline 

5. Variables y modos de entorno.

El modo se refiere al entorno en el que se ejecuta el proyecto actual. Al usar npmo yarnejecutar comandos, cada comando puede corresponder a un modo. El npm run deventorno de ejecución predeterminado es developmentel modo y npm run buidel entorno de ejecución es productionel modo. Se pueden personalizar otras configuraciones y comandos de ejecución. .

A se expondrá dentro de Vite import.meta.envy podrá utilizarlo import.meta.env.xxxpara obtener las variables de entorno configuradas.

Variable incorporada disponible en todas las situaciones:
import.meta.env.MODE: {string}El modo en el que se ejecuta la aplicación.
import.meta.env.BASE_URL: {string}Los conceptos básicos al implementar aplicaciones están determinados URLpor baselos elementos de configuración.
import.meta.env.PROD: {boolean}Si la aplicación se ejecuta en un entorno de producción.
import.meta.env.DEV: {boolean}Si la aplicación se está ejecutando en un entorno de desarrollo (siempre al import.meta.env.PRODrevés).

Si necesita que Vite configure variables de entorno similares a Vue2, confíe en .envlas carpetas para lograrlo. Cree .env.productiony bajo el mismo nivel de src .env.developmentpara representar el entorno de producción y el entorno de desarrollo respectivamente.

Además developmentde productionestos dos modos, también puede personalizar otros modos y --modesobrescribir los modos originales pasando opciones. Por ejemplo, para definir un modo de prueba, debe crear el .env.stagingarchivo correspondiente y ejecutarlo. vite build --mode staging

Otra forma de modificar el entorno de ejecución puede esté package.jsonen Set, luego ejecute el comando correspondiente, luego import.meta.envel valor de la variable de entorno obtenido por el proyecto es --modeel valor correspondiente, ejecútelo de la siguiente manera:npm run serve

por fin

Referencia: sitio web oficial de vite

Si hay alguna comprensión incorrecta en el artículo, no dude en darme algún consejo, aprendamos y crezcamos juntos ~