介绍
一般前端项目使用npm做包管理,下载依赖包到项目node_modules文件夹下。
但是发现一个基础项目node_modules文件夹就有几百兆,每个项目都要下载一次,太占硬盘。
pnpm可以解决这个问题,它下载依赖的时候下载到全局文件夹,然后通过硬链接的方式关联到项目node_modules文件夹下。
但是具体配置还挺多的,网上教程也不够详细,这里总结一下配置和使用方法万一有写的不对,欢迎指正。
安装
npm install -g pnpm
先全局安装pnpm
然后打开下面文件,没有就创建
C:\Users\用户名\.npmrc
registry=https://registry.npmmirror.com/
global-bin-dir=D:\greensoft\IDE\pnpm_modules_repo
cache...
element-plus的form表单
介绍
form表单官网介绍非常多,但是很难看懂怎么用的。
这里用个例子介绍常用场景
这里一个form表单设计两个提交按钮,
第一个提交按钮需要校验验证码和邮箱。
第二个提交按钮不需要校验验证码,校验验证码以外的的其他输入框
官方文档
https://element-plus.org/zh-CN/component/form.html
使用
<template>
<div class="register-container">
<el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
<el-form...
pinia持久化存储pinia-plugin-persistedstate
介绍
pinia是vue的状态管理库,默认是保存在内存里如果刷新页面状态会丢失。 pinia-plugin-persistedstate插件将pinia状态变化自动保存在localStorage中,这样页面刷新也不会丢失了。官网 https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
安装
安装:
npm i pinia-plugin-persistedstate
在main.js注册:
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(pi...
可拖动大小的双栏vue页面分享
介绍
分享一个自己写的简单的双栏页面,中间有个拖动条,可以左右拖动来改变左右双栏的大小。感觉自己写很多功能可以用到挺方便的,避免重复造轮子。
代码
TwoColumnsResizView.vue
<template>
<div class="tccontainer">
<div class="sidebar" ref="sidebar">
<slot name="left"></slot>
</div>
<div class="resizer" @mousedown="startResize"></div>
<div class="main-content" ref="main...
element-plus的el-pagination分页控件使用笔记
介绍
element-plus是vue常用的组件库,但是官方文档介绍不是很详细,这里把自己用到的常用点总结一下方便使用
https://element-plus.org/zh-CN/component/pagination.html
典型使用
请求后台接口,得到总页数(page-count),当前页码(current-page),当前页数据,然后填入el-pagination组件中。
点击某个页码的时候调用 @current-change="selectpage"方法
<el-pagination
large
background
v-model:current-page="feedArticlesStore.page"
layout="total, p...
element-plus的checkbox多选控件使用笔记
介绍
element-plus是vue常用的组件库,但是官方文档介绍不是很详细,这里把自己用到的常用点总结一下方便使用
https://element-plus.org/zh-CN/component/checkbox.html
典型使用
对一个数组数据循环,生成列表,然后需要能多选列表中几个选项
这里用到el-checkbox-group 嵌套 v-for循环,再是el-checkbox选项以及显示的内容。
<el-button @click="startvector" class="m-2">开始向量化</el-button>
<div>
<el-checkbox-group v-model="feedArticlesStore.selectedArticles" size=...