web建站教程

  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. php入门
    nodejs
    mockjs
    mysql
    织梦cms
    帝国cms
    git教程
vuejs实现element-plus脚手架的引入介绍
2022年08月11日  浏览(139)
Element-Plus 基于Vue3,面向设计师和开发者的组件库。下面web建站小编给大家介绍一下如何引入 Element-Plus ! 1、安装脚手架 npm install element-plus 2、全局引入 //在main.ts文件中加入以下代码:import ElementPlus from element-plusimport element-plus/dist/index.cssconst app = createApp(App)app.use(ElementPlus) 3、局部引入 import { init } from vue// 局部引入import { ElButton } from element-plusimport element-plus/theme-chalk/el-button.cssi
阅读全文>>
vuejs实现element-plus组件的二次封装
2022年08月11日  浏览(74)
vuejs实现 element-plus 组件的二次封装,下面介绍一下表单的 label 和对应的选择器、输入框的封装代码。 el-input子组件的封装 template div class=base-input flex align-center div v-if=props.blockName{{ props.blockName }}/div el-input placeholder=请输入 v-model=chanValue/el-input /div/templatescript setupimport { computed } from vueconst props = defineProps({ blockName: { type: String, default: }, value: { type: String, default: }})const emits = defineEmits([
阅读全文>>
完美解决el-table设置高度和合计showsummary冲突不显示问题
2022年08月10日  浏览(99)
上次说得 el-table 设置高度后合计 showsummary 不显示解决方法在有分页的时候会有重叠问题,下面给一个更简单的方法! 1、在el-table中加上ref属性 el-table :data=listData v-loading=dataLoading :summary-method=getSummaries show-summary :height=tableHd ref=tableData//show-summary 合计//height 设置高度 2、在updated生命周期函数 this.$nextTick(() = { this.tableHd = document.body.clientHeight + px; this.$refs.tableData.doLayout();}); 注意:一定
阅读全文>>
vuejs安装scss脚手架后使用lang=“scss“出现的报错解决方法
2022年08月10日  浏览(202)
问题描述:已经安装了 scss 相关脚手架,但是使用 lang=scss 还是会报错是什么原因。 1、安装脚手架 npm install sass-loader@7.3.1 --save-devnpm install node-sass --savenpm install style-loader --save//不要直接安装最新版本npm install sass-loader --save-dev 2、在build/webpack.base.config.js中添加: { test: /\.scss$/, loaders: [style, css, sass]}
阅读全文>>
el-table设置高度后合计showsummary不显示解决方法
2022年08月10日  浏览(158)
问题描述:利用 el-table 做一个列表,用 showsummary 显示合计,但是在表格上加上了高度之后,合计不见了。下面web建站小编说一下解决方法! 1、在el-table中加上ref属性 el-table :data=listData v-loading=dataLoading :summary-method=getSummaries show-summary :height=tableHd ref=tableData//show-summary 合计//height 设置高度 2、在updated/mounted生命周期函数 this.$nextTick(() = { this.tableHd = document.body.clientHeight + px; this.$ref
阅读全文>>
vue3中axios的使用方法独到之处
2022年08月09日  浏览(124)
今天给大家介绍一下 vue3 中 axios 的使用方法独到之处? axios 主要是用于向后台发起请求的,还有在请求中做更多是可控功能。 1、安装 npm install axios 2、新建axios.js配置 import axios from axios;import qs from qs;axios.defaults.baseURL = //接口路径//post请求头axios.defaults.headers.post[Content-Type] =application/x-www-form-urlencoded;charset=UTF-8;//设置超时axios.defaults.timeout = 10000;axios.interceptors.request.use( config = { retur
阅读全文>>
利用moment.js插件做一个简单的日历
2022年08月06日  浏览(162)
功能介绍:利用 moment 插件做一个简单的日历,下面web建站小编附上代码介绍。 1、安装命令 npm install moment --save 2、main.js引入方法 import Vue from vueimport Moment from moment;Vue.prototype.$Moment = Moment;Vue.prototype.$formatDateYMD = function(date) { return Moment(date).format(YYYY-MM-DD)} 3、vue代码 template div id=calendar !-- 年份 月份 -- div class=month ul !--点击会触发pickpre函数,重新刷新当前日期 @click(vue v-on:click缩写
阅读全文>>
element组件有哪些你不知道的全局定义方法
2022年08月04日  浏览(163)
功能介绍:想定义一些全局变量,不想在没个页面都都加一些相同的参数,比如当内容过长被隐藏时显示设置 show-overflow-tooltip 。 把下面全部方法引入main.js //点击遮罩层是否关闭DialogElementUI.Dialog.props.closeOnclickModal.default = false;全局去除dialog关闭按钮ElementUI.Dialog.props.showClose.default = false//按esc键是否关闭DialogElementUI.Dialog.props.closeOnPressEscape.default = false//Dialog是否在body里追加ElementU
阅读全文>>
vue-cli脚手架卸载与安装代码总结
2022年08月04日  浏览(134)
今天给大家介绍关于 vue-cli 脚手架卸载与安装代码的分析,其中包括最新版本安装、查看所有版本号、安装指定版本、卸载指令等功能。 安装最新版本: npm install -g @vue/cli//或者yarn global add @vue/cli 查看所有版本号: //查询3.0之前的版本npm view vue-cli versions --json//查询3.0之后的版本npm view @vue/cli versions --json 安装指定版本: //安装2.9.6版本npm install -g vue-cli@2.9.6yarn global add vue-cli@2.9.6
阅读全文>>
el-dialog定义了一个参数实现弹窗可拖动
2022年08月04日  浏览(80)
功能介绍: element 组件 el-dialog 弹窗没有找到可以拖动的功能,下面web建站小编给大家一个方法。 1、新建一个dialogDrag.js import Vue from vue // v-dialogDrag: 弹窗拖拽 Vue.directive(dialogDrag, { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector(.el-dialog__header) const dragDom = el.querySelector(.el-dialog) dialogHeaderEl.style.cursor = move // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(d
阅读全文>>
运行vue函数提示将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称解决方法
2022年08月03日  浏览(73)
问题描述:运行 vue init webpack 报无法将vue项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次错误。 解决方法: 1、安装vue // Vue CLI 2.x 安装npm install vue-cli -g// Vue CLI 3 安装npm install -g @vue/cli// 若想将2.x升级至3npm uninstall -g vue-clinpm install -g @vue/cli// 查看vue版本号C:Program Filesvue -V@vue/cli 4.5.12 2、使用命令 npm config
阅读全文>>
vuejs单元测试运行npm run unit报错解决方法
2022年08月03日  浏览(77)
安装 vue init webpack 的时候看看是否安装了 test 插件,如果安装了可以在 package.json 看到 scripts 有 jest 的几个运行方法,在 devDependencies 可以找到版本号。 npm run unit 运行 如果提示下面错误 npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! test@1.0.0 unit: `jest --config test/unit/jest.conf.js --coverage` 找到test/unit/jest.conf.js文件,看看是否一样 const path = require(path);module.exports = { rootDir: path.resolve(__dirname, ../.
阅读全文>>
vuejs实现部分页面跳转后禁止返回到前一个页面
2022年07月26日  浏览(70)
功能需求:部分页面数据来自接口,执行成功后在用浏览器的返回页面会变空白或报错,用户体验不好,想禁掉部分浏览器的返回功能。 下面给大家介绍一个vuejs的插件 vue-prevent-browser-back 。 1、安装插件 npm install vue-prevent-browser-back --save 2、main.js全局引入 import preventBack from vue-prevent-browser-backglobal.preventBack = preventBack; 3、页面引入 export default { mixins:[preventBack], //在需要的页面引入这
阅读全文>>
keep-alive前进调用接口,后退显示缓存
2022年07月26日  浏览(98)
功能介绍:运用 keep-alive 自带的方法,结合 beforeRouteEnter 和 beforeRouteLeave 方法实现前进重新加载页面,返回调用缓存数据。 1、APP.vue keep-alive v-if=isRouterAlive router-view v-if=$route.meta.keepAlive :key=$route.name //keep-aliverouter-view v-if=!$route.meta.keepAlive :key=$route.name / 2、index.js {path: /index,name: index,component: () =import (../views/index.vue),meta: {title: 首页,keepAlive: true, true设置缓存,flase不设置}} 3、beforeRo
阅读全文>>
vuejs前进刷新,后退缓存功能介绍
2022年07月25日  浏览(132)
功能介绍:做了一个项目,有7、8个页面,想实现前进刷新,后退缓存,最后用了 keep-alive 的一个组件方法。 npm install v-keep-alive-chain 1、main.js import { mergeBeforeEachHook, VKeepAliveChain } from v-keep-alive-chain Vue.use(VKeepAliveChain, { key: cacheTo // 可选的 默认为cacheTo}) // 如果你没有注册过beforeEachrouter.beforeEach(mergeBeforeEachHook()) // 如果有注册beforeEachrouter.beforeEach(mergeBeforeEachHook((to, from, next) = { next
阅读全文>>
vue-roter路由配置的3种模式介绍
2022年07月22日  浏览(125)
根据vue-router官网,我们可以明确看到 vue-router 的 mode 值有3种分别是 hash 、 history 、 abstract ,其中, hash 和 history 是 SPA 单页应用程序的基础。 const router = new VueRouter({ mode: history, routes: [...]}) 默认使用的是 hash 模式,当设置为 history 时,如果不支持 history 方法,也会强制使用 hash 模式。 当不在浏览器环境,比如 node 中时,直接强制使用 abstract 模式。 class vueRouter { constructor(option
阅读全文>>
vue项目优化之防抖案例分析
2022年07月20日  浏览(203)
什么是防抖? 通俗理解,就是我们在点击请求或者点击加载等过程中,只需要点击一次,但由于请求慢,点击了好多次,导致多次请求,防抖就是在点击了好多次之后的最后一次才会请求。 案例分析: !DOCTYPE htmlhtmlhead meta charset=UTF-8 meta http-equiv=X-UA-Compatible content=IE=edge meta name=viewport content=width=device-width, initial-scale=1.0 titlevue项目优化之防抖案例分析/titlescript src=/npm/vue@2/dist/vue.j
阅读全文>>
pc端、安卓端window.open可以打开,ios失效
2022年07月14日  浏览(172)
问题描述: axios 获取链接地址,在pc端和安卓端都可以用 window.open 正常打开,但是用 safari 浏览器打开没反应。 解决方法:用 window.location.href 就可以通用,但是在pc需要在同一个页面替换新页面,所有加个手机端和pc端的判断。 if (this.wap == true) { //手机端 window.location.href = this.Content;} else { //pc端 window.open(this.Content, view_frame);}
阅读全文>>
vuejs项目兼容ie浏览器
2022年07月11日  浏览(190)
问题描述:用 vuejs 做的项目需要兼容 ie9 浏览器及以上浏览器,但是在ie9浏览器上运行直接报错,下面给大家介绍一下解决方法! 1、先安装插件 //babel-polyfillnpm install babel-polyfill --save-dev//es6-promisenpm install es6-promise --save-dev 2、build文件夹下webpack.base.conf.js修改代码 module.exports = { entry: { app: ./src/main.js }, //改成module.exports = { context: path.resolve(__dirname, ../), entry: { app:[babel-polyfill,./src/ma
阅读全文>>
vuejs前端文本对比不同痕迹
2022年07月11日  浏览(134)
功能需求:痕迹对比,就是当前文本和历史修改过的文本有什么区别?把2边不同的文字用不同颜色标记出来! 1、template代码 div class=dialog-mark-diffel-card h3上次修改/h3 div class=compare-report-info v-html=preReportInfo/div/el-cardel-card h3选中记录/h3 div class=compare-report-info v-html=nowReportInfo/div/el-card/div 2、main.js import compareReportInfo from @/utils/compareReportInfo.js;global.compareReportInfo = compareReportInfo; 3、compare
阅读全文>>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 下一页