Vue 【基础】
文章平均质量分 52
言小溪
一碰编程就上瘾
展开
-
bootstrap 和 ant design css样式 冲突 导致图标移位
/**bootstrap 和 ant design 冲突,导致图标移位*/body .anticon { transform: translate(-0.5px, -3px);}原创 2022-02-12 22:58:37 · 647 阅读 · 0 评论 -
vue3 + ant-design-vue@3.x 根据路由生成 多级递归嵌套菜单
首先全局注册图标import { createApp } from "vue";import { createFromIconfontCN } from "@ant-design/icons-vue";// 注册远程 iconconst Icon = createFromIconfontCN({ // 这个是我自己的图标库,你自己创建要去 iconfont.cn 上创建,看官网教程 https://next.antdv.com/components/icon-cn#%E8%87%AA%E5%AE原创 2021-12-20 19:09:05 · 4216 阅读 · 5 评论 -
vue3 全局表单检验
想加一个全局表单的检验功能,每个 input 上面加又太麻烦import { computed, reactive, watch } from "vue";export function createForm(obj: any): any { let o = reactive(obj); watch(obj, () => { Reflect.ownKeys(obj).forEach((k) => { let value = Refl原创 2021-12-14 23:14:33 · 1005 阅读 · 0 评论 -
vue3 loadsh 防抖功能
loadsh 是一个工具库,我们通常使用 loadsh 的 debounce 函数处理防抖官方API https://www.lodashjs.com/简单使用方法<template> <input @change="onchange" /></template><script setup lang="ts">import { debounce } from "lodash";const onchange = debounce(hel原创 2021-10-31 18:26:11 · 1271 阅读 · 0 评论 -
vue3 transition 隐藏过渡,折叠过渡效果实现
隐藏过渡可以直接使用官方给出的例子// 隐藏过渡效果.fade-enter-active,.fade-leave-active { transition: opacity 0.5s ease;}.fade-enter-from,.fade-leave-to { opacity: 0;}折叠面板效果过渡折叠需要考虑很多方面的问题,例如子元素是否有 padding 或者 margin, 如果有将会造成抖动或者闪烁,需自行排除。如果带有 v-show v-if 的元素原创 2021-10-28 21:46:34 · 4067 阅读 · 1 评论 -
vue3 在 template 模板中使用 VNode 对象渲染
琢磨了半天,其实非常简单自定义组件: VNode可以独立创建一共 VNode.ts 或者 js 文件, 总之就是导出一个Vue组件,你也可以直接在组件里面定义这个对象,然后直接在 template 中使用即可export const VNode = defineComponent({ props: { content:{ type:Object } }, render(): any { return thi原创 2021-10-26 16:32:04 · 4977 阅读 · 1 评论 -
markdown-it 介绍,以及使用,自定义规则
markdown-itmarkdown-it 是前端的一个 markdown 解析库, 将 markdown 解析成 Token 流网上都有很多详细的 token 流解析过程,请先简单看一遍markdown-it解析 - 简书 https://www.jianshu.com/p/39ed59f610d4看完的小伙伴应该一头雾水,下面我们来实践一下添加规则首先,如果你需要解析流呢,就要往他的规则里面添加新的规则 // 添加规则 md.core.ruler.push('规则名',原创 2021-09-16 13:59:00 · 5523 阅读 · 1 评论 -
vue3 初始化项目
目录创建 js 项目创建 ts 项目配置 vue router配置 less创建 js 项目npm init vite-app <project-name>创建 ts 项目npm init @vitejs/app <project-name>会弹出来几个选项,最后选 vue-ts 就行了配置 vue routernpm i vue-router@4.0.01.在 src 下创建 route 文件夹2.创建 index.ts 文件3.写初始化代码import原创 2021-08-25 15:29:14 · 402 阅读 · 0 评论 -
enncy-admin ant design vue 后台管理系统脚手架
github 项目地址 : https://github.com/enncy/enncy-admin参考 ant design vue pro 的界面布局设计除了基础布局,以及项目设置,暂未实现其他功能项目结构├── public│ └── color.less # less 动态主题颜色修改文件│ └── favicon.ico # LOGO| └── index.html # Vue 入口模板├── src│ ├── ap.原创 2021-05-14 23:31:40 · 1698 阅读 · 14 评论 -
vue + ant design vue 搭配 less 动态自定义主题颜色
今天搞了一下午,终于搞成功了 ????,分享给大家看看。首先看一下版本配置"ant-design-vue": "^1.7.4""antd-theme-generator": "^1.2.6","less": "^2.7.3","less-loader": "^6.2.0",less , less-loader和 antd-theme-generator 不能过高,会有bug1. 安装插件npm i antd-theme-generator@1.2.6 less@2.7.3 le原创 2021-05-09 19:53:27 · 4336 阅读 · 12 评论 -
Vuex 页面刷新后数据丢失问题
因为 Vuex 是状态保存,所以页面刷新,数据会丢失,这个时候需要保存数据到本地页面刷新时 > state保存到 localStorage页面进入时 > 获取 localStorage 合并到 stateApp.vue<template> <div id="app"> <router-view></router-view> </div></template><script>ex原创 2021-04-01 23:13:31 · 270 阅读 · 0 评论 -
electron-vue2 项目初始化
不要使用网上或者 github 的模板初始化项目。直接上代码#安装 vuecli 脚手架npm update @vue/cli#初始化 project-name 项目vue create project-name#进入项目cd project-name# 安装 electron-buildervue add electron-builder#安装依赖npm install#运行npm run electron:serve#打包npm run electron:build原创 2021-02-22 20:17:58 · 433 阅读 · 0 评论 -
web前端 几个好用的 CDN 资源仓库
jsdelivr (推荐)https://www.jsdelivr.com/A free CDN for Open Source fast, reliable, and automated使用方法1https://cdn.jsdelivr.net/代码托管平台/用户名/仓库名@版本或者tag/file代码托管平台gh : 从 github 中查找资源npm : 从 npm 中查找资源用户名 : 代码托管平台的用户名,也就是仓库发布者的名字仓库名 : 仓库名@版本或者ta原创 2021-01-24 21:54:33 · 1676 阅读 · 0 评论 -
vue + ant design vue 项目打包优化
废话不多说,直接上代码main.js注释掉 vue 和 antdvVue.use(antd); 这句话一定不能删除antd 变量虽然没有定义,但是,是cdn资源里面的模块,一定要引入进来// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import App from '.原创 2020-12-22 12:28:56 · 3384 阅读 · 10 评论 -
vue + elementui + nodejs 后端 文件上传功能
今天踩了很多文件上传的坑,特此记录总结,方便广大网友查看。废话不多说直接开始1.elementui 上传文件组件官方文档 : https://element.eleme.cn/#/zh-CN/component/upload我们使用拖拽上传vue template 代码<template> <div> <el-upload :action="'none'" :auto-upload="false" drag ref='upload' :on-chan原创 2020-11-17 13:45:57 · 2748 阅读 · 0 评论 -
Vue Cli 4x 新建初始化项目
vue cli 最新版本已经出到 4.5.8 了, 以往的一些配置,命令可能都不一样了最新的vue 项目创建不是以往的 vue init webpack “” 这样很可能会一直卡死,所以多看官方文档是很重要的。那么我们废话不多说,开始教大家新建项目首先更新 vue-clinpm install @vue/cli -g创建项目vue create 项目名实战新建项目这里一路回车等待依赖安装完成,大概100MB 左右创建成功运行npm run server打包发布npm原创 2020-11-13 22:05:19 · 415 阅读 · 1 评论 -
Vue cli build 打包时指定路径
找到 config/index.js 路径的文件找到 build 属性更改成指定路径,相对路径和绝对路径都行,例如下面 // Template for NoFound.html index: path.resolve(__dirname, 'E:/IDEA/Project/blog/src/main/resources/static/index.html'), // Paths assetsRoot: path.resolve(__dirname, 'E:/IDEA/原创 2020-11-07 21:48:17 · 5368 阅读 · 0 评论 -
Web安全 【基础】 请求防篡改和唯一请求(重放攻击)
这里给大家直接上工具js methods://传入json对象,和key(任意字符串,越长越好),获取md5加密getMd5(params,key){ let str = JSON.stringify(this.sort_ASCII(params)) return this.$md5(encodeURIComponent(str+key))}//对json 对象进行 ascii码 排序sort_ASCII(obj) { var arr = new Array(); var num原创 2020-10-11 12:26:09 · 5019 阅读 · 7 评论 -
Vue 项目 使用 lang=“scss“ 已经有了 sass-loader 依赖 还是报错
原因可能是 sass-loader 版本太高的原因:安装7.3.1版本,即可解决问题cnpm install sass-loader@7.3.1 --save-dev原创 2020-10-07 17:18:10 · 699 阅读 · 0 评论