![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习
hhh
这个作者很懒,什么都没留下…
展开
-
报错: ‘XXXX‘ is declared but its value is never read.Vetur(6133)
1、在VScode工具的设置中找到设置。3、最后关闭项目重新打开即可、报错消失。(在比较靠下多滑动页面哦)。旨在分享~~~~~~~~原创 2022-09-15 14:07:27 · 3037 阅读 · 2 评论 -
vue3.0自定义全局注册拖拽指令
1、首先在util文件中新建文件directives,内容如下。2、在 main.ts 文件中引入并挂载。3、组件中使用方式: v-drag。最后就可以尽情玩耍了,嘻嘻嘻。原创 2022-08-09 14:24:30 · 548 阅读 · 0 评论 -
vue3.0 使用原生websocket通信
本来想使用socket.io-client插件的,但是实操后发现不行,只有另寻他法,最后使用了原生的websoket。1、首先在setup中初始化let socket = null。2、然后在onMounted生命周期里面创建websocket实例代码如下。3、最后别忘记销毁websoket旨在分享~~~~~~.........原创 2022-06-30 16:02:01 · 2650 阅读 · 0 评论 -
路由守卫使用场景: 当前页面编辑内容,点击tab栏是否保存当前页面内容提示
直接上使用方法,本次是使用vue3.01、实现效果:2、思路: 在当前页面编辑内容,跳转到其他页面会触发到页面级路由守卫钩子函数如下(本次用到的是beforeRouteLeave钩子函数): beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from,原创 2021-11-30 11:22:10 · 275 阅读 · 0 评论 -
如何处理vue3.0 创建时, 无法使用键盘上下键切换选项的问题
最新安装环境时,遇到的坑。git创建项目时,不能使用上下键切换选项的界面如下:解决步骤1、处于上图状态时,使用ctrl+c退出当前操作(不是,忽略~~~~);2、输入命令:alias vue='winpty vue.cmd'3、输入命令:vue craete test得到如图,即可进行选择:旨在分享~~~~~...原创 2021-11-17 16:41:08 · 894 阅读 · 0 评论 -
vue Strings must use singlequote报错
问题原因: 其实是开启了Eslint校验错误截图解决办法:1、将双引号改成单引号import Antd from "ant-design-vue" --- import Antd from 'ant-design-vue'2、创建vue.config.js,加入如下代码并重启项目lintOnSave: false, //如果为false,就是取消eslint规则的检查旨在分享...原创 2021-03-10 18:17:59 · 657 阅读 · 0 评论 -
vue 日期的计算
1、计算两个日期的差(时间格式为2020-02-02)DateDiff(date1 , date2) { //date1和date2是2002-12-18格式 var date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日 //根据年 . 月 . 日的值创建Date对象 var date1Obj = new Date(date1Str[0],(date1Str[1]-1),date1Str[2]); var原创 2021-02-22 18:32:14 · 5792 阅读 · 0 评论 -
vue3.0使用a-radio-group,遍历自己的数据而未实现单选操作?
原来这么简单,结果自己写错位置,导致单选变多选,话不多说上代码<a-radio-group name="radioGroup" @change="(ev) => handleRadioChange(ev, item.questionId)"> <a-radio v-for="(value, index) in optionList" :key="index" :value="value.optionId">{{value.optionName}}</a-ra原创 2021-01-28 15:41:15 · 2546 阅读 · 2 评论 -
vue 设置路由拦截时router.beforeEach陷入死循环(已解决)
在优化vue 的路由时,设置路由拦截,陷入死循环,尝试了很多方法话不多说,上代码:1、设置去到指定页面时,要把path修改成指定页面router.beforeEach((to, from, next) => { if(store.state.logined){ next(); }else { //没有登录,去跳转登录页 if(to.path === '/login'){ next(); }else { next({原创 2021-01-06 17:15:39 · 2102 阅读 · 0 评论 -
vue使用element-ui自定义主题色
每个项目都有自己的主题色,接下来看看如何改变主题色。效果图1、element-UI的theme-chalk是使用scss编写的,所以要先安装saccnpm i sass-loader -D//sass-loader依赖于node-sassnpm i node-sass -D2、在项目的静态文件夹下创建一个element-variables.scss文件,写入以下内容:/* 改变主题色变量 */$--color-primary: #f00;/* 改变 icon 字体路径变量,必需 */原创 2020-09-28 14:11:21 · 965 阅读 · 0 评论 -
vue(3.0)项目搭建以及vue.config.js基础配置
前端需要不断学习进步,fighting!1、首先需要安装环境vue install -g vue@cli【vue需要是3.0以上版本,通过vue --version验证】2、通过命令行创建新项目,vue3.0创建项目的命令行与之前有所不同vue init webpack 【项目名】//之前的命令行vue create 【项目名】//vue3.0创建项目的命令行,简单明了3、选择项目配置:选择配置方式:第一个为默认配置,第二个为手动配置(下键切换)选择手动配置后,你可以选择需要哪原创 2020-07-21 10:15:21 · 5673 阅读 · 0 评论 -
vue使用screenful
我在使用的时候不知道一定要判断字段‘screenfull.isEnabled’,我写成了‘screenfull.enabled’,导致一直没有成功,真的好笨。。。。。1、首先要安装screenfull插件,在控制台输入一下代码npm install screenfull.isEnabled2、在需要使用的地方,记得,一定要倒入文件import screenfull from 'screenfull'3、在data中设置变量:data () { return { isFul原创 2020-07-08 17:35:57 · 977 阅读 · 0 评论 -
vue-cli项目在main.js中引入,组件中使用变量报错的解决方法
这个问题真的是太搞了首先,在main.js中@引入文件,webpack不会识别。(修改成相对路径也没用,亲测无效)。1、安装:node-sass、sass-loader、style-loader npm install node-sass --save-dev npm install sass-loader --save-dev npm install style-loader --save-dev 2、安装:sass-resources-loader (如果不安装的话变量会报错)npm原创 2020-07-03 10:42:48 · 1972 阅读 · 0 评论 -
vue打包后打开index.html静态资源找不到了?
百年难遇吧,但是我遇见了,缘分啊!!!!!首先,你是不是npm run build之后打开index.html文件,在浏览器中是一片空白,那么我可能知道方法去解决,哈哈哈哈!话不多说,上代码~~~1、找到你的config文件下面的index.js文件,然后把assetsPublicPath的值从’/‘改成’./’,如图所示:2、在你的build文件下面找到utils.js文件,找到如下代码,加入publicPath:’…/…/’。3、如果修改上述文件后,build还是不成功,那么你需要看看你的路原创 2020-05-22 15:15:37 · 1932 阅读 · 1 评论 -
vue 从gitee上面拉下来自己的项目npm install报错
首先,我觉得太坑了,自己项目拉下来运行还会报错,话不多说,放办法~~~在项目中删除package-lock.json文件和node_modules文件;重新进行如下操作:npm installnpm run dev旨在分享实用原创 2020-05-13 17:22:16 · 2376 阅读 · 0 评论 -
Vue导出文件流方式导出Excel
1、后端返回文本流如下图:2、请求方法:getExcel() {const url = ‘URL地址’;this.$http.post(url, this.filter, {responseType: ‘blob’ //注意在请求是携带”responseType: ‘blob’”}).then(res => {let blob = new Blob([res.data],...原创 2019-10-28 17:54:45 · 1858 阅读 · 1 评论 -
vue导航栏刷新,选中样式不修改(选中状态刷新不消失)
在路径加入获取到变化的index;<router-link v-for="(item,index) in list":key=“item.value” :to="{path:item.path,query:{item:index}}":class="{‘router-link-exact-active’:ind == index}"@click.native=“changeBgc(i...原创 2019-07-27 12:52:27 · 2486 阅读 · 5 评论 -
有关vue的UI组件之VUX,mint-UI,element—UI库,
VUX(推荐)官网:https://doc.vux.li/zh-CN/install/npm.html1、安装完vue-cli后,安装vux:npm install vux --save;//检查package-json里是否存在。2、vux使用less编译源码,所以项目里必须要有less-loader。 npm install less less-loader --save-de...原创 2019-05-12 14:45:46 · 487 阅读 · 0 评论 -
vue-loader+webpack项目配置
首先确定你是否安装了:npm -vnode -v接下来就可以开始迎接洗礼吧!首先进入项目目录:vue init初始化一下你的项目,会出现package.json文件。npm i -D webpack-clinpm i -D webpack创建一个webpack.config.js文件,简单配置如下:'use strict'const...原创 2019-05-19 15:44:18 · 1909 阅读 · 0 评论 -
VUE应用element-UI组件实现动态分页功能
附上代码:<div class="itemProduct" v-for="(item,index) in productList.slice((currentPage-1)*pagesize, currentPage*pagesize)" :key="index"><router-link class="routerLink" to="/detail"><im...原创 2019-04-25 23:26:46 · 4179 阅读 · 0 评论