vue项目打包后无法运行报错空白页面
控制台报错：解决方式：修改文件 config/index.js 找到assetsPublicPathbuild: { ... //assetsPublicPath: '/', assetsPublicPath: './',//修改 ....}重新打包，运行
Vue 解决部署到服务器后或者build之后Element UI图标不显示问题（404错误）
报错显示：问题原因：（1）查看/build/webpack.base.conf.js文件可以发现，woff或ttf这些字体会经由url-loader处理后在static/fonts目录下生成相应的文件。（2）也就是说实际应该通过/static/fonts/**路径来获取字体图标，而实际却是请求/static/css/static/fonts/**，自然报404错误。解决方式：（1）打开build/utils.js文件，在如下位置添加pu...
vue语法糖.sync
这个也是vue 2.3之后新加的一个语法糖。这也是平时在分装组件的时候很好用的一个语法糖，它的实现机制和v-model是一样的。当你有需要在子组件修改父组件值的时候这个方法很好用
Watch immediate深度监听
这个已经算是一个比较常见的技巧了，这里就简单说一下。当 watch 一个变量的时候，初始化时并不会执行，如下面的例子，你需要在created的时候手动调用一次。// badcreated() { this.fetchUserList();},watch: { searchText: 'fetchUserList',}你可以添加immediate属性，这样初始化的时候也会触发，然后上面的代码就能简化为：// goodwatch: { searchText: {
解决element-ui自定义修改样式问题
使用的是element-ui，如果要修改el-table原始样式1.可以自定义class，为了不影响全局样式<div class="liquidataCase border-padding bg-shadow"> <el-table border :data="tableData" style="width: 100%" highlight-current-row :height="tableHeight"> ...... </el-tabl
element-ui全局自定义主题
在项目中改变 SCSS 变量Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如element-variables.scss，写入以下内容：/* 改变主题色变量 */$--color-primary: teal;/* 改变 icon 字体路径变量，必需 */$--font-path: '~element-ui/lib/theme-chalk/fonts';@imp.
json-server 工具使用
npm i -g json-server json-server --watch db.json 如果运行之后端口重复，更改端口： json-server --watch --port 3001db.json
推荐Node.js跨域问题实用解决方法
注意：app.use(cors())引入必须放在路由引入之前，否则不起作用1、安装中间件cors npm install cors --save2、引入 var cors = require("cors");3、使用 app.use(cors()) 注：在cors()方法中可配置对应白名单等，默认是{ "origin": "*", "methods": "GET,HEAD,PUT,PATCH,POST,DELETE", "preflightContinue.
vue 前端常用加密处理 md5 加密
md5 加密:用户注册时将加密后的密码发送给后端存储当登陆的时候,再将加密后的密码和数据库中加密的密码相匹配。此加密无须解密md5的在vue中的用法:1.安装。npm install js-md5 -D2.使用。（1）项目中引入md5模块。import md5 from “js-md5”（2）在main.js里面将md5转换为vue原型import md5 from "js-md5"Vue.prototype.$md5=md5使用：this.$..
js针对禁用ie浏览器（包括ie11）在内打开网页弹窗提示更好的体验解决方案
js:弹窗选择layerfunction isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) { //layer.alert("请选择使用Microsoft Edge浏览器或者Chrome浏览器更好的体验。"); layer.open({ title: "浏览器兼容提示", conte
vue 添加页面表单添加编辑删除功能
实现功能：自然人和法人切换显示各自的内容 点击添加按钮判断是否有值，有值则提交添加成功 点击编辑编辑当前内容，隐藏添加按钮，显示完成和取消按钮 点击删除当前 点击完成按钮更新当前内容 点击取消当前/*错误提示*/.defendant-error { display: block;}.errors { color: red; position: absolute; font-size: 10px; padding-top: 0px; m.
前端Vue项目解决跨域问题
1.在config/index.js：proxyTable: { '/api': { target: 'http://192.168.10.000:8066',//api地址 changeOrigin: true, pathRewrite: { '^/api': '/' } } },2.页面使用：this.$axios.post("/api/signin",loginParam
vuex存储loading加载
loading.vueconst loading = { state:{ isLoading:false, showModal:true }, mutations:{ BEGIN_LOADING(state){ state.isLoading = true }, END_LOADING(state){ state.isLoading = false }, MODAL_LOADING(state){ .
vuex存储用户信息，保存用户登录信息
新建user.js：const user = { state:{ user:"" }, mutations:{ USER_INFO(state,info){ state.user = info } }, actions:{ saveUserInfo({ commit },data){ commit('USER_INFO',data) } }};export default user组件中login.vue
video.js视频播放功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>videojs视频播放</title></head><link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet"><.
Vue中使用Video.js视频播放器
什么是Video.jsVideo.js是一个有着HTML5背景的网络视频播放器。它同时支持HTM5和Flash视频，简单来说就是HTMl5 和 Flash 视频播放器安装 $ npm install video.jsmain.js中引入import Video from 'video.js'import 'video.js/dist/video-js.css'Vue.prototype.$video = Video使用（代码中有注释说明） <tem
处理vue element-ui 使用moment 解决表格中的时间格式化方案
下载moment.jsnpm install moment --save//或者yarn add moment --savemain.js 引入// 导入时间插件momentjsimport moment from 'moment' // 定义全局时间格式过滤器Vue.filter('dateFormat', function (daraStr, pattern = 'YYYY-MM-DD HH:mm:ss') { return moment(daraStr).fo..
vue element-ui 绑定@keyup.enter事件无效解决办法
一般情况解决办法：在按钮上绑定keyup事件，加上.native覆盖原有封装的keyup事件<el-button type="primary" class="sub-btn" style="width:100%;" :disabled="btnDisabled" :loading="logining" @click.native.prevent="handleSubmit" @keyup.native.enter="handleSubmit">{{loginStr}}</el-bu
Vue js引用警告 “export ‘default‘ (imported as ‘xxx‘) was not found
问题原因：ES6 编译器识别问题如果在public.js这样写会有警告export 'default' (imported as 'xxx') was not foundexport const myMixin= {}解决办法：修改组件中引用js的地方将import Public from './public'改成import * as Public from './public'...
Vue 中多个组件可以共享数据和方法 Mixin 的用法
项目需求：计算表格table的高度，mixin分全局引用和局部引用局部使用新建mixin.jsexport const publicMinxin= { data() { return { screenHeight: document.body.clientHeight, // 默认值 tableHeight: null, // 表格高度 } }, methods: { getTbHeight() { var tool
今日推荐
周排行