beansflightui v1.5.4

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.propskey, 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

打包组件

1. 打包脚本

   1. "build:UI": "vue-cli-service build --target lib ./src/components/list/index.js --name lisView --dest listview",
      -- target lib 关键字 指定你要打包的路径
      -- name 打包后的文件夹名字
      -- dest 打包后的文件夹名称

2. 打包后的目录分析

   1. demo.html  									-- 这个没啥用
      listview.common.js 					-- 使用required()的方式引用
      listview.umd.js							-- 所有的模块化 它都支持
      lisView.umd.min.js					-- 所有的模块化 是压缩过的

3. 切换到打包好的组件库文件夹，执行yarn init -y

4. 切换到npm源，并登陆npm ()

   1. nrm ls -- 查看当前使用的源
      nrm use npm -- 切换到npm源
      npm login -- 登陆npm
          Username: miyaliunian
      		Password: Wf@89341561
      		Email: 354849262@qq.com

5. 发布组件到npm在 你要发布组件的文件夹 内执行命令

   1. npm publish --access public

6. 发布成功之后 切换回淘宝源

7. nrm use taobao

8. 安装依赖