vue项目中遇到的坑总结（持续更新）

在vue项目stylus中使用媒体查询.header &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;

yw00yw

2674人浏览 · 2019-01-12 19:31:14

yw00yw · 2019-01-12 19:31:14 发布

在vue项目stylus中使用媒体查询

.header >>> h2 
  font-size 30px
  font-weight 100
  line-height 45px
  @media (max-width: 992px)
    font-size 22px

vue项目中的reset.css使用

在写项目的时候，需要重置浏览器的样式，所以需要reset.css
reset.css链接地址：https://meyerweb.com/eric/tools/css/reset/

vue项目中使用滚动条插件 vuescroll

通过使用vuescroll可以美化滚动条，可以很好的和vue项目结合。
链接地址：https://vuescrolljs.yvescoding.org/zh/

使用element table在不该出现滚动条的情况下出现了滚动条

解决方法：查看reset.css

table {
  border-spacing: 0;
  border-collapse:separate;/* 如果值为collapse，则element表格下方会出现滚动条*/
}

git进行项目管理

git常用学习地址：www.bootcss.com/p/git-guide

stylus文件的全局变量的配置

在配置文件build/utils.js解决该问题,在generateLoaders方法的后面定义如下变量：

  const stylusOptions = {  
	  import: [
	    	path.join(__dirname, "../src/assets/css/stylus/variables.styl")
	  ],
	  paths: [
		    path.join(__dirname, '../src/assets'),
		    path.join(__dirname, '../')
	  ]
}

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus', stylusOptions),
    styl: generateLoaders('stylus', stylusOptions)
  }

最后重启并直接使用即可

git分支问题

主分支出现错误：Path must be a string . Received null Use，其他分支正常
可以直接将默认分支切换到正常分支上，然后将主分支删除，并删除本地分支。
然后重新新建分支，并拉到本地即可。然后再重新切换默认分支即可。

动态获取屏幕宽度，响应式设计

// 获取设备宽度
Vue.prototype.getViewportSize = function(){
	return {
		width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
	}
}

setScrollWidth() {
     // 获取屏幕当前屏幕宽度
     let getViewportSize = this.getViewportSize().width
     // 左侧的菜单栏宽度
     const menuWidth = 274

     if(getViewportSize < 768) {
         // 移动端设置 = 设备宽度-左右padding各10px
         this.windowWidth = (getViewportSize - 20)
     }else{
         // PC端设置 = 设备宽度-菜单栏宽度-左右padding各30
         this.windowWidth = (getViewportSize - 274 - 60)
     }
 }

解决element table默认滚动条

.inner >>> .el-table__body-wrapper
	width: 101.5%;

vue项目路由子页面刷新问题

在使用vue做了后台管理系统的时候，子菜单对应子路由组件，但是每当到当前子路由页面时候滚动地方之后，切换路由并再次回到当前路由页面，还是停留在之前的地方，希望是能够停留在头部。看了一下vue官方在路由里面设置
，但是不起作用，可以使用如下方法：
App.vue
通过声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载，这边定义了

<template>
	<div id="app">
		<keep-alive>
			<router-view  v-if="isRouterAlive" />
		</keep-alive>
	</div>
</template>

<script>
export default {
	name: 'App',
		// 配置路由下的页面刷新
		provide() {
			return {
				reload: this.reload
			}
		},
		data() {
			return {
				isRouterAlive: true
			}
		},
		methods: {
		reload() {
			this.isRouterAlive = false
			this.$nextTick(() => {
				this.isRouterAlive = true
			})
		}
	}
}
</script>

然后在需要当前页面刷新的页面中注入App.vue组件提供（provide）的 reload 依赖，然后直接用this.reload来调用就行
File.vue

export default {
		name: 'File',
		// 实现路由下的页面刷新，需在app.vue中设置
        inject: ['reload'],
        mounted() {
            this.reload()
        }
	}

深入理解和学习可以查看别人写的

element ui插件的日期格式化，change事件不管用

<el-date-picker
    v-model="dateValue"
    type="date"
    placeholder="选择日期"
    size="mini"
    popper-class="dataInfo"
    :popper-append-to-body="false"
    value-format="yyyy-MM-dd"
    default-value
    @change="handleDate"
>
</el-date-picker>

data () {
    return {
         dateValue: new Date()
     }
 }

接口联调

config/index.js

proxyTable: {
 '/api': {
    target: 'http://api.komavideo.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

 getList() {
   this.$http.get('/api/news/list').then((res) => {
        console.log(res)
    }).catch((e) => {
        console.log('请求失败'+e) 
    })
}

这块单词写对，路径写对，一个单词写错了，研究了大半天。

axios post请求到的数据为空

import Qs from 'qs'
Vue.prototype.$qs = Qs

// axios post 测试
let data = this.$qs.stringify({
        FertSiteID: 24,
        PageIndex: 1,
        PageSize: 2,
        sign,
        time
})

this.$http.post('/api/Check.ashx', data ).then((res) => {
    console.log(res.data)
}).catch((e) => {
    console.log('请求失败'+e) 
})

用webpack打包vue工程之后，在浏览器中能够看到vue组件的源码

将 config/index.js 中 build 下的 productionSourceMap: true, 改为 productionSourceMap: false, 重新打包发布即可

vue中定义全局公共js方法

tools.js

let tools = {
    formatDate: () => {
        var date = new Date();
        date.setDate(1);
        var month = parseInt(date.getMonth()+1);
        var day = date.getDate();
        if (month < 10) {
            month = '0' + month
        }
        if (day < 10) {
            day = '0' + day
        }
        return date.getFullYear() + '-' + month + '-' + day
    }
}

export default tools

main.js

// 引入自定义工具
import tools from './assets/js/tools'
Vue.prototype.$tools = tools

使用：
this.$tools.formatDate()

计算属性中使用箭头函数报错

computed: {
	salesSum: function() { // 不能使用箭头函数，this指向的是window
		let total = 0
		for(let i = 0 ; i < this.tableData.length ; i++) {
			total += this.tableData[i].sales
		}
		return total
	}
}

vueRouter路由默认进入第一个子路由

{
   path: '/home', 
   name: 'Home',
   component: Home,
   redirect: '/home/file', // 重定向
   children: [
       {
           path: 'file',
           name: 'File',
           component: HomeFile
       }
   ]
}

js对象拼接问题

1. 例如：
2. {ID: "1", RelationGUID: "LiuTao", Name: "LiuTao", IDCard: "LiuTao", Sex: "1", …}
3. 使用“+”将上面的对象和任意字符拼接，会自动转换为[object Object]appid
4. 解决方法如下：
handleParams(data) {
     var str = ''
     for(let key in data) {
         if(typeof data[key] == 'object') {
             data[key] = JSON.stringify(data[key])
         }
         str += key + data[key]
     }
     return md5(appsecret+str+appsecret)
 }
#### 原来的输出结果：FertSiteID24Customer[object Object]appid39387298290402342341
#### 处理后的输出结果：FertSiteID24Customer{"ID":"1","RelationGUID":"LiuTao","Name":"LiuTao","IDCard":"LiuTao","Sex":"1","FertSiteID":"24","Telephone":"12345678911","Birthday":"2018-12-10","AreaGroupGUID":"LiuTao","Address":"LiuTao","LandArea":"10","CumulativeNumber":"10","CumulativeRMB":"10","UserCreateTime":"2018-12-10","IsFertilizerSite":"1","IsGet":"1","Remark":"LiuTao","IsDeleted":"0"}appid39387298290402342341

请求地址报504错误

在这里插入图片描述
在proxyTable中设置代理需要加http://

静态资源找不到问题

找到 config->index.js里面，如下修改
找到 build->utils.js

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^