vue常用插件的使用
vue常用插件的使用
1. vue-seamless-scroll
官方文档
使用步骤
1、安装vue-seamless-scroll
npm install vue-seamless-scroll --save
2、引入组件
<vue-seamless-scroll></vue-seamless-scroll>
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
vueSeamlessScroll
},
<template>
<vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="defaultOption">
<ul class="item">
<li v-for="item in listData">
<span class="title" v-text="item.title">span><span class="date" v-text="item.date">span>
li>
ul>
vue-seamless-scroll>
template>
<style lang="scss" scoped>
.seamless-warp {
height: 229px;
overflow: hidden;
}
style>
<script>
export default {
data () {
return {
listData: [{
'title': '无缝滚动第一行无缝滚动第一行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第二行无缝滚动第二行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第三行无缝滚动第三行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第四行无缝滚动第四行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第五行无缝滚动第五行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第六行无缝滚动第六行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第七行无缝滚动第七行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第八行无缝滚动第八行',
'date': '2017-12-16'
}, {
'title': '无缝滚动第九行无缝滚动第九行',
'date': '2017-12-16'
}]
}
}
// 监听属性 类似于data概念,（可选配置，因为大多配置都有默认值）
computed: {
defaultOption () {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
}
},
}
script>
vue-json-viewer
安装版本不宜过旧也不宜过新，针对vue3安装这个版本即可
yarn add vue-json-viewer;
"dependencies": {
"vue-json-viewer": "3",
},
使用插件
<script>
import JsonViewer from "vue-json-viewer";
import "vue-json-viewer/style.css";
export default {
components: {
JsonViewer,
},
}
</script>
<JsonViewer :style="{
minHeight: mainRowHeight,
maxHeight: mainRowHeight,
overflow: 'auto',
fontSize: `${fontSize}px`,
fontWeight: fontWeight,
}"
:boxed="false"
:sort="false"
:expanded="true"
:copyable="true"
:show-array-index="false"
:show-double-quotes="true"
expand-depth="20"
:value="getJSON()" ></JsonViewer>
<script>
import JsonViewer from "vue-json-viewer";
import "vue-json-viewer/style.css";//引入插件样式
export default {
components: {
JsonViewer,
},
data(){
return{
jsonValue:"",
fontSize：“”，
fontWeight:"",
mainRowHeight:"",
}
},
methods:{
getJSON() {
if (typeof this.jsonValue== "string") {
try {
var obj = JSON.parse(this.jsonValue);
if (typeof obj == "object" && obj) {
return obj;
}
} catch (e) {
console.log("error：" + this.jsonValue+ "!!!" + e);
return "";
}
} else {
return this.jsonValue;
}
},
}
}
<script>
2. PDF.js是什么
PDF.js是一个JavaScript库，可以在现代Web浏览器中渲染和显示PDF文件。它的主要作用是将PDF文件转换为HTML5格式，以便在浏览器上进行展示和交互。
PDF.js的主要功能包括：
在浏览器中显示PDF：PDF.js使用HTML5的canvas元素来呈现PDF页面，使得用户可以在浏览器中直接查看PDF文件，而无需依赖外部的PDF阅读器插件。
支持基本的浏览功能：PDF.js提供了一套用户界面，包括缩放、滚动、翻页等浏览功能，使用户能够方便地导航和浏览PDF文件。
支持文本搜索：PDF.js可以对PDF文件进行文本搜索，用户可以输入关键字来查找并定位到相应的内容。
支持页面导航：PDF.js提供了页面导航功能，用户可以跳转到特定的页面，或者在查看多页PDF时进行翻页。
支持缩放和旋转：PDF.js允许用户调整PDF页面的缩放级别，并可以旋转页面以适应不同的阅读需求。
支持批注和标记：PDF.js可以让用户在PDF文件中进行批注和标记，例如划线、画框、添加注释等，以便在阅读或共享时进行交流和标记重点。
总的来说，PDF.js提供了一种在Web浏览器中展示和操作PDF文件的解决方案，使用户能够直接在浏览器中浏览和使用PDF，而无需依赖外部的PDF阅读器插件或专门的PDF编辑工具。
3. Print.js
如果你直接想从这些网站下载这些 PDF 文件，你可以单击一个按钮并执行此操作。但是，可能会出现一些情况，例如用户只想打印这些文件而不是下载它们。
为此，你首先必须下载 PDF 文件，打开它们，然后打印它们。
但是，如果用户点击按钮后可以直接进入打印屏幕怎么办？这将是一种更好的方法，而不是告诉用户下载文件，打开它，然后打印该文件。
这个过程可以在 JavaScript 中通过使用 iframe 标签或第三方 JavaScript 库（如 Print.js）来实现。
window.print 可以直接打印页面，缺点是需要来回在html.body.innerHtml 里替换，容易照成页面闪动 所有优化是使用iframe打印页面或者是pdf，还可以使用pdfjs打印页面
3.html2canvas
正如 html2canvas 的名字所提示的一样，其实现截图的原理实际是将DOM对象进行迭代克隆和解析，按照层叠关系自顶向下逐步绘制到 canvas 对象里，然后利用 canvas 的底层 API toDataURL和 toBlob转换成图片数据，最终可以上传到后台生成截图的在线地址，方便客户进行预览和下载分享。
html-webpack-plugin / vite-plugin-html
项目中需要使用模板html动态处理比如 icon 、title。我的项目里是需要在不同的打包指令下，打包的结果中index.html 中title 和 icon都不一致。之前的项目使用的是 html-webpack-plugin 插件。安装该插件的使用需要注意你项目的webpack版本，安装对应的版本插件。本次因为项目是vite项目，所以采用vite-plugin-html插件。
vue3实现本地开发使用的px转换成vw，px转换成rem方法整理
前言：
项目中如果想本地开发使用px，但是界面上线以后界面是自适应的效果,可以有多种方式来实现效果。
一、px转成vw
1、安装，安装成功后，node_modules 会新增这两个插件包
一、px转成vw
1、安装，安装成功后，node_modules 会新增这两个插件包
2、新增 postcss.config.js 文件
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
"postcss-px-to-viewport-8-plugin": {
// (String) 需要转换的单位，默认为"px"
unitToConvert: 'px',
// (Number) 设计稿的视口宽度
viewportWidth: 1920,
// (Number) 单位转换后保留的精度
unitPrecision: 5,
/**
* (Array) 能转化为vw的属性列表
* 传入特定的CSS属性；
* 可以传入通配符""去匹配所有属性，例如：['']；
* 在属性的前或后添加"*",可以匹配特定的属性. (例如['position'] 会匹配 background-position-y)
* 在特定属性前加 "!"，将不转换该属性的单位 . 例如: ['*', '!letter-spacing']，将不转换letter-spacing
* "!" 和 ""可以组合使用， 例如: ['', '!font*']，将不转换font-size以及font-weight等属性
*/
propList: ['*'],
// (String) 希望使用的视口单位
viewportUnit: 'vw',
// (String) 字体使用的视口单位
fontViewportUnit: 'vw',
/**
* (Array) 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
* 如果传入的值为字符串的话，只要选择器中含有传入值就会被匹配：例如 selectorBlackList 为 ['body'] 的话， 那么 .body-class 就会被忽略
* 如果传入的值为正则表达式的话，那么就会依据CSS选择器是否匹配该正则：例如 selectorBlackList 为 [/^body$/] , 那么 body 会被忽略，而 .body 不会
*/
selectorBlackList: [],
// (Number) 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
minPixelValue: 1,
// (Boolean) 媒体查询里的单位是否需要转换单位
mediaQuery: false,
// (Boolean) 是否直接更换属性值，而不添加备用属性
replace: true,
/**
* (Array or Regexp) 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
* 如果值是一个正则表达式，那么匹配这个正则的文件会被忽略
* 如果传入的值是一个数组，那么数组里的值必须为正则
*/
exclude: undefined,
/**
* (Array or Regexp) 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)
* 如果值是一个正则表达式，将包含匹配的文件，否则将排除该文件 * 如果传入的值是一个数组，那么数组里的值必须为正则
*/
include: undefined,
// (Boolean) 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscape: false,
// (String) 横屏时使用的单位
landscapeUnit: 'vw',
// (Number) 横屏时使用的视口宽度
landscapeWidth: 1920
},
},
}
二、px转成rem
1、安装
npm i postcss postcss-preset-env postcss-pxtorem
2、 新增 postcss.config.js 文件
module.exports = {
plugins: {
'postcss-preset-env': {
autoprefixer: true,
},
'postcss-pxtorem': {
rootValue: 16, // 基准字体大小
unitPrecision: 5, // 转换后的rem保留小数点位数
propList: ['*'], // 要转换的属性，默认转换所有属性
},
},
};
3、其他px->rem的方法：
npm i postcss-pxtorem
vite.config.js 中配置
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import eslintPlugin from 'vite-plugin-eslint';
import resolveExternalsPlugin from 'vite-plugin-resolve-externals';
import topLevelAwait from 'vite-plugin-top-level-await';
import versionUpdatePlugin from './src/hooks/versionUpdatePlugin';
import postCssPxToRem from 'postcss-pxtorem';
// https://vitejs.dev/config/
export default defineConfig((mode) => {
const env = loadEnv(mode.mode, process.cwd());
const now = new Date().getTime();
return {
define: {
// 定义全局变量
__APP_VERSION__: now
},
plugins: [
vue(),
// 版本更新插件
versionUpdatePlugin({
version: now
}),
resolveExternalsPlugin({
//一些全局变量运行时候不报错打包时候报错，为了解决这个问题
jquery: 'jQuery' // 这个名字可以直接打印window，看window上挂的是什么名字，就写什么名字
}),
eslintPlugin({
include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue']
}),
createSvgIconsPlugin({
// 指定需要缓存的图标文件夹
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
// 指定symbolId格式
symbolId: 'icon-[dir]-[name]'
}),
topLevelAwait({
// The export name of top-level await promise for each chunk module
promiseExportName: '__tla',
// The function to generate import names of top-level await promise in each chunk module
promiseImportName: (i) => `__tla_${i}`
})
],
server: {
port: 8080, // 端口号
open: env.VITE_OPEN === 'true' // 是否自动打开浏览器
},
build: {
sourcemap: false,
minify: 'terser',
terserOptions: {
compress: {
pure_funcs: ['console.log'], // 只删除 console.log要放在drop_console的上面
drop_console: false, // 删除所有 console
drop_debugger: true // 删除 debugger
}
}
},
resolve: {
alias: {
'~': path.resolve(__dirname, './'),
'@': path.resolve(__dirname, 'src'),
assets: path.resolve(__dirname, 'src/assets')
}
},
// 重点⬇️！！！！
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/var-css.scss" as *;'
}
},
// postcss: {
// plugins: [
// postCssPxToRem({
// exclude: (file) => {
// return !file.includes('/cockpit/');
// },
// rootValue: 16, //换算基数， 默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
// propList: ['*'] //可以从px更改到rem的属性,值需要精确匹配。
// // 1.使用通配符 * 启用所有属性。 示例：['*']
// // 2.在单词的开头或者结尾使用 *。 ( ['*position*'] 将匹配 background-position-y )
// // 3.使用 与属性不匹配。! 示例：['*','letter-spacing']!
// // 4.将"非"前缀与其他前缀合并。 示例：['*','font*']!
// // 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: false, //（布尔值）允许在媒体查询中转换px。
// // minPixelValue: 0 //设置要替换的最小像素值(3px会被转rem)。 默认 0
// })
// ]
// }
}
};
});
vite中使用的插件
unplugin-vue-components 插件
unplugin-vue-components是一款功能十分强大的插件，旨在简化组件的自动导入和使用，可以帮助我们在Vue项目中自动导入并注册我们使用的任何Vue组件，从而提高开发效率。
- 自动导入：当我们在模板中使用组件时，插件会自动找到并导入相应的组件，无需手动导入。
- 按需加载：支持按需加载，只导入实际使用的组件，减少打包体积。
- 支持多种组件库：可以与多种流行的 Vue 组件库（如 Element Plus、Ant Design Vue 等）兼容使用。
- 自定义配置：允许开发者根据项目需求进行自定义配置。
unplugin-vue-components 和全局注册有什么不同？
与全局注册不同的是，unplugin-vue-components可以静态分析我们的代码，在组件管理方面显得更加智能。全局注册会在bundler输出中会强制包含已注册的组件，无论这个组件是否被使用。这可能会显著增加最终代码的大小，从而降低性能。但是，unplugin-vue-components会分析我们的代码以查看组件的使用位置，从而使tree shaking和代码拆分更加合理有效。此外，unplugin-vue-components不需要我们手动注册每个组件，我们只需要指定components文件夹（如果我们使用的是src/components，则不需要指定）。
unplugin-vue-components还具有其它功能更强大的配置，我们可以借助它执行集成TypeScript类型、创建自定义函数以将组件重定向到特定库以及创建全局转换函数等操作.
和UI库搭配使用
在项目中，我们也会使用到各种UI组件库，但是默认情况下是无法从自动导入和注册UI库组件的，我们需要通过配置resolvers来实现自动导入。unplugin-vue-components插件中Resolvers 是根据组件名称将组件定向到特定包的函数，举个例子，如果我们使用Ant Design 中 Dropdown 组件，则可以将的每次使用重定向到AntD中的Dropdown。
对于许多流行的UI库，unplugin-vue-components包括一个内置的解析器，你可以通过导入并传递给resolvers的config属性来使用它：
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
Components({
resolvers: [
AntDesignVueResolver(),
],
})
自定义的resolver，resolver本质上就是是采用指定组件名称的字符串并返回实际组件名称和包名称的函数。 下面就是一个自定义resolver的示例，它将重定向以Example开头的任何组件的所有用法，并将它们重定向到example-package，并删除Example前缀：
Components({
resolvers: [
(componentName) => {
if (componentName.startsWith("Example")) {
return { name: componentName.slice(6), from: "example-package" };
}
},
],
});
配合TypeScript使用
如何在Vue的ts项目中使用unplugin-vue-components插件呢？我们只需要将components.d.ts添加到我们的tsconfig.js包含列表中。components.d.ts 是包含所有类型的文件，如果你不告诉 TypeScript 包含它，它不会做任何事情。
在大多数情况下，只要安装了unplugin-vue-components插件，就可以生效了。但是，如果你使用的库已经全局注册了组件并且不提供类型文件，unplugin-vue-components 也可以提供了解决方法。我们只要把非 unplugin-vue-components 导入的组件的类型添加到配置中即可。例如，如果你希望unplugin-vue-components包含来自example-package的ExampleComponentOne和ExampleComponentTwo的类型，你可以将配置更改为如下：
Components({
dts: true, // 默认为true，自动启用
types: [{
from: 'example-package',
names: ['ExampleComponentOne', 'ExampleComponentTwo'],
}],
})
自动导入JavaScript和其他非Vue文件
unplugin-vue-components插件默认不支持导入其他文件。但是，我们可以使用另一个unplugin工具来实现此功能：unplugin-auto-import。unplugin-auto-import允许我们无需导入JavaScript函数就能使用它们，虽然它比 unplugin-vue-components配置稍微复杂一些，但它的使用一样简单。
首先，我们需要安装unplugin-auto-import并将其添加到bundler的配置文件中。然后，我们需要在include属性中添加正则表达式来指定要包含的文件。其次，我们需要将预设和自定义包配置添加到imports属性上：
AutoImport({
// 转换的目标文件
include: [
/\.[tj]sx?$/, // match .ts, .tsx, .js, .jsx
],
// imports to include
imports: [
"example-preset", // 某些包unplugin-auto-import包含一个预设，我们可以这样使用
{
"example-package": [
"namedImport", // 声明命名导入的方式
["alisedImport", "exampleAlias"], // Imports 别名。使用example-package中的函数aliasedImport并将其别名为 exampleAlias
["default", "exampleDefault"], // 使用default作为名称来获取default导出.
],
},
],
// auto-import 使用的本地目录.
dirs: ["./src/assets/scripts"],
});
vscod
e的插件
Volar更名为 Vue-Official：这 3 大更新必须知道！！！
写vue3又得把vue2的禁了,那样很麻烦
没有,Volar是vue3的Vetur是vue2的,咋统一?你什么需求?为啥要他们统一?