美文网首页
记录前端开发中比较有用的模块

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

作者: Cola_Mr | 来源:发表于2022-08-07 00:40 被阅读0次

一、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

相关文章

  • 关于前端模块化开发

    关于前端模块化开发 1 前端中有哪些模块化开发的规范以及实现方案 2 模块化的开发的好处 3 CommonJS

  • 认识Webpack

    要了解Webpack,首先要知道前端模块化开发的概念 前端模块化 模块化的目的是使代码可以重用,模块化在任何开发中...

  • webpack基础笔记

    webpack基础 1.前端工程化 实际的前端开发: 模块化:(js的模块化,css的模块化,资源的模块化) 组件...

  • 我的webpack使用

    webpack作为模块打包机,在前端模块化开发中频繁的被使用。本篇主要记录一些我自己在学习和使用webpack中遇...

  • 前端开发过程中有哪些问题需要考虑?

    前端开发过程中有哪些问题需要考虑? 组件库 模块化 前端业务团队 做的事情沉淀组件库 团队基础沉淀模块化 开发...

  • CSS 的变量

    CSS 变量,又称为 CSS 自定义属性,是前端开发中比较新颖的知识点;但是由于很多前端开发人员专注于使用 UI ...

  • 前端模块化(webpack)

    前言 前端模块化是一种开发管理规范,前端开发发展到现在,已经有很多成熟的构建工具可以帮助我们完成模块化的开发需求,...

  • AMD_CMD_RequireJS

    为什么要使用模块化? 前端模块化开发的价值 参考 最主要的目的: 解决命名冲突 依赖管理 在前端工程潮流下,模块化...

  • web前端学习计划

    前端学习的知识路线:原生js,使用jQuery及编写jQuery扩展,前端模版,前端mvc,模块化开发,mvvm开...

  • 模块化开发

    前端JS模块化开发有两大规范AMD合CMD,下面以我的理解来简单总结一下模块化开发的思想 ,以及js前端常用的AM...

网友评论

      本文标题:记录前端开发中比较有用的模块

      本文链接:https://www.haomeiwen.com/subject/yyoiwrtx.html