beansflightui
v1.5.4
Published
~component: 相对于component路径 path:'/app/:id' 路由传递参数 在页面内取值 this.$route 从url中取值 this.$route.query
Downloads
14
Readme
beansflightui
乱记
~component: 相对于component路径 path:'/app/:id' 路由传递参数 在页面内取值 this.$route 从url中取值 this.$route.query
{
path: '/app/:id',
props: true, 在path上声明的:id参数 做作为props 参数 传入到组件内部 而不再需要我们通过this.$route获取
props: (route)=>({id:route.query.b}) 也有这种高级用法 http://xxxx?b=456 组件内获取的值 就是456
component: Todo
}命名视图
<router-view></router-view>路由导航守卫
组件内路由钩子
beforeRouteEnter(to, from, next) {
//路由进入
}
beforeRouteUpdate(to, from, next) {
//路由更新
}
beforeRouteLeave(to, from, next) {
//路由离开
}Vuex 调用store的commit()方法 去修改state中的数据
commit -> mutation -> 修改state 定义组成: 基本组成
state: {
count: 0
},
mutations: {
// 第一个参数 state 必须传 第二个参数 是我们要改变的值
updateCount(state, num) {
state.count = num
}
},
actions: {
},
getters: {
},组件内使用 可以通过全局的 this.$store 看属性
使用的话
//取
computed: {
count() { 值
return this.$store.state.count 再没有使用module时 可以这么直接获取
}
}
//修改
methods: () {
setCount () {
thsi.$store.commit('updateCount') // 第一个参数是mutations中的方法名 ，第二个参数是 要修改的值 // 这个地方最多能传2个参数 如果你要传递的数据比较多 那么你只能把它包装成一个对象payLoad{}
}
} VUEX的 state 和 getter state: 等同于 组件内部的data getter: 等同于组件的computed计算属性 只要computed依赖的属性进行更新， 则getter的返回值会自动更新
import {
mapState,
mapGetters,
mapActions
} from 'vuex';
computed: {
...mapState({
actionOptions: (state) => state.doctorPres.actionOptions, // 这种写法 不怕重名
}),
...mapGetters({
}),
...mapGetters(['fullName])
}Vue actions 第一个参数store 它与this.$store是一样的 actions(store) 执行完操作之后 需要调用 store.commit 才能修改到mutations 然后再mutation中修改state上的数据
actions 与 mutation 的区别
actions 不仅能执行异步操作 也能执行 同步操作
store.dispatch 触发action
mutation 只能执行同步操作
store.commit 触发mutation
methods: { ...mapActions([]) ...mapMutations([]) }
Vuex 分模块 模块写在modules中 分模块的话 就相当于给了vuex作用域
默认情况下 VUeX会将mutation放到全局去统一管理， 这带来一个问题 就是 不同模块下的mutation的名字不能重复 加上namespaced之后 不同模块下的mutation可以重名 namespaced: true, 如果不加的话 调用采用 this.xxxx() 在模块内部调用的话 只能采用 this.'模块名/xxx' 千千万万记得写namespace
动态注册模块
多用于某个特殊的模块(也就是只作用个在某个特殊的模块 而其它业务模块根部就用不到)
store.registerModule('c',{ state: { text: 3 } })
Object.prototype.toString.call(xxxx) === "[Object, Object]" 对象判断 if (Object.prototype.toString.call(xxxx) === "[Object, Object]") { return Object.keys(this.props).map(i=>({ key, value: this.props[key], selected: false }))
}
if(Array.isArray(this.props) && this.props.every(i=> typeof i === 'string')) { return this.props.map(i=>({ key: i, value: i, selected: false })) }
return this.props.map(i=>{...i, selected: false})
v-model 只不过是vue的语法糖，它的核心就是在input标签上 自动增加了两个属性 :value="" @input="input" 用:value 绑定了 input输入的值、用@input键入input标签输入的值并实时赋给绑定的value
webpack dev 是可以配置上下文的
module.exports = {
outputDir: process.env.NODE_ENV === 'production' ? 'dist': 'ych5' ,
productionSourceMap: false, // 生产环境是否 生成SourceMap
publicPath: "/h5", //这个配置成 nginx的上下文
devServer: {
publicPath:"/h5", // 这个是重点 nginx的上下文
port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
// '/api': {
// target: 'http://192.168.43.154:8080',
// ws: true,
// changeOrigin: true
// },
'/jsSDk': {
target: 'http://sipm.neusoft.com/',
ws: true,
changeOrigin: true
// pathRewrite: {
// "^/jsSDk": ""
// }
},
}
},发布自己的组件到npm
打包组件
打包脚本
"build:UI": "vue-cli-service build --target lib ./src/components/list/index.js --name lisView --dest listview", -- target lib 关键字 指定你要打包的路径 -- name 打包后的文件夹名字 -- dest 打包后的文件夹名称
打包后的目录分析
demo.html -- 这个没啥用 listview.common.js -- 使用required()的方式引用 listview.umd.js -- 所有的模块化 它都支持 lisView.umd.min.js -- 所有的模块化 是压缩过的
切换到打包好的组件库文件夹，执行yarn init -y
切换到npm源，并登陆npm ()
nrm ls -- 查看当前使用的源 nrm use npm -- 切换到npm源 npm login -- 登陆npm Username: miyaliunian Password: Wf@89341561 Email: [email protected]
发布组件到npm在 你要发布组件的文件夹 内执行命令
npm publish --access public
发布成功之后 切换回淘宝源
nrm use taobao安装依赖