vue积累
install出错 有可能是使用git，而git没安装 安装后配置path环境变量 执行 git config --global url."https://".insteadOf git://
设置npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
1、路由定向访问时，加载了缓存的信息
beforeRouteLeave(to, from, next){
this.$destroy(true)
next()
},
解决form表单加载缓存的问题设置一个id使用
beforeRouteLeave(to, from, next) {
//离开时重新加载数据
},
beforeRouteEnter(to, from, next) {
this.$destroy(true)
next()
},
this.$route.meta.isUseCache = false;
to.meta.keepAlive = false;
this.$router.push({ path: '/amlreportmanager/datamanager/productaccadd',meta: {
requiresAuth: true,
keepAlive: false, // 不需要被缓存
}})
this.$router.replace({name:'组件B名称', params: {参数}}, () => { this.warning('test!') }, () => { this.warning('test!') })
<input class="my-number-input" type="number" :placeholder="placeholder" v-model.number="inputModel">
<el-input-number v-model="temp.taac1" :controls="false" :precision="2"/>
:lable-position="clpositiont"
data() {
return {
clpositiont:'left'
}
}
meta: { title: 'productaccadd' ,requiresAuth: true,keepAlive: false},
style="text-align: left;width: 100px;"
解决vue页面不刷新问题(个人下方方法不靠谱，它在每个页面变化时都会触发)
watch:{
'$route' (to, from) { //监听路由是否变化
this.getOptions()
//做操作
}
},
或者
watch:{
$route(){
this.getOptions()
//做操作
}
},
或再watch里边加
$route: {
handler: function(route) {
},
immediate: true
}
监控路径地址变化
'$route.path':function(newpath,oldpath){
if(newpath==="/amlreportmanager"){
}
}
监听普通数
frontPoints(newValue, oldValue) {
console.log(newValue)
}
对象的具体属性监听
computed: {
pokerHistory() {
return this.bet.pokerHistory
}
},
watch: {
pokerHistory(newValue, oldValue) {
console.log(newValue)
}
}
watch:{
"arr":{
handler:function(val,oldVal){
console.log("监听到了arr数据变化");
},
//deep:true,
},
}
判断页面是否第一次加载,打开网站后只能判断浏览器第一次打开这也页面
mounted: function mounted() {
//第一种方法
// if(window.name == ""){
// console.log("首次被加载");
// window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值
// }else if(window.name == "isReload"){
// console.log("页面被刷新");
// }
//第二种方法
debugger;
if (window.performance.navigation.type == 1) {
console.log("页面被刷新");
} else {
console.log("首次被加载");
}
},
不向 history 添加新记录
this.$router.push({path: '/home', replace: true})
//如果是声明式就是像下面这样写：
<router-link :to="..." replace></router-link>
调用当前页的方法
this.$options.methods.mehod.bind(this)();
http请求
this.$http.post('v1/user/select-stage', {stage: stage})
.then(({data: {code, content}}) => {
});
调整表单el-form-item位置 style="width: 300px;text-align: center;"
定向到首页this.$router.go(0);
复用组件时，想对路由参数的变化作出响应
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
//beforeRouteUpdate 导航守卫：
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
// 禁止缓存数据 防止下次选择数据不更新
deactivated () {
this.$destroy(true)
}
//每次都执行的方法放在这
activated () {
this.$destroy(true)
}
架构内容修改
const getters = {
token: state => state.user.token
}
export default getters
this.$store.getters.token
roles.some(role => route.meta.roles.includes(role))
引用方式使用
main.js
import {hasButtonsPermission} from './permission'
Vue.prototype.hasButtonsPermission = hasButtonsPermission
permission.js
export function hasButtonsPermission(permission) {
let myButtons = store.getters.buttons
return myButtons.indexOf(permission) > -1
}
vue消息提醒换行处理
let newDatas = []
const h = this.$createElement
let infos = result.data.split(';<br/>')
for(let i in infos){
newDatas.push(h('p',null,infos[i]));
message: h('div', { on: { click: handleClick }, '查看详情'),
message: h('div', null, [
'这是一个段文字',
h('a',
{ attrs: {
href: 'https://www.jianshu.com/u/639201a5d397' ,
target: '_blank'
}
},
[
h('el-button', {
style: {
marginLeft: '20px'
},
attrs: {
size: 'small',
type: 'primary'
},
on: {
click: this.handleClick
}
}, '查看详情')
]
)
])
///这块还可以安装jsx使用一下方法
message: (
<div onClick={this.handleClick}>
这是一段文字
<a target='_blank' href='https://www.jianshu.com/u/639201a5d397'>
<el-button size="small" type="primary">查看详情</el-button>
</a>
</div>
)
}
this.$message.error({
title: '错误',
message: h('div',null, newDatas),
beforeClose: ()
})
}
elementui el-dialog点击其他区域自动关闭了
:before-close="handleClose"//让用户决定
或 :close-on-click-modal='false'//禁止模态关闭
不显示关闭按钮
:showClose="false"
遮盖层在弹出层上面
:modal-append-to-body="false"
带回调提示信息
this.$alert('请输入正整数或小数！', '错误', {
confirmButtonText: '确定',
type: 'error',
callback: action => {
val.personWrite = ''
}
})
要用渲染函数向子组件中传递作用域插槽，可以利用 VNode 数据对象中的 scopedSlots 字段：
render: function (createElement) {
return createElement('div', [
createElement('child', {
// 在数据对象中传递 `scopedSlots`
// 格式为 { name: props => VNode | Array<VNode> }
scopedSlots: {
default: function (props) {
return createElement('span', props.text)
}
}
})
])
}
数组去重
Array.from(new Set(arr))//[1,1,2]
设置表格里边删除红线划掉
:cell-class-name="delLine"
delLine({ row }) {
if (row.deleted) {
return 'del_line'
} else if (!row.changed) {
return 'red_line'
}
}
可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组：
render: function (createElement) {
// `<div><slot></slot></div>`
return createElement('div', this.$slots.default)
}
可以通过 this.$scopedSlots 访问作用域插槽，每个作用域插槽都是一个返回若干 VNode 的函数：
props: ['message'],
render: function (createElement) {
// `<div><slot :text="message"></slot></div>`
return createElement('div', [
this.$scopedSlots.default({
text: this.message
})
])
}
件 & 按键修饰符
对于 .passive、.capture 和 .once 这些事件修饰符, Vue 提供了相应的前缀可以用于 on：
修饰符 前缀
.passive &
.capture !
.once ~
.capture.once 或
.once.capture ~!
例如:
on: {
'!click': this.doThisInCapturingMode,
'~keyup': this.doThisOnce,
'~!mouseover': this.doThisOnceInCapturingMode
}
对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：
修饰符 处理函数中的等价操作
.stop event.stopPropagation()
.prevent event.preventDefault()
.self if (event.target !== event.currentTarget) return
按键：
.enter, .13 if (event.keyCode !== 13) return (对于别的按键修饰符来说，可将 13 改为另一个按键码)
修饰键：
.ctrl, .alt, .shift, .meta if (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey)
例如
on: {
keyup: function (event) {
// 如果触发事件的元素不是事件绑定的元素
// 则返回
if (event.target !== event.currentTarget) return
// 如果按下去的不是 enter 键或者
// 没有同时按下 shift 键
// 则返回
if (!event.shiftKey || event.keyCode !== 13) return
// 阻止 事件冒泡
event.stopPropagation()
// 阻止该元素默认的 keyup 事件
event.preventDefault()
// ...
}
日期提供快捷默认选项
:picker-options="pickerOptions"
pickerOptions: {
shortcuts: [{
text: '长期有效',
onClick(picker) {
picker.$emit('pick', '99991231')
}
}]
},
var arr = [1,2,3,4,5,6]
console.log([...arr])
var json = {a:'1',b:'2',c:'3'};
console.log({...json})
jquery操作table表格
OLD:控制偶数行样式。
even：控制单数行样式。
全部前置守卫
const router = new VueRouter({ ... })
router.afterEach((to, from) => {
// ...
})
router.beforeEach((to, from, next) => {
// ...
})
mutation(同步)commit action（异步）dispatch
删除重复的数据重复的数据不保留
delete from table where (a,b) in(select a,b from table group by a,b having count(1)>1)
not in 都为null查不出来 这时用not exists
用nvl转化null
删除重复的数据保留一条
delete from table where rowid not in(select max(rowid) from table d group by col)
select * from table where rowid not in(select max(rowid) from table where col1=col1 and col2=col2)
excel导入导出 使用sheetjs
webpack-dev-server 跨域请求处理
安装一下:npm install webpack-dev-server
yarn add webpack-dev-server
devServer: {
hot: true,
inline: true,
contentBase: './dist',
port: '3302',
host: '0.0.0.0',
disableHostCheck: true,
historyApiFallback: true,
compress: true,
proxy: {
'/mock/api/*': {
// target: 'http://10.13.25.128:8888/wtd-api/ui',
target: 'http://127.0.0.1:8086', //线上地址
changeOrigin: true,
secure: false,
pathRewrite: { '^/mock/api': '' },
headers:{
'Origin':'http://127.0.0.1:3302',
'referer':'http://127.0.0.1:3302',
}
},
'/mock/*': {
// target: 'http://10.13.25.128:8888/wtd-api/ui',
target: 'https://gec.10010.com/wtd-api/ui', //线上地址
changeOrigin: true,
secure: false,
pathRewrite: { '^/mock': '' },
headers:{
'Origin':'http://127.0.0.1:3302',
'referer':'http://127.0.0.1:3302',
}
},
}
启动或编译成dist时build 提示NODE_ENV 不是内部或外部命令，属于系统兼容问题
处理办法，在项目下安装cross-env --》npm install cross-env --save-dev 在build命令设置node_env的前边添加cross-env即可
处理问题--The platform "win32" is incompatible with this module
yarn config set ignore-engines true
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API+'/hrapitest']: {
target: `http://hrapitest.crcc.cn/api/hr/`,
changeOrigin: true,
secure: false,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API+'/hrapitest']: ''
}
},
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
index.html
配置全局变量
<!-- 开发环境 -->
<% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
<script>
/* 统一后台 */
// window.SITE_CONFIG['apiURL'] = 'http://192.168.0.117:30304'; // 黄家乐
// window.SITE_CONFIG['apiURL'] = 'http://47.104.202.243:30304'; //一期
window.SITE_CONFIG['apiURL'] = 'http://47.105.171.110';
// window.SITE_CONFIG['apiURL'] = 'http://118.190.154.112:30304' // 132环境
// window.SITE_CONFIG['apiURL'] = 'http://192.168.0.110:30304'; // 张少辉
// window.SITE_CONFIG['apiURL'] = 'http://192.168.0.165:30304'; // 张伟
window.SITE_CONFIG["h5Url"] = "http://testbbc.leimingtech.com";
window.SITE_CONFIG["pcURL"] = "http://testbbc.leimingtech.com";
// 小绿锁
// window.SITE_CONFIG['apiURL'] = 'http://localhost:30304';
// window.SITE_CONFIG['imgURL'] = 'http://localhost:1480';
</script>
<% } %>
<!-- 内网测试环境 -->
<% if (process.env.VUE_APP_NODE_ENV === 'prod:innerTest') { %>
<script>
window.SITE_CONFIG["apiURL"] = "http://10.154.140.50:8081";
window.SITE_CONFIG["imgURL"] = "http://10.154.140.50:8081/";
// window.SITE_CONFIG['apiURL'] = 'http://b2b2c.leimingtech.com';
// window.SITE_CONFIG['imgURL'] = 'http://img.b2b2c.leimingtech.com';
window.SITE_CONFIG["h5Url"] = "http://b2b2c.leimingtech.com/h5";
window.SITE_CONFIG["pcUrl"] = "http://b2b2c.leimingtech.com";
</script>
<% } %>
<!-- 内网生产环境 -->
<% if (process.env.VUE_APP_NODE_ENV === 'prod:innerProd') { %>
<script>
window.SITE_CONFIG["apiURL"] = "";
window.SITE_CONFIG["imgURL"] = "";
window.SITE_CONFIG["h5Url"] = "";
window.SITE_CONFIG["pcUrl"] = "";
</script>
<% } %>
打包命令
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:sit": "vue-cli-service build --mode production.sit",
"build:uat": "vue-cli-service build --mode production.uat",
"build:prod": "vue-cli-service build --mode production",
"build:prodTest": "vue-cli-service build --mode production.testProd",
"build:innerTest": "vue-cli-service build --mode production.innerTest",
"build:innerProd": "vue-cli-service build --mode production.innerProd",
"build:press": "vue-cli-service build --mode production.press",
"build:tencentTest": "vue-cli-service build --mode production.tencentTest",
"build:tencentProd": "vue-cli-service build --mode production.tencentProd",
"lint": "vue-cli-service lint",
"et": "node_modules/.bin/et",
"et:init": "node_modules/.bin/et -i",
"et:list": "gulp themes"
