$on
push 办法 一个事件绑定多个办法
$emit
npm install @vue/cli -g
npm install @vue/cli -g
cnpm i element-ui -s
应用 element-ui
import App from './App.vue'
import ElementUI from 'element-ui';
Vue.use(ElementUI);
按需加载cnpm install babel-plugin-component -D
module.exports = {
presets: [['@vue/cli-plugin-babel/preset'],
plugins: [
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
] ]
}
插件援用 vue add element
`<el-form inline :model=”data” :rules=”rules” ref=”form”>
<el-form-item label=” 审批人 ” prop=”user”>
<el-input v-model=”data.user” placeholder=” 审批人 ”></el-input>
</el-form-item>
`
应用 rules 进行校验
data(){const userValidator = (rule,value,callback)=>{if (value.length >3){callback()
}else {callback(new Error('用户长度必须大于 3'))
}
}
return {
data:{
user:"sam",
region:"区域二"
},
rules:{
user:[{require:true,trigger:'change',message:'用户名必须录入'},{validator:userValidator,trigger:'change'}
]
}
}
},
应用 form 进行校验
onSubmit(){console.log(this.data)
this.$ref.form.validate((isValid,errors)=>{console.log(isValid,errors)
})
}
应用:validate-status=”status” 管制
showSuccess() {
this.status = 'success'
this.error = ''
},
showError() {
this.status = 'success'
this.error = ""
}, showValidating() {this.status = ""this.error ='validating'},
size
vuex 是一个 vue 对象 响应式 Dep 对象
vue-router hashHistory push 部分路由守卫
路由元信息 {path:'/a',component:HelloWorld,meta:{title:'A'}}
全局路由守卫更改题目(倡议)
router.beforeEach((to, from, next) => {if (this.$route.meta.title) {document.title = this.$route.meta.title} else {document.title = 'ch6-2'}
next()})
vue mixin
Vue.mixin({beforeCreate() {if (this.$route.meta.title) {document.title = this.$route.meta.title} else {document.title = 'ch6-2'}
}
})
路由 API 动静增加路由
addRouter(){
this.$router.addRoutes([{path:'/hello',component:HelloWorld}
])
},
装置 ngnix
装置 homebrew 国内脚本
`/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"`
`/bin/zsh -c "$(curl -fsSL https://raw.githubusercontent.com/Jefsky/CNHomebrew/master/CNHomebrew.sh)"`
ruby -e “$(curl -fsSL https://raw.githubusercontent…)”
brew install nginx
批改 /usr/local/etc/nginx/nginx.conf
#user mac owner;
include /Users/mac/upload/upload.conf;
upload.conf
server {
charset utf-8;
listen 8089;
server_name http_host;
root /Users/mac/upload/;
autoindex on;
add_header Cache-Control “no-cache, must-revalidate”;
location / {
add_header Access-Control-Allow-Origin *;
}
}
执行 sql 脚本
source book.sql;
阿里云收费 https 证书
用户登录
源码剖析
拜访未知门路返回 404
拜访 /xx 从 cookies 中获取 token
token 不存在 看路由是否在白名单中 存在就拜访地址
如果不在白名单跳转登录并拼接地址
如果 token 存在
如果拜访 login 页面间接重定向到主页面
如果不是 login 就拜访用户角色 动静生成路由 并用 replace 模式拜访路由 如果出现异常就革除 token 并拜访 login 并增加路由地址
生成动静路由
从 router 中读取用户角色
如果为 admin 间接合并 asyncrouter
如果为用户 遍历 routes 有权限 遍历 children 并过滤 更新长期的 children 存入后果 而后合并过滤后的数据