记录前端开发中比较有用的模块

一、v-emoji-picker

表情包插件

二、vue-json-excel

将数据导出成excel表格

三、vuedraggable

元素拖拽组件

四、vue-stick

瀑布流组件

五、momentjs

时间处理组件

六、virtual-list-scroll

滚动组件

七、mescrolljs

高性能滚动组件

八、sortablejs

拖拉组件

九、Pinia

状态管理插件，与vuex功能差不多，对vue3支持比较友好。

十、anywhere

快速创建一个本地web服务器
安装 npm install -g anywhere
使用 anywhere

十一、vue-virtual-scroll-list

vue虚拟列表滚动组件

十二、driver.js

页面引导库

十三

postcss-plugin-px2rem

用于将项目中的px自动转换成rem

// vue.config.js中加入配置
css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue: 75, //换算基数， 默认100  这样的话把根标签的字体规定为1rem为75px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
              // unitPrecision: 5, //允许REM单位增长到的十进制数字。
              //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
              // propBlackList: [], //黑名单
              exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
              // selectorBlackList: [], //要忽略并保留为px的选择器
              // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
              // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
              mediaQuery: true, //（布尔值）允许在媒体查询中转换px。
              minPixelValue: 0 //设置要替换的最小像素值(3px会被转rem)。 默认 0
            }),
          ]
        },
      }
    },
  }

lib-flexible

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。

import { createApp } from "vue";
import App from "./App.vue";

// 直接在入口文件引入就好
import 'lib-flexible'

const app = createApp(App);
app.mount("#app");

注：当设计稿不是750px，则要修改postcss-plugin-px2rem插件配置中的rootValue基础单位（设计稿宽度 / 10px），还有种情况如设计稿1080px，理论上postcss-plugin-px2rem的基础单位应该设置为108px，但是却设置成了50，则需要写一段函数在网页加载之后执行纠正像素单位，如下代码：

function htmlFontAdjust () {
  const winWidth = document.documentElement.clientWidth; 
  const Ohtml = document.getElementsByTagName("html");
  // 已宽度为1080px作为基准开发，rem基础单位设置成了 1rem = 50px
  // 应用到了lib-flexible插件，会自动设置html的font-size为屏幕宽度-10，所以计算时候要讲原本postcss-plugin-px2rem插件对应的比例除以10
  const htmlFont = (winWidth / 1080) * (50 - 10)
  Ohtml[0].style.fontSize = htmlFont + "px"
}

十四 Tailwind CSS

Tailwind CSS 是一个实用且高度可定制的 CSS 框架。它让开发者通过简单地添加类名来轻松创建任何样式，无需编写自定义 CSS。与其他 CSS 框架相比，Tailwindcss 更加注重可定制性，因此可以更好地满足特定项目的需要。

十五 Shadcn UI

Shadcn UI是一个使用 Radix UI 和 Tailwind CSS 构建的可重用组件库。具有优秀的设计和良好的用户体验。它提供了许多实用的组件，如日期选择器、分页控件等，而且易于使用并且高度可定制。

十六 gsap

高性能js动画库

十七 vueuse

vue的工具函数集合，支持vue2和vue3

最后编辑于：2023.12.24 13:00:08