- 博客(28)
- 收藏
- 关注
RSS订阅原创 vue中使用echarts按需引入解决打包体积过大问题
1、先创建一个 echarts.js 文件，我项目中用到的是饼图（pie）以上两种引入方式，在项目中使用后，打包后文件体积依然很大。在 5.0.1 中，引入了新的按需引入接口。再打包的时候发现体积比之前小了 1M 多。2、用到的组件中引入文件。
2023-10-30 14:59:37
801
原创 [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that d
错误信息中提示contentBase 不是有效的配置项（可以看到contentBase不在罗列的有效配置项中）。因为Weback 5 将 contentBase的配置修改为 static。在 webpack.config.js 配置了devServer，通过contentBase 配置了静态资源的路径，但是报错了。
2023-04-13 17:18:57
2499
原创 elementPlus 日期时间选择器设置24小时制失效
elementPlus 日期时间选择器设置 format 和 value-format 后24小时制失效
2022-08-18 16:42:42
3722
原创 vue3 中通过$refs 获取子组件数据
vue2 中获取子组件中的数据方法，可以使用 $refs ，但此方式在vue3中不适用了。问题： 点击删除行的同时修改表格中数据选中状态，需要通过 refs 操作表格中的数据。 具体代码如下：
2022-06-25 15:25:04
3828
1
原创 vue3 ＜script setup＞ 子组件的引入
在vue2中 引入子组件需要通过 注册后方可在模板页面中使用。在 中声明的变量、函数、import 引入的内容，都可以直接在模板页面中使用引入组件：详见 使用组件
2022-06-25 15:10:13
11566
原创 元素设置了 margin 和 padding 为0 ，但还是显示边距问题
元素设置了 margin 和 padding 为0 ，但还是显示边距问题产生原因：因为当前元素设置了：overflow-x: scroll; 没有隐藏滚动条导致的。解决办法：添加如下代码隐藏滚动条::-webkit-scrollbar { width: 0 !important; height: 0 !important; overflow: hidden; display: none; background: rgba(0, 0, 0, 0); opacity: 0
2022-05-26 16:40:52
876
原创 vue学习笔记
笔记脚手架文件结构├── node_modules ├── public│ ├── favicon.ico: 页签图标│ └── index.html: 主页面├── src│ ├── assets: 存放静态资源│ │ └── logo.png│ │── component: 存放组件│ │ └── HelloWorld.vue│ │── App.vue: 汇总所有组件│ │── main.js: 入口文件├── .gitignore: g
2021-10-08 14:50:32
89
原创 Vue 生命周期
1. 生命是生命周期？Vue 实例从创建到销毁的过程，就是生命周期。从开始的创建、数据监听、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程，称之为 Vue 的生命周期
2021-09-26 22:03:10
70
原创 vue watch如何同时监听多个属性
vue watch如何同时监听多个属性业务描述：有三个单选按钮，每个选项的默认值会受到另两个单选按钮的选中与否而改变。需要同时侦听多个属性，开始考虑每个属性单独侦听，发现会有大量重复代码。由于不能同时侦听多个属性，所以考虑将多个属性放在一个对象里面，通过侦听对象来实现对多个属性的侦听。代码如下：watch: { 'isYWYLChange': function (val) { console.log('val====', val) if (val.isYWYL &am
2021-08-31 17:49:34
1842
原创 Vue Router的路由模式 hash 和 history 的实现原理
Vue Router的路由模式 hash 和 history 的实现原理1. hash 模式的实现原理：早期的前端路由的实现就是基于 location.hash 来实现的，其实他的原理很简单， location.hash 的值就是URL中 # 后面的内容如：[https://www.word.com#search](https://www.word.com#search) 它的location.hash的值是 #searchhash 路由模式的实现主要是基于下面几个特点：URL 中的 has
2021-07-19 15:23:20
2969
原创 Element UI进行表单校验的时候，输入正确内容后，还有提示问题
问题：表单中输入正确的内容后，还提示请输入内容部分代码如下：// 表单<el-dialog title="添加用户" :visible.sync="dialogTableVisible"> <el-form ref="formRef" :rules="addUserRules" :model="addUsers"> <el-form-item label="姓名：" prop="name"> <el-input v-model="addUse
2021-04-28 15:01:08
4008
2
原创 vue 导航守卫 & 请求拦截器
全局前置守卫使用 router.beforeEach() 注册全局前置守卫let router = new VueRouter({...})router.beforeEach((to, from, next)=>{ // ...})参数解释： to: 即将进入的目标路由对象 from: 当前导航正要离开的路由 next: function一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数在 2.5.0+ 你可以用 router.befo
2021-04-09 10:35:46
247
原创 vue 实现记住密码
实现功能：记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内不勾选，点登陆时候则清空之前保存到cookie的值，下次登陆需要手动输入大致思路，通过对cookie的存、取、删来实现记住密码与否；选中记住密码，在点击登录的时候将用户名密码存入cookie，每次进入登录页面的时候先读取cookie，如果浏览器的cookie中有账号密码则自动填入登录框，效果图如下：直接上代码HTML 部分：<template> <div class="log
2021-04-08 14:18:41
683
原创 全局引入 vant 后使用 Toast 的问题
Toast 的使用（官方）：1.1 引入import Vue from 'vue';import { Toast } from 'vant';Vue.use(Toast);1.2 使用Toast('提示内容')问题： 当全局引入 vant 时候，直接使用 Toast('提示内容') 不会弹出提示框；解决： 全局引入vant 的时候 组件中使用this.$toast('提示内容')...
2021-04-02 10:41:42
5788
1
原创 vant 表单组件中设置 colon 属性为 true 时候报错
vant 表单组件中设置 colon 属性为 true 时候报错，如下：原因：布尔值要用“：“动态来表示 否则会将布尔值 true 化为字符串形式解决方法：
2021-03-24 16:29:58
887
2
原创 ES6 set 的用法
1. Set是什么？Set 是 ES6 提供的新的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成Set数据结构。2. Set 使用情形用于数组去重let arr = [3, 5, 2, 2, 5, 5];let setArr = new Set(arr) // 返回set数据结构 Set(3) {3, 5, 2}//方法一 es6的...解构let unique1 = [...setArr ]; //去重转数
2021-03-24 13:27:26
4154
原创 Vue 配置跨域问题
我们在使用 vue-cli 工具生成 vue 项目时vue init webpackmy-project-vue在生成的项目结构中，会有一个config > index.js 文件在 index.js 中有一个 proxyTable 的空节点proxyTable 是 vue-cli 脚手架在开发模式下给我们提供的一个跨域的代理中转服务器proxyTable 跨域的基本原理：在开发模式下，webpack 会为我们提供一个 http 代理服务器在我们请求接口的时候，实际上是请求 webp
2021-03-23 13:44:19
154
原创 无法加载文件 C:\Users\32432\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运脚本 ------------- 解决办法
问题：使用 vue 脚手架搭建项目时候出现：无法加载文件 C:\Users\32432\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运脚本，解决办法：管理员身份运行 PowerShell 执行 set-ExecutionPolicy RemoteSigned ，选择输入 Y（ end ）...
2021-03-22 11:15:33
95
原创 vue 中如何使用 less
一、依赖下载使用 npm 下载1 | npm install --save less less-loader或者使用 yarn 下载1 | yarn add less less-loader --dev检查是否安装成功1 | lessc -v二、 项目中使用 lessmian.js 中引入1 | import less from 'less'2 | Vue.use(less)创建一个 .vue 文件，开始使用 less1 | <style lang="less" sc
2021-03-18 15:35:02
233
原创 ElementUi中MessageBox的使用
MessageBox 和 Message不同于一般组件使用 先引入组件 import { 组件名 }再 vue.use(组件名);MessageBox 的用法：先引入组件 import { MessageBox}在 vue原型上挂载confirmVue.prototype.$comfirm = MessageBox.confirmMessage 的用法：先引入组件 import { Message}将 message 挂载为vue原型上的一个属性 $messageVue.prototy
2020-11-27 23:09:53
4464
1
原创 webpack 的安装
webpack 的安装：① npm install webpack webpack-cli -g(不推荐全局安装，webpack4和3 不好共用)② npm install webpack webpack-cli -D (局部安装 --save-dev 等价于 -D， --save 等价于 -s)
2020-11-25 20:36:43
49
原创 cnpm : 无法加载文件 C:\Users\65496\AppData\Roaming\npm\cnpm.ps1，
执行 cnpm 命令时候，出现无法加载文件，如下所示：解决办法：1.在win10 系统中搜索框 输入 Windos PowerShell选择 管理员身份运行2.打开了powershell命令行后,输入 set-ExecutionPolicy RemoteSigned然后更改权限为A再输入 get-ExecutionPolicy 查看当前的状态3.再执行 cnpm 就可以啦...
2020-11-25 20:27:22
222
1
原创 ElementUI表单校验不生效
问题：vue中使用element-ui进行表单校验的时候，必填项按照规则输入，但是一直不通过，问题如下图：解决办法：出现问题的原因是 v-model 和 :model 的区别问题（ v-model 通常是用于 input 的双向绑定，但是它不会向子组件传递数据； 而 ：model 表示绑定自定义的属性，它只是将父组件的数据传递给子组件，没有实现父子组件间的数据双向绑定）。我在 form 表单中使用了 v-model 所以出现了错误，正确使用如下：<el-form :model="logi
2020-11-19 10:20:22
13485
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人