vue
vue技术
心宽路阔走天下
这个作者很懒,什么都没留下…
展开
-
https通过nginx反向代理到api接口的端口以及vue的前端项目的路由代理配置
nginx配置https协议以及场景反向代理的处理。1.https通过nginx反向代理到api接口的端口: server { listen 443 ssl; server_name guoyou.store; ssl on; root html; index index.html index.htm; ssl_certificate cer/1_guoyou.store_bundle.crt; ssl_certificate_key ce原创 2022-04-30 09:00:00 · 1496 阅读 · 0 评论 -
windows系统安装vue的devtools插件
1.在github上,下载代码:git clone https://github.com/vuejs/devtools.git2.把persistent改为true3.在devtools目录下,安装包yarn,在构建yarn run build。4.window系统下会报错,如下:5.解决方案:在E:\resource\devtools\packages\shell-chrome\package.json文件中,把rm -rf 命令替换为 rimraf 命令,如下:6.再重新构建:原创 2021-11-18 16:47:36 · 448 阅读 · 1 评论 -
vue自定义组件使用$attrs和$listeners,正确传递属性和v-model的值
/*@Description:@Author: hyh@Date: 2021-07-11 18:46:00@LastEditTime: 2021-07-11 18:46:00@LastEditors: hyh*/ export default {inheritAttrs: true,props: {value: String},data() {return {list: []}},methods: {},computed: {},watch:原创 2021-07-11 22:24:17 · 776 阅读 · 0 评论 -
Error in nextTick: “InvalidCharacterError: Failed to execute ‘setAttribute‘ on ‘Element‘: ‘,‘ is not
记录vue中一次报错:Error in nextTick: “InvalidCharacterError: Failed to execute ‘setAttribute’ on ‘Element’: ‘,’ is not a valid attribute name.”问题所在:是因为xxx.vue页面文件中的template的某个元素标签上多了一个‘,’符号,导致vue无法解释属性所造成的。解决方案是:找到对应的页面,把这个多了‘,’符号元素标签找出来,并把‘,’符号去掉就可以解决...原创 2021-06-29 15:20:53 · 3325 阅读 · 0 评论 -
Do not use built-in or reserved HTML elements as component id
vue里面如果报此错误,肯定是组件名与html的标签某个标签的命名一样,才报此错。所以需要排查组件名,改成非html的标签的名称。原创 2021-06-11 22:11:48 · 362 阅读 · 2 评论 -
axios通过cancelToken对象来取消用户重复提交的请求
axios通过cancelToken对象来取消用户重复提交的请求配置,如下:import axios from 'axios';//获取cancelToken对象const CancelToken = axios.CancelToken;//缓存对应的api和对应的cancelToken实例化对象let cancelTokenMap = new Map();const service = axios.create({ baseURL: process.env.BASE_URL,原创 2021-06-03 17:03:33 · 282 阅读 · 0 评论 -
基于Vue和springboot实现大文件,大图片分片上传
1.前端代码:<template> <div> <div class="container"> <el-upload action class="upload-demo" drag multiple :http-req原创 2021-06-03 09:14:14 · 602 阅读 · 2 评论 -
探索字符串与函数方法的转换
之前在看vue的源码的时候,发现一个渲染函数的方法:new Function(‘width:’+字符串);目前在项目中也尝试此方法,如下:this.$nextTick(() => {if (this.baseInfo.site_code) {new Function(‘width:’ + this.baseInfo.site_code)()}})baseInfo.site_code是函数方法内容的字符串。例如:new Function(‘width:alert(666)’)();原创 2021-05-27 17:45:31 · 446 阅读 · 0 评论 -
web前端批量下载文件和图片探索
1.图片,文件批量下载(不跨域的情况下)import JSZip from 'jszip';import {saveAs} from 'file-saver';import axios from 'axios'const getFile = url => {return new Promise((resolve, reject) => {let obj = {method: ‘get’,url,// responseType: ‘blob’responseType: ‘ar原创 2021-05-26 12:52:46 · 3660 阅读 · 0 评论 -
工具包常用方法汇集,收集中。。。
工具包常用方法汇集export const os = function () {var ua = navigator.userAgent,isWindowsPhone = /(?:Windows Phone)/.test(ua),isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,isAndroid = /(?:Android)/.test(ua),isFireFox = /(?:Firefox)/.test(ua),isChrome原创 2021-05-17 19:07:38 · 75 阅读 · 0 评论 -
IntelliJ IDEA在vue-cli4下,以@开头的文件路径,按ctrl+鼠标左键的跳转的方案
1.在项目的根目录下,新建webpack.config.js文件编写代码:const path = require('path')module.exports = { resolve: { alias: { '@': path.resolve(__dirname, 'src') } }}2.在编辑的file>setting>languages&Frameworks菜单下,配置javascript的Webpack的配置文件路径为,第一步所创原创 2021-04-28 18:47:20 · 1527 阅读 · 5 评论 -
vue正确使用百度地图的方案
方案一:1.在index.html,加入2.在vue.config.js,配置configureWebpack: config => {config.externals = { ‘BMap’: ‘BMap’ }}3.在Address.vue页面 import BMap from ‘BMap’export default {methods: {initMap () {var map = new BMap.Map(‘container’)//创建地址解析器实例var m原创 2021-04-25 11:24:24 · 469 阅读 · 0 评论 -
vue-cli4禁止生产环境输出console.log
configureWebpack: config => {//在production环境禁止console.log输出config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true}原创 2021-04-14 15:20:07 · 866 阅读 · 0 评论 -
vue轮播图插件和页面滚动显示图片插件汇总
1.swiper:https://www.swiper.com.cn/2.vueswiper:https://www.jq22.com/jquery-info15947https://github.com/warpcgd/vue-concise-slider/tree/gh-pages3.WOW.js – 让页面图片滚动显示https://www.npmjs.com/package/wowjshttps://www.dowebok.com/131.html...原创 2021-04-01 11:44:03 · 525 阅读 · 0 评论 -
vue-router scrollBehavior无效的替代方案
问题:页面跳转回不到顶部const router = new VueRouter({ scrollBehavior (to, from, savedPosition) { scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } }})解决方案:router.beforeEach((to, from, next) => { document.documentElement.scr原创 2021-03-31 22:18:18 · 615 阅读 · 0 评论 -
vue3+element-plus搭建后台管理系统的脚手架收集
1.后台管理系统脚手架:https://github.com/lin-xin/vue-manage-system.git原创 2021-03-23 20:16:36 · 959 阅读 · 0 评论 -
vue+electron创建桌面端应用和打包发布
一.先创建一个vue项目:1.创建vue项目: vue create myelectronapp2.选择Vue 3:3.安装完成:4.进入项目的根目录:cd myelectronapp5.运行vue项目:yarn serve6.成功启动vue项目:二.安装election包vue脚手架3.0的插件vue-cli-plugin-electron-builder 帮助vue脚手架直接引入Electron的依赖,并生成相关文件和配置1.安装并调用vue-cli-plugin-原创 2021-03-03 16:15:47 · 857 阅读 · 1 评论 -
elementUI属性事件方法汇总和快速查询
一.basic基础组件Button 按钮### Attributes| 参数 | 说明 | 类型 | 可选值 | 默认值 ||---------- |-------- |---------- |------------- |-------- || size | 尺寸 | string | medium / small / mini | — || type | 类型 | string原创 2021-02-28 09:59:13 · 3402 阅读 · 2 评论 -
vue3新特征汇总与源码分析
vue3新特征汇总与源码分析(备注:vue3使用typescript编写)何为应用?const app = Vue.createApp({})app就是一个应用。应用的配置和应用的API就是app应用的属性和方法。1.应用配置:performance:开启浏览器的性能监控。值为true|falseoptionMergeStrategies:option选项的合并策略globalProperties:扩展实例的属性和方法isCustomElement:判断哪些标签为自定义组件error原创 2021-02-23 16:27:11 · 460 阅读 · 0 评论 -
vue-cli4关闭eslint
1.在.eslintrc.js文件中,注释’@vue/standard’插件module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', // '@vue/standard' ], parserOptions: { parser: 'babel-eslint' }, rules: { 'no-console': proces原创 2021-02-01 14:05:07 · 346 阅读 · 0 评论 -
webpack-图片压缩优化-image-webpack-loader插件
图片压缩插件:image-webpack-loader安装:cnpm install --save-dev image-webpack-loadernpm地址:https://www.npmjs.com/package/image-webpack-loadervue-cli4的默认图片处理配置: webpackConfig.module .rule('images') .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/) .原创 2021-01-30 09:54:57 · 2651 阅读 · 2 评论 -
vue常用插件汇总
持续更新。。。1.html转pdf文件插件html2pdf.js安装方式:npm install --save html2pdf.jsnpm地址:https://www.npmjs.com/package/html2pdf.js/v/0.9.02.复制黏贴插件clipboard安装方式:npm install clipboard --savenpm地址:https://www.npmjs.com/package/clipboard3.拖拉插件vuedraggable安装方式:npm i原创 2021-01-29 18:51:40 · 2207 阅读 · 0 评论 -
webpack-gzip构建压缩优化
1compresison-webpack-plugin 压缩插件插件描述:准备资源的压缩版本,以使用Content-Encoding服务插件安装:npm install compression-webpack-plugin --save-dev2.vue.config.js 配置const compressionWebpackPlugin = require('compression-webpack-plugin')const isProd = process.env.NODE_ENV原创 2021-01-28 16:38:48 · 468 阅读 · 0 评论 -
webpack-cdn打包优化技术
1. vue.config.js配置cdnconst isProd = process.env.NODE_ENV === 'production'//样式和JavaScript脚本的第三方cdn连接const cdn = { css: ['https://cdn.jsdelivr.net/npm/element-ui@2.15.0/lib/theme-chalk/index.css'], js: [ 'https://cdn.jsdelivr.net/npm/vue@2.6.12/di原创 2021-01-28 12:43:39 · 547 阅读 · 2 评论 -
从vue-cli4源码分析,看看做了哪些事情,还可以怎样优化
vue-cli4 从源码分析看vue-cli4为我们做了什么事情1.webpack的全局模块配置:1.1 输出文件的配置1.2 非测试环境下,webpack版本为4时,配置webpackConfig.optimization.splitChunks进行代码分割优化,把node_modules的初始化依赖文件提取到chunk-vendors.js文件中1.3 优化代码块的块ID1.4 js,css在index.html页面引入是,link配置rel=‘preload’ 和给html配置crossor原创 2021-01-27 22:35:22 · 829 阅读 · 0 评论 -
vue.config.js文件的创建与配置,优化
vue.config.js文件简介vue.config.js文件是可选文件,所以一般vue-cli创建项目的时候是没有这个文件,需要在根目录下手动添加vue.config.js文件,这样@vue/cli-service会自动加载vue.config.js文件。原创 2021-01-27 15:24:38 · 3712 阅读 · 0 评论 -
element-ui框架搭建
用vue-cli脚手架整合完vue+vue-router+vue之后,安装element-ui框架:npm i element-ui -S这是项目可能会因一些依赖包的版本问题而报错。重新执行安装命令即可。npm install安装完成全局配置element-ui到项目在main.js文件中加入代码:import Element from ‘element-ui’import ‘element-ui/lib/theme-chalk/index.css’Vue.use(Element,原创 2021-01-24 09:42:31 · 1003 阅读 · 0 评论 -
用vue-cli4脚手架创建vue项目,整合vue-router和vuex
安装vue/cli:npm install -g @vue/cli升级版本:npm update -g @vue/cli创建项目:vue create my-scaffolding按键盘的上下箭头可以移动选项,按回车键可以切换选中和取消选中。选中所需要的选项后,按回车键继续执行创建命令,然后选中2.x版本的vue,按回车键输入Y,按回车键根据项目的框架,选中css的预处理语言后面的选项都选择默认选项,所有一直按回车键。最后创建项目完成。...原创 2021-01-23 23:33:27 · 1006 阅读 · 0 评论