前端开发
文章平均质量分 62
vue全家桶
劰的劰
这个作者很懒,什么都没留下…
展开
-
【React】03.脚手架的进阶应用
create-react-app脚手架,默认配置的是sass预编译语言,项目中用的是sass,无需再处理;但是用的是less/stylus,则还需要自己处理。http-proxy-middleware:实现跨域代理的模块(webpack-dev-server的跨域代理原理,也是基于它完成的)create-react-app脚手架默认webpack规则的修改:直接去暴露的源码中改!重写的目的:让语法包可以识别React的语法,实现代码转换。如果想基于环境变量的方式来改:安装cross-env依赖。原创 2023-10-31 22:25:05 · 520 阅读 · 0 评论 -
yarn create vite报错:文件名、目录名或卷标语法不正确
yarn create vite报错:文件名、目录名或卷标语法不正确原创 2022-11-04 17:37:03 · 2655 阅读 · 4 评论 -
Vite搭建Vue3 + TypeScript 项目(NPM)
NPM搭建Vite + Vue3 + TypeScript 项目原创 2022-11-04 17:13:40 · 916 阅读 · 0 评论 -
Vite搭建Vue3 + TypeScript 项目(Yarn)
npm安装yarn。原创 2022-11-04 15:21:24 · 1760 阅读 · 0 评论 -
安装angular脚手架
angular原创 2022-11-03 10:14:19 · 1149 阅读 · 0 评论 -
前端项目执行命令汇总
vue项目安装依赖: npm install启动项目(默认端口8080):npm run serve指定端口启动项目:npm run serve -- --port 8081构建项目 :npm run buildvant项目npm 安装yarn:npm install -g yarn安装依赖 :yarn install启动项目:yarn serve构建项目 :yarn buildangular项目npm、yarn对比...原创 2022-03-25 10:02:10 · 2575 阅读 · 0 评论 -
<el-input>输入框使用oninput或onkeyup后,v-model双向绑定失效问题
问题输入非数字后,触发onkeyup,输入框显示为空,但是examRequestId值为之前输入的非数字,双向绑定失效<el-form-item label="检查编号"> <el-input size="small" clearable v-model="examRequestId" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="请输入" ><原创 2022-03-18 14:10:34 · 1964 阅读 · 1 评论 -
问题:浏览器自动填充input密码框
问题浏览器会默认将已保存的账号密码 自动填充 到input为type="password"的输入框内(autocomplete="off"不起作用),type ="text" 时不会出现自动填充问题。解决方法1:向账号和密码项前面多加2个input标签,并将第2个input标签的 type 设置为 password,然后通过样式将这2个input输入框隐藏(样式:{width: 0; height: 0; }),自动填充的值转移到这两个隐藏的input框了。方法2:在type="passwor原创 2022-02-15 11:38:05 · 1615 阅读 · 0 评论 -
Vue 动态路由的实现(后台传递路由,前端拿到并生成侧边栏)
前言后台传来当前用户对应权限的路由表(扁平数据),前端通过调接口拿到后处理(后端处理路由)代码后端扁平数据[ {id:1, pId:0, name:'example1', label:'菜单一', path:'/example1', component:'Main', icon:null}, {id:2, pId:0, name:'example2', label:'菜单2', path:'/example2', component:'Main', icon:null}, {id:3,原创 2021-06-04 18:51:28 · 800 阅读 · 0 评论 -
Vue组件(一) - 二次封装ElementUI实现tree树形组件
文章目录功能描述代码base-tree.vue:treeDemo.vue:功能描述基础功能同el-tree代码base-tree.vue:<!-- * @Description: 公共树组件 * @Author: HMM * @Date: 2021-01-11 16:23:23 * @FilePath: base-tree.vue变量: expandNode:是否展开所有节点 isShowFilter: 是否需要节点过滤 treeProps: 树形结构配置项事件: @h原创 2021-05-31 14:19:34 · 1876 阅读 · 3 评论 -
Vue组件(二) - 二次封装Element UI实现TreeSelect 树形选择器
treeSelect.vue<!-- * @Description: 树形选择器 * @Author: HMM * @Date: 2021-05-24 10:27:34 * @FilePath: \demo\src\components\treeSelect.vue--><template> <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle"> &l原创 2021-05-27 17:23:33 · 4397 阅读 · 2 评论 -
Vue - 封装Axios实现全局的loading自动显示效果(结合Element UI)
1. 组件封装(1)在项目中创建一个 axios.js,里面内容是对 Axios 进行二次封装,代码如下:基本原理是通过 axios 提供的请求拦截和响应拦截的接口,控制 loading 的显示或者隐藏。同时在请求失败时还会自动弹出消息提示框显示错误信息。loding 效果这里采用的是 Element UI 中提供的 Loading 组件来实现。而错误消息提示框则用的是 Element UI 中的 Message 组件来实现。内部有个计数器,确保同一时刻如果有多个请求的话,不会同时出现多个 loa原创 2021-04-20 16:34:11 · 1333 阅读 · 0 评论 -
Vue - 自定义Element 主题
命令行主题工具如果你的项目没有使用 SCSS,那么可以使用命令行主题工具进行深层次的主题定制:安装工具首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动,这里以全局安装做演示。npm i element-theme -g安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码。# 从 npmnpm i element-theme-chalk -D# 从 GitHubnpm i https://git原创 2021-03-11 11:09:13 · 216 阅读 · 0 评论 -
vue知识点三:父组件调用子组件函数
child.vue<!-- * @Description: 子组件 * @Author: HMM * @Date: 2021-01-27 09:12:37--><template> <div>childComponent: </div></template><script>export default { name: 'child', methods: { childClick(e) {原创 2021-01-27 14:56:56 · 377 阅读 · 0 评论 -
Vue知识点一:v-show和v-if指令的共同点和不同点?
v-show和v-if指令的共同点和不同点?1.共同点用来控制DOM元素的显示或隐藏2.区别原理:v-show指令:通过控制css中的display设置为none,控制隐藏或显示;元素始终被渲染到HTML,它只是简单的伪元素设置css的style属性,当不满足条件的元素被设置style=“display:none”的样,是通过修改元素的的CSS属性(display)来决定实现显示还是隐藏。v-if指令:v-if是动态的向DOM树内添加或删除DOM元素;满足条件是会渲染到html中,不满足条件时原创 2021-01-27 11:28:04 · 1544 阅读 · 0 评论 -
Vue知识点二:$refs的基本用法
$refs的基本用法ref 有三种用法ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素ref加在子组件上,用this.refs.(ref值)获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref值)获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref值)获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref值).方法() 就可以使用了如何利用v-f原创 2021-01-27 11:34:51 · 36335 阅读 · 0 评论 -
Nginx一个server配置多个location(alias与root的区别)
nginx作为代理服务器,可以配置多个location,通过访问不同路径来访问不同目录。比如:location / 用于访问官网首页,location /docs 用于访问帮助文档 server { listen 8001; #端口号 server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; .原创 2020-06-28 15:07:24 · 7924 阅读 · 1 评论 -
安装 AngularJs2 (npm install -g @angular/cli)报错
原因配置了淘宝镜像,需要替换或删除淘宝镜像替换淘宝镜像npm config set registry http://registry.cnpmjs.org或npm config set registry https://registry.npm.taobao.org参考网址https://www.jianshu.com/p/f3458682cfb9...转载 2019-07-18 10:57:14 · 280 阅读 · 0 评论 -
Angular入门一之环境安装及项目创建
1.安装node.js下载,安装,在终端测试安装是否成功:node -v(查看nodejs版本) npm -v(查看npm版本)下载地址:https://nodejs.org/en/download2.安装angular cli安装typescript(新建项目的时候会自动安装,此时也可以不进行安装):npm install -g typescript安装angular cli :n...转载 2019-07-18 11:27:53 · 262 阅读 · 0 评论 -
Windows:使用nvm安装多个版本node.js
1. 介绍可能同时在进行2个项目,而2个不同的项目所使用的node版本又是不一样的,或者是要用更新的node版本进行试验和学习。这种情况下,对于维护多个版本的node将会是一件非常麻烦的事情,而nvm就是为解决这个问题而产生的,他可以方便的在同一台设备上进行多个node版本之间切换,而这个正是nvm的价值所在,详情可以查看官网NVM官网。2. 安装nvmNVM下载如果已经单独安装了no...原创 2019-07-23 15:23:22 · 5798 阅读 · 1 评论 -
VSCode插件推荐及使用
https://blog.csdn.net/qianbin3200896/article/details/84649977转载 2019-08-27 15:35:11 · 550 阅读 · 0 评论 -
vscode 调试控制台快捷键
方法一:快捷键调试控制台的快捷键是: ctrl + shift + y ;可以快速实现显示和隐藏控制台;方法二:通过功能键选择打开 vscode 编辑器;选择 “查看 ”选项;找到 “调试控制台”;选中点击即可;原文:https://blog.csdn.net/cvper/article/details/79252523...转载 2019-07-18 11:17:47 · 4703 阅读 · 1 评论