点击登录,精彩内容等着你

Vue3+Vite的项目添加使用的依赖或者插件plugins,让项目跑的更快

全栈侠客

2022-12-01
Vite 可以使用插件进行扩展, 得益于Rollup 插件的强大生态系统。Vite使用一个插件,需要将它添加到项目的 devDependencies 并在 vite.config.js 配置文件中的 plugins 数组中引入它。

Vite官网中,有推荐的一些plugins提供使用,并提供了链接,可以查找到“一些遵循了 推荐约定 的 Vite 插件“,今天推荐一些常见与特别有用的插件,并在项目中使用它们。


npm Vite 插件搜索链接


一、推荐Vite plugins

1. unplugin-auto-import

解决Vite,Vue等API的自动导入

  • 第一步:安装
    npm i -D unplugin-auto-import
  • 第二部:插件配置
    为了对vite的plugins的进行方便管理,将在项目根目录中添加文件夹vite-plugins,建立index.js

    1. // 文件/vite-plugins/index.js内容
    2. import autoImpot from 'unplugin-auto-import'
    3. export default function vitePluginsInit(){
    4. //1.默认vue相关api自动导入
    5. const vitePlugins = [vue()];
    6. //2.自动导入插件
    7. vitePlugins.push(autoImpot({
    8. imports:[
    9. 'vue',
    10. 'vue-router',
    11. 'pinia'
    12. ],
    13. dts : false
    14. }));
    15. return vitePlugins;
    16. }

    vite.config.js进行一下改造

    1. import { defineConfig } from 'vite'
    2. import vue from '@vitejs/plugin-vue'
    3. import vitePluginsInit from './vite-plugins'
    4. // https://vitejs.dev/config/
    5. export default defineConfig(({ mode, command }) => {
    6. return {
    7. plugins: vitePluginsInit(),
    8. // 1.vite 服务器配置
    9. server: {
    10. port: 8080,
    11. host: true,
    12. open: true
    13. },
    14. }
    15. })

2.vite-plugin-svg-icons

用于生成 svg 雪碧图,方便在项目中使用 .svg 文件。
搭配阿里巴巴矢量图标库使用,只需把下载好的 svg 文件丢到指定目录就能直接使用了。

  • 预加载 在项目运行时就生成所有图标,只需操作一次 dom

3.autoprefixer

官方介绍:
Autoprefixer是一款基于PostCSS插件,用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀.


通俗来说就是:为兼容所有浏览器,部分CSS属性需要加上不同的浏览器前缀
举栗子:

  1. //Autoprefixer处理前css代码
  2. display:flex;
  3. //Autoprefixer处理后css代码
  4. display:-webkit-box;
  5. display:-ms-flexbox;
  6. display:flex;
  • 进行安装:npm i autoprefixer
  • 进行配置:vite.config.js
    1. css: {
    2. postcss: {
    3. plugins: [autoprefixer]
    4. }
    5. }
  • package.json
    1. "browserslist": [
    2. "> 1%",
    3. "last 2 versions"
    4. ]
阅读 4161     最后编辑 2022-12-05 12:10
文章补充
评论(0) 发表新评论
  • ...暂无评论...

我是有底线的 评论与点赞5分钟更新一次
回复评论
取消关闭

请先登录