vuejs-web建站教程

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

浙里办避坑

百度echarts入门教程

PHP入门

猜你喜欢