webpack - vue项目 看到其他人遇到的问题,曾经也遇到过,就直接拿过来了(偷偷懒),用于自己回顾, 1、图片的地址要用require(补充:当你的图片资源放在src目录下的话需要) navList:[ {src:require('../assets/home.png'),txt:"首页",href:"#" } ] 设置background要用 v-bind:style="{'background':'url('+require('../assets/logo.png')+')'}" 2、路由——点击按钮先提交内容获取服务器返回信息后跳转到新页面并显示数据 // 字符串this.$router.push('/home/first')// 对象this.$router.push({ path: '/home/first' })// 命名的路由this.$router.push({ name: 'searchResult', params: { result: text }}) 3、element-坑 用某些表单时自动生成的import和components要删除,不然 IE下报错页面空白 4、element轮播--取消自动播放 用autoplay为false没用,设置interval为0起作用 <el-carousel trigger="click" :interval="0" > 5、element-点击显示大图且大图轮播 坑---大图轮播显示当前点击图片首次点击总是报错从第二次点击开始正常 @click="showCarousel(index)" 图片点击的时候把当前index传进去 showCarousel:function (index) { this.imgIndex=index; this.dialogShow=true; if(this.$refs.carousel){ this.$refs.carousel.setActiveItem(index); }} 调用的方法里修改imgIndex的值,并且把这个变量设置为轮播的initial-index(初始状态激活的幻灯片的索引) <!--弹出框--><el-dialog :visible.sync="dialogShow"> <el-carousel trigger="click" height="620px" :interval="0" ref="carousel" :initial-index="imgIndex"> </el-carousel></el-dialog><!--弹出框--> 6、px和rem混用 我们有时要js获取offsetLeft之类的距离得到的是px如果这时我们用的是rem作单位,混合算一些值的时候统一用px来算,宽度之类直接用offsetWidth来获取px而不是用设置好的rem单位值 7、rem.js的引入(onresize效果也实现) 在src下建一个common(随便起)文件夹存放rem.js文件 自执行方法,这样当页面尺寸改变时rem值也随之改变。 再在main.js里import './common/rem' rem.js内容 (function(doc, win) { let docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { let clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = (clientWidth / 19.2) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window); 8、Class绑定 <i v-else :class="{'el-icon-loading':loading,'el-icon-upload':!loading}" class="avatar-uploader-icon"></i> 9、echarts echarts不能通过Vue.use()全局调用,使用有两种方法 一是在需要使用图标的.vue文件中直接引入 import echarts from 'echarts' 然后 let myChart = echarts.init(document.getElementById('myChart')) 如果想要全局使用,可以在main.js引入 import echarts from 'echarts' 然后 Vue.prototype.$echarts = echarts let myChart = this.$echarts.init(document.getElementById('myChart')) 10、vue+echarts+rem,图表尺寸为rem,点击刷新按钮图表尺寸bug 更改rem.js代码 (function(doc, win) { let docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { let clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = (clientWidth / 19.2) + 'px'; }; if (!doc.addEventListener) return; recalc();//增加这一句代码============================ win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window); 11、父子组件渲染顺序 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 12、router {path:'*', redirect:'/'}//如果路径输入错误重新导航至首页 13、element 走马灯 @change="carouselChange" //轮播切换carouselChange:function (val, oldVal) {}, val是当前索引,oldVal是上一页的索引 14、任何时候当你用了setInterval都请在结束时清除这个定时器clearInterval 别以为你跳转路由渲染新的组件了它就不会继续影响你了_(:3」∠)_,no way 15、vue请求本地json文件 用到了express,在node安装时已经安装了express 在build-webpack.dev.conf.js文件里添加 const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT) //这个位置之后添加 /*添加json文件引入-后可删*/ const express=require('express') const app=express() var carList=require('../src/common/carList.json') var carTypeList=require('../src/common/33.json') var apiRoutes=express.Router() app.use('/api',apiRoutes) /*添加json文件引入-后可删*/ 和 watchOptions: { poll: config.dev.poll, } //这个文件之后添加 /*添加json文件引入-后可删*/ , before(app){ app.get('/api/carList',(req,res)=>{ res.json({ errno:0, data:carList }) }), app.get('/api/33',(req,res)=>{ res.json({ errno:0, data:carTypeList }) }) } /*添加json文件引入-后可删*/ 请求json文件方法 this.$axios.get('/api/carList') .then(res=>{ 16、vue设置button disabled :disabled="addible" addible的值是除了false之外的任何值时都将设置为disabled只有为false才会取消禁用 17、element table的CheckBox如何设置禁用 <el-table-column type="selection" :selectable='checkboxInit' width="60"> </el-table-column> 设置selectable属性 // CheckBox的初始是否可选状态设置 checkboxInit: function (row,index) { if (index === 1 || index === 2 || index === 3){ //这里只是模拟可根据具体需求来写,return 0 就是禁用 return 0 } else { return 1 } }
1、图片的地址要用require(补充:当你的图片资源放在src目录下的话需要)
设置background要用
2、路由——点击按钮先提交内容获取服务器返回信息后跳转到新页面并显示数据
3、element-坑
用某些表单时自动生成的import和components要删除,不然 IE下报错页面空白
4、element轮播--取消自动播放
用autoplay为false没用,设置interval为0起作用
<el-carousel trigger="click" :interval="0" >
5、element-点击显示大图且大图轮播
坑---大图轮播显示当前点击图片首次点击总是报错从第二次点击开始正常
图片点击的时候把当前index传进去
调用的方法里修改imgIndex的值,并且把这个变量设置为轮播的initial-index(初始状态激活的幻灯片的索引)
6、px和rem混用
我们有时要js获取offsetLeft之类的距离得到的是px如果这时我们用的是rem作单位,混合算一些值的时候统一用px来算,宽度之类直接用offsetWidth来获取px而不是用设置好的rem单位值
7、rem.js的引入(onresize效果也实现)
在src下建一个common(随便起)文件夹存放rem.js文件
自执行方法,这样当页面尺寸改变时rem值也随之改变。
rem.js内容
8、Class绑定
<i v-else :class="{'el-icon-loading':loading,'el-icon-upload':!loading}" class="avatar-uploader-icon"></i>
9、echarts
echarts不能通过Vue.use()全局调用,使用有两种方法
一是在需要使用图标的.vue文件中直接引入
然后
如果想要全局使用,可以在main.js引入
然后
10、vue+echarts+rem,图表尺寸为rem,点击刷新按钮图表尺寸bug
更改rem.js代码
11、父子组件渲染顺序
12、router
13、element 走马灯
val是当前索引,oldVal是上一页的索引
14、任何时候当你用了setInterval都请在结束时清除这个定时器clearInterval
别以为你跳转路由渲染新的组件了它就不会继续影响你了_(:3」∠)_,no way
15、vue请求本地json文件
用到了express,在node安装时已经安装了express
在build-webpack.dev.conf.js文件里添加
和
请求json文件方法
16、vue设置button disabled
addible的值是除了false之外的任何值时都将设置为disabled只有为false才会取消禁用
17、element table的CheckBox如何设置禁用
设置selectable属性