Vite+Vue3+TypeScript+Element Plus (一) 搭建企业级轻量框架实践

2,555 阅读4分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

前言

2022年 🔥爆Vite 下一代前端开发构建工具 相比 Webpack是一个用于现代 JavaScript 应用程序的 静态模块打包工具 ,在Vite没出现前本人一直在用Webpack感觉还可以。除了运行项目比较更新代码比较其他都可以。 目前Vite2.7版本已稳定在项目实践完胜WebpackVite相关文档很少开发过程中会出现很多,本着我不入地狱谁入地狱的思想开始一段漫长填坑之旅

推荐阅读

初始化项目

npm init vite@latest
√ Project name: ... admin-vite
√ Select a framework: » vue
√ Select a variant: » vue-ts

Scaffolding project in D:\Juejin\admin-vite...

Done. Now run:
  cd admin-vite
  npm install
  npm run dev

vite.config.ts 之 Plugins 篇 (一)

vite-plugin-vue-setup-extend setup name 增强插件

Vue3setup语法糖是个好东西,但使用setup语法带来的第一个问题就是无法自定义name,而我们使用keep-alive往往是需要name的,解决这个问题通常是通过写两个script标签来解决,一个使用setup,一个不使用,但这样必然是不够优雅的。 来源:小学生study

  • 安装
# 选择一个你喜欢的包管理器

# NPM
npm install vite-plugin-vue-setup-extend -D

# Yarn
yarn add vite-plugin-vue-setup-extend -D

# PNPM
pnpm install vite-plugin-vue-setup-extend -D
  • 配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueSetupExtend()],
})

  • 使用
// App.vue
<script setup lang="ts" name="App">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

@vitejs/plugin-legacy 为打包后的文件提供传统浏览器兼容性支持

Vite 的默认浏览器支持基线是Native ESM,此插件为不支持本机 ESM 的旧版浏览器提供支持。

  • 安装
# 选择一个你喜欢的包管理器

# NPM
npm install @vitejs/plugin-legacy -D

# Yarn
yarn add @vitejs/plugin-legacy -D

# PNPM
pnpm install @vitejs/plugin-legacy -D
  • 配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueSetupExtend(),
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

以 IE11以上(不兼容IE11) 为目标时,您还需要regenerator-runtime

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueSetupExtend(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
  ],
})

vite-plugin-compression 压缩插件

vite-plugin-compressionvite-plugin-compress的升级版,vite-plugin-compression支持gzip等多种压缩算法

  • 安装
# 选择一个你喜欢的包管理器

# NPM
npm install vite-plugin-compression -D

# Yarn
yarn add vite-plugin-compression -D

# PNPM
pnpm install vite-plugin-compression -D
  • 配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
import compressPlugin from 'vite-plugin-compression'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueSetupExtend(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
    compressPlugin({
      verbose: false, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用
      threshold: 10240, // 文件容量大于这个值进行压缩,它将被压缩,单位为b
      algorithm: 'gzip', // 压缩算法 可选 ['gzip','brotliCompress' ,'deflate','deflateRaw']
      ext: '.gz', // 生成的压缩包后缀
    }),
  ],
})

vite-plugin-imagemin 图片压缩

  • 安装
# 选择一个你喜欢的包管理器

# NPM
npm install vite-plugin-imagemin -D

# Yarn
yarn add vite-plugin-imagemin -D

# PNPM
pnpm install vite-plugin-imagemin -D
  • 安装注意

国内安装是可能会失败出现‼ connect ETIMEDOUT 182.43.124.6:443│ ‼ gifsicle pre-build test failed提示。解决方法在package.json配置文件添加resolutions代码如下:

{
  "name": "admin-vite",
  "private": true,
  "version": "0.0.0",
  "resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  },
  ....
}
  • 配置
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import legacy from '@vitejs/plugin-legacy'
import compressPlugin from 'vite-plugin-compression'
import viteImagemin from 'vite-plugin-imagemin'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueSetupExtend(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
    compressPlugin({
      verbose: false, // 是否在控制台输出压缩结果
      disable: false, // 是否禁用
      threshold: 10240, // 文件容量大于这个值进行压缩,它将被压缩,单位为b
      algorithm: 'gzip', // 压缩算法 可选 ['gzip','brotliCompress' ,'deflate','deflateRaw']
      ext: '.gz', // 生成的压缩包后缀
    }),
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      mozjpeg: {
        quality: 20,
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4,
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox',
          },
          {
            name: 'removeEmptyAttrs',
            active: false,
          },
        ],
      },
    }),
  ],
})

运行

npm run dev 

打包

npm run build 

生成目录

npm install --global treer
treer -e ./result.md -i "/node_modules|git|dist/"

本章最终目录如下:

├─index.html
├─package.json
├─pnpm-lock.yaml
├─README.md
├─tsconfig.json
├─tsconfig.node.json
├─vite.config.ts
├─src
|  ├─App.vue
|  ├─env.d.ts
|  ├─main.ts
|  ├─components
|  |     └HelloWorld.vue
|  ├─assets
|  |   └logo.png
├─public
|   └favicon.ico
├─.vscode
|    ├─extensions.json
|    └settings.json

2022/2/15日更新VueVitevite-plugin-compressionvite-plugin-imageminvite-plugin-vue-setup-extendtypescript最新版本

{
  "name": "admin-vite",
  "private": true,
  "version": "0.0.1",
  "author": {
    "name": "SunHongYu",
    "email": "17600616235@163.com",
    "url": "https://juejin.cn/"
  },
  "resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  },
  "scripts": {
    "bootstrap": "pnpm install",
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "npm run build && vite preview",
    "preview:dist": "vite preview",
    "clean": "rimraf node_modules",
    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite"
  },
  "dependencies": {
    "vue": "^3.2.31"
  },
  "devDependencies": {
    "@vitejs/plugin-legacy": "^1.7.1",
    "@vitejs/plugin-vue": "^2.2.0",
    "@vue/compiler-sfc": "^3.2.31",
    "typescript": "^4.5.5",
    "vite": "^2.8.2",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-plugin-vue-setup-extend": "^0.4.0",
    "vue-tsc": "^0.31.2"
  }
}

继续学习

废话只说一句:码字不易求个👍,收藏 === 学会,快行动起来吧!🙇‍🙇‍🙇‍。

# Vite+Vue3+TypeScript+Element (二) 搭建企业级轻量框架实践