链接：https://bbs.huaweicloud.com/blogs/336122一、前言Vuex提供了state状态统一管理树，开发者可以在vue中用computed计算属性接收这些公共状态以便使用。当然，也可以在接收原值的基础上对这个值做出一些改造，如：computed:{ sex:function(){ return this.$store.state.sex + '加个字符串,算是改造' } }但是，如果其他组件也要使用这种改造方式去改变这个值，那你可能不得不去复制粘贴这个函数到别的组件中。为了解决这个问题，vuex本身提供了类似于计算属性的方式，getters可以让你从store的state中派生出一些新状态，当然如果不是多个组件要用到这个状态，或者说每个子组件用到的派生属性不一样，那么，你完全可以不用getters。其实，Vuex的出现是为了解决组件间的通信问题。如果你的操作或者数据不涉及到公共操作，只是单一组件操作，请务必不要把这些状态值或者function存储到vuex中，因为vuex会把自身挂载到所有组件上,不管当前组件是否用到里面的东西，因此这事实上肯定增加了性能的损耗，注意是肯定，因为你很难保证每个子组件都用到同一个状态，除非是路由这样的特殊状态，当然路由的事情也无需归vuex管理，在后面vue-router中会讲到。二、gettersVuex 允许在 store 中定义“getter”（可认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。说白了，就是vue的computed,如果你了解computed的话，那你可以像使用computed一样去使用getters,当然还是有点区别的。state.js let state = { from: 'china', arr: [2, 3, 1, 4, 6] } export default stategetters.js // 第一个参数是state let address = (state) => { return '国籍:' + state.from } // 第二个参数可以访问getters let addressMore = (state, getters) => { return '其他描述' + getters.address } // return 一个function,这个function可以传参,当然这个function最后会返回一个具体的数值 //本例中这个方法用于查询state中的arr数组是否存在某个值 let findArr = (state) => (number) => { let ifExit = state.arr.find((n) => n === number) // arr.find是ES6语法中数组的扩展 if (typeof (ifExit) === 'undefined') { return false } else { return true } } export {address, addressMore, findArr}关于getters如何使用，可以看一下上面代码注释，这里重点介绍一下getters和computed的不同，就是上面的第三种用法。computed的一个缺点就是不能传参，假设你要去判断一个数组里是否存在某个值，那你没法将某个值传到computed中去；而getters则没有这个问题，有些对ES6语法使用较为吃力的同学可以看下面的简易版本,来看看findArr究竟做了什么。let findArr = function(state){ // 返回一个匿名函数 return function(number){ // 如果有相同的则返回n，如果找不到则返回undefined let ifExit = state.arr.find(function(n){ return n===number }) if (typeof (ifExit) === 'undefined') { return false } else { return true } } }最后我们在子组件中展示一下效果<template> <div> <div>{{from}}</div> <div>{{from2}}</div> </div> </template> <script> // import { mapGetters } from 'vuex' export default { computed: { from: function () { return this.$store.getters.address }, from2: function () { return this.$store.getters.addressMore } }, created () { console.log(this.$store.getters.findArr(2)) console.log(this.$store.getters.findArr(7)) } } </script>结果如下所示.三、mapGetters 辅助函数关于辅助函数的使用和对象展开符的使用，有需要的童鞋自学下。<template> <div> <div>{{from}}</div> <div>{{from2}}</div> </div> </template> <script> import { mapGetters } from 'vuex' export default { computed:mapGetters({ 'from': 'address', 'from2': 'addressMore', 'find': 'findArr' }), created () { console.log(this.find(1)) // 由于getters已经通过computed挂载到当前实例,所以你不需要再通过this.$store.getters的方法去访问 console.log(this.$store.getters.findArr(2)) console.log(this.$store.getters.findArr(7)) } } </script>四、…mapGetters<template> <div> <div>{{from}}</div> <div>{{from2}}</div> </div> </template> <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters({ 'from': 'address', 'from2': 'addressMore', 'find': 'findArr' }) }, created () { console.log(this.find(1)) // 由于getters已经通过computed挂载到当前实例,所以你不需要再通过this.$store.getters的方法去访问 console.log(this.$store.getters.findArr(2)) console.log(this.$store.getters.findArr(7)) } } </script>最后再说一句，很多情况下你是用不到getters的，请按需使用，不要用getters去管理state的所有派生状态。如果有多个子组件或者说子页面要用到，才考虑用getters。五、拓展阅读《Vue进阶（幺肆捌）：Vuex辅助函数详解》《Vue进阶（四十三）：Vuex之Mutations详解》

Vue的生命周期钩子核心实现是利用,发布订阅模式,将订阅模式先把用户传入得生命周期钩子订阅,然后在创建组件得过程中一次执行对应得钩子方法 1. `beforeCreate:`页面切换(进入组件时第一个执行得生命钩子)当前阶段得data、methods、computed、watch上属性都无法访问,当然了当前dom 没有渲染也是无法访问` 2. `created` :在实例化创建完成之后,当前阶段已经完成数据观测,可以访问使用数据只是更改数据不会触发updated 函数,可以做一些初始数据得获取,在当前阶段无法与Dom进行交互 3. `beforeMountdom`:挂载前(打包话就是页面元素渲染前执行的函数),在当前阶段虚拟Dom已经创建完成,即将开始渲染,在此时可以对数据进行修改，不会触发updated 4. `mounted` :在组件元素挂载完成之后执行,这时真是Dom已经挂载的完成,数据已经双向绑定,可以访问当Dom节点,可以通过$refs 属性拿到Dom节点. 5. `beforeUpdate`:发生在更新前，也就是响应数据发生更新,虚拟dom重新渲染之前被触发,可以在当前阶段进行更改数据,不会造成重渲染. 6. `updated`: 发生在更新完成之后，当前阶段Dom已经更新完毕 7. `beforeDestroy`:发生在实例销毁之前,在当前阶段实例完全可以被使用,大多这一阶段做一些善后工作,清除定时器. 8. `destroyeyd`: 发生在实例销毁之后,在当前阶段实例单独余下一个空的dom空壳 #### 发送异步请求,一般放在那个钩子函数为什么 可以放在`created`、 `beforeMount` `mounted` 中进行调用,因为在这三个钩子中`data`已经创建，可以将服务端返回数据的进行赋值 一般在`created` 钩子进行异步请求数据,因为最早的拿到服务端数据,减少`loading`时间 主要原因是因为,`created` 钩子函数执行是就可以拿到`data`内得数据,这也是最早可以设置数据得地方 只是这时dom还未能渲染.,需要等到 `mounted`执行完成才可以拿到渲染Dom元素. #### 第一次页面加载会触发那几个钩子 `beforeCreate` -> `created` -> `beforMount` -> `Mounted` #### 那个钩子可以进行dom操作 `mounted` 在创建之前，Vue已经将编译好的模板挂载在页面上,所以在`mouned`中可以访问操作dom #### 父子组件嵌套，父子组件和子组件生命周期钩子执行顺序是什么 加载过程: 父`beforeCreate` 、 父`created` 、 子`beforeMount` 、 子`beforeCreate` 、 子`created` 、 子`beforeMount` 、 子`mounted` 、 父`beforeMount` 、 父`mouned` 更新过程: 父`beforeUpdate` 、 子 `beforeUpdate` 、 子`updated` 、 父 `updated` 父组件的更新过程 父`beforeUpdate` 、 父`updated` 销毁过程: 父`beforeDestory` 、 子 `beforeDestory ` 、 子`destroyed` 、 父`destroyde` #### 父子组件嵌套时，父组件视图和子组件视图谁先渲染, 子组件先渲染,毕竟做老爸的肯定要让这点儿子拉。 #### keep-alive有哪些生命周期 `activated` 和 `deactivated` 当组件被激活时，触发钩子函数,当组件被移除时触发钩子函数`eactivated` #### 问题来了,组件加入了keep-alive 第一次的进入组件会执行哪些函数生命钩子函数 `beforeCreate`、 `created` 、 `beforeMounte`、 `mounted`、 `activated` #### 如果加入了keep-alive 第二次或是第N次进入组件会执行哪些哪些生命钩子函数. `activeed`(缓存了) #### 简答了解一下生命周期的实现原理 在Vue的构造函数中接收一个配置对象,当然了就是我们的生命钩子函数，但是在构造函数已经确定了，执行的过程.看代码 ``` class Vue{ constructor(options){ options.berforeCreate().bind(this) this.$data = options.data //实现在创建前无法访问data和 el options.created().bind(this) options.berforeMounte().bind(this) this.$el = document.qureySelector(options.el) options.Mounted().bind(this) } } ``` 在创建组件实例时就会将生命钩子传入,当然了执行顺序已经确定了.通过我们在不同钩子函数之后执行绑定data和el实现数据视图在不同钩子的数据体现.

概念路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现，并完成资源的分发后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由2).前端路由是依靠hash值(锚链接)的变化进行实现前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系前端路由主要做的事情就是监听事件并分发执行事件处理函数Vue Router简介它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue RouterVue Router的特性支持H5历史模式或者hash模式支持嵌套路由支持路由参数支持编程式路由支持命名路由支持路由导航守卫支持路由过渡动画特效支持路由懒加载支持路由滚动行为Vue Router的使用步骤导入js文件<script src="lib/vue_2.5.22.js"></script><script src="lib/vue-router_3.0.2.js"></script>12添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，to属性的值会被渲染为#开头的hash地址<router-link to="/user">User</router-link>1添加路由填充位（路由占位符）<router-view></router-view>1定义路由组件var User = { template:"<div>This is User</div>" }1配置路由规则并创建路由实例var myRouter = new VueRouter({    //routes是路由规则数组    routes:[        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性        //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象        {path:"/user",component:User},        {path:"/login",component:Login}    ]})123456789将路由挂载到Vue实例中new Vue({    el:"#app",    //通过router属性挂载路由对象    router:myRouter})12345补充：路由重定向：可以通过路由重定向为页面设置默认展示的组件在路由规则中添加一条路由规则即可，如var myRouter = new VueRouter({    //routes是路由规则数组    routes: [        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可        { path:"/",redirect:"/user"},        { path: "/user", component: User },        { path: "/login", component: Login }    ]})123456789分类嵌套路由嵌套路由最关键的代码在于理解子级路由的概念：比如我们有一个/login的路由那么/login下面还可以添加子级路由，如:/login/account/login/phone动态路由补充：1.我们可以通过props来接收参数2、还有一种情况，我们可以将props设置为对象，那么就直接将对象的数据传递给组件进行使用3、如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式。命名路由给路由取别名编程式导航调用js的api方法实现导航写在最后✨原 创 不 易 ， 还 希 望 各 位 大 佬 支 持 一 下 \textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下点 赞 ， 你 的 认 可 是 我 创 作 的 动 力 ！ \textcolor{green}{点赞，你的认可是我创作的动力！}点赞，你的认可是我创作的动力！⭐️ 收 藏 ， 你 的 青 睐 是 我 努 力 的 方 向 ！ \textcolor{green}{收藏，你的青睐是我努力的方向！}收藏，你的青睐是我努力的方向！✏️ 评 论 ， 你 的 意 见 是 我 进 步 的 财 富 ！ \textcolor{green}{评论，你的意见是我进步的财富！}评论，你的意见是我进步的财富！————————————————版权声明：本文为CSDN博主「几何心凉」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/JHXL_/article/details/122660700

转载自：原文链接：https://blog.csdn.net/weixin_53072519/article/details/122556672高德地图API官网：高德开放平台 | 高德地图API。由于博主是基于前端 Vue 框架进行开发的，所以针对地图 JavaScript API 结合 Vue 展开介绍。一、案例效果二、开发准备        需要注意想要使用 JS API 必须注册账号并获取 key 值。1. 注册高德开放平台账号        正常输入个人信息注册即可。2. 创建应用添加 key 值        注册成功之后，进入控制台，然后点击创建新应用；        填写名称应用名称和类型之后就可以看到已创建的应用了；        接下来点击“添加”为应用添加 key 值；        注意此处我们应选择 Web 端(JS API)；        点击提交后，key 值获取成功。三、项目中使用地图组件1. npm 获取高德地图 API        首先在 Vue 项目中通过命令 npm i @amap/amap-jsapi-loader --save 获取高德地图 API； 下载成功之后就可以在自己的项目中使用地图 API 了。2. 页面中使用地图 API（案例）（1）新建 .vue 页面文件并设置容器<template>  <!--地图容器-->  <div id="container"></div></template> <script>  export default {    name: "gaode"  }</script> <style scoped>  #container {    width: 80%;    height: 400px;    margin: 100px auto;    border: 2px solid red;  }</style>（2）在页面中引入 amap-jsapi-loader 并初始化 map 对象        样式设置完后在页面中引入 amap-jsapi-loader 并初始化 map 对象；此处需注意 Vue2 和 Vue3 中引入与初始化方式都是不同的，注意自己的 Vue 版本。查看 Vue 版本在控制台中输入 npm list vue 命令即可；如下，博主用的是 vue2。vue2 方式（下文均以此方式为例）：<script>  import AMapLoader from '@amap/amap-jsapi-loader'; //引入   export default {    name: "gaode",    data() {      return {        map: null //初始化 map 对象      }    }  }</script>vue3 方式：<script>  import {shallowRef} from '@vue/reactivity' //引入   export default {    name: "gaode",    setup() {      const map = shallowRef(null);      return {        map,      }    },  }</script>（3）定义地图初始化函数 initMap 并调用methods: {      initMap() {        AMapLoader.load({          key: "ed2ea36f8564541569c370254845d93d", //此处填入我们注册账号后获取的Key          version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15          plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等        }).then((AMap) => {          this.map = new AMap.Map("container", { //设置地图容器id            viewMode: "3D", //是否为3D地图模式            zoom: 5, //初始化地图级别            center: [105.602725, 37.076636], //初始化地图中心点位置          });        }).catch(e => {          console.log(e);        })      },    },    mounted() {      //挂载阶段调用，DOM初始化完成进行地图初始化      this.initMap();    }3. 完整代码+详细注释<template>  <div>    <div id="container"></div>  </div></template> <script>  import AMapLoader from '@amap/amap-jsapi-loader';   export default {    name: "gaode",    data() {      return {        map: null //初始化 map 对象      }    },    methods: {      initMap() {        AMapLoader.load({          key: "ed2ea36f8564541569c370254845d93d", //此处填入我们注册账号后获取的Key          version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15          plugins: [''], //需要使用的的插件列表，如比例尺'AMap.Scale'等        }).then((AMap) => {          this.map = new AMap.Map("container", { //设置地图容器id            viewMode: "3D", //是否为3D地图模式            zoom: 5, //初始化地图级别            center: [105.602725, 37.076636], //初始化地图中心点位置          });        }).catch(e => {          console.log(e);        })      },    },    mounted() {      //DOM初始化完成进行地图初始化      this.initMap();    }  }</script> <style>  #container {    width: 80%;    height: 400px;    margin: 100px auto;    border: 1px solid red;  }</style>四、在地图中添加覆盖物、图层、插件、事件等属性        经过前三步的配置，一个最基础的高德地图就成型了，但实际应用中仅仅这样肯定是不行的，项目中需求会有很多。所以当我们想要改变它的样式，或者是在地图上添加一些其他属性如图层、点标记、点击事件时，只需在以上代码 this.map = new AMap.Map("container", { } 的同级位置添加相关代码即可。我们简单举几个例子：1. 添加图层        默认情况下，地图只显示标准底图，如需要叠加别的图层，可以通过map.add方法添加图层。我们试着添加一个卫星图层 TileLayer.Satellite，如下：效果如下，原始地图变为卫星地图：2. 在地图中使用插件(地图控件)        JS API 提供了众多的插件功能，这些功能不会主动随着 JSAPI 主体资源下发，需要引入之后才能使用这些插件的功能。在使用插件之前我们需要先将各个插件引入到 plugin 数组中，随后使用 addControl 添加至地图中。        如下代码添加了图层切换、比例尺和鹰眼三个插件：效果如下：3. 其他设置        方法就是以上介绍的方法，大同小异。掌握方法后再设置花里胡哨也就不在话下了，更多属性与插件请参见 JS API 官网：概述-地图 JS API v2.0 | 高德地图API高德开放平台官网https://lbs.amap.com/api/jsapi-v2/summary

该说不说大哥对象脚洗时间不短啊原文链接：https://blog.csdn.net/JHXL_/article/details/122414778vueXVuex的概述什么是vuexVuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享Vuex管理数据的优点A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护B.能够高效的实现组件之间的数据共享，提高开发效率C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新Vuex的基本使用步骤1.安装 npm i vuex --save2.在src文件目录下新建store>index.js文件import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store(); export default store;3.口文件里面引入store，然后再全局注入import store from './store'//引入store new Vue({ el: '#app', router, store,//使用store template: '<App/>', components: { App }})4.使用在state中定义数据Vue.use(Vuex)const store = new Vuex.Store({  state:{    count:1  }})Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，Getters 可以用于监听、state中的值的变化，返回计算后的结果 getters:{    getCount:state=>{      return state.count+1    }给action注册事件处理函数，当这个函数被触发时候，将状态提交到mutations中处理。actions里面自定义的函数接收一个context参数和要变化的形参actions:{          addFun(context,n){          context.commit('add',n)       } ，       removeFun(context){         context.commit("remove")       }    }mutations是一个对象里。面的方法 都是同步事务，是更改state初始状态的唯一合法方法，具体的用法就是给里面的方法传入参数state或额外的参数  mutations:{    add（state，n){    state.count = state.count+n  },  remove(){    state.count=state.count-1  }  },dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)export defult{  data(){    return{      mag:'aaa'    }  },    methods:{      addCount(){        this.$store.commit('add')      },        reoveCount:function(){          this.$store.commit('remove')        },         addFun(){            let n =2;           this.$store.dispatch('addFun',n)          },            removeFun(){               this.$store.dispatch('removeFun')            }    }}Vuex中的核心特性StateState提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储在组件中访问State的方式：1).this.$store.state.全局数据名称  如：this.$store.state.count2).先按需导入mapState函数： import { mapState } from 'vuex'然后数据映射为计算属性： computed:{ ...mapState(['全局数据名称']) }MutationMutation用于修改变更$store中的数据使用方式第一种打开store.js文件，在mutations中添加代码如下mutations: {    add(state,step){      //第一个形参永远都是state也就是$state对象      //第二个形参是调用add时传递的参数      state.count+=step;    }  }然后在Addition.vue中给按钮添加事件代码如下：<button @click="Add">+1</button>methods:{  Add(){    //使用commit函数调用mutations中的对应函数，    //第一个参数就是我们要调用的mutations中的函数名    //第二个参数就是传递给add函数的参数    this.$store.commit('add',10)  }}使用mutations的第二种方式：import { mapMutations } from 'vuex'methods:{  ...mapMutations(['add'])}import { mapState,mapMutations } from 'vuex'export default {  data() {    return {}  },  methods:{      //获得mapMutations映射的sub函数      ...mapMutations(['sub']),      //当点击按钮时触发Sub函数      Sub(){          //调用sub函数完成对数据的操作          this.sub(10);      }  },  computed:{      ...mapState(['count'])        }}Action在mutations中不能编写异步的代码，会导致vue调试器的显示出错。在vuex中我们可以使用Action来执行异步操作。操作步骤第一种打开store.js文件，修改Action，如下：actions: {  addAsync(context,step){    setTimeout(()=>{      context.commit('add',step);    },2000)  }}然后在Addition.vue中给按钮添加事件代码如下<button @click="AddAsync">...+1</button>methods:{  AddAsync(){    this.$store.dispatch('addAsync',5)  }}操作步骤第二种import { mapActions } from 'vuex'methods:{  ...mapMutations(['subAsync'])}import { mapState,mapMutations,mapActions } from 'vuex'export default {  data() {    return {}  },  methods:{      //获得mapMutations映射的sub函数      ...mapMutations(['sub']),      //当点击按钮时触发Sub函数      Sub(){          //调用sub函数完成对数据的操作          this.sub(10);      },      //获得mapActions映射的addAsync函数      ...mapActions(['subAsync']),      asyncSub(){          this.subAsync(5);      }  },  computed:{      ...mapState(['count'])        }}GetterGetter用于对Store中的数据进行加工处理形成新的数据它只会包装Store中保存的数据，并不会修改Store中保存的数据，当Store中的数据发生变化时，Getter生成的内容也会随之变化使用打开store.js文件，添加getters，然后打开Addition.vue中，添加插值表达式使用gettersexport default new Vuex.Store({  .......  getters:{    //添加了一个showNum的属性    showNum : state =>{      return '最新的count值为：'+state.count;    }  }})或者也可以在Addition.vue中，导入mapGetters，并将之映射为计算属性import { mapGetters } from 'vuex'computed:{  ...mapGetters(['showNum'])}

你好，我们把线上的应用，打包发布到线下，部署之后，使用了vuedraggable 的页面报错，在线上没有问题。我看线下的库文件里面，也有这个文件这个是什么问题呢？

安装：npm install vue-esign --save使用：1.在main.js中引入import vueEsign from 'vue-esign'Vue.use(vueEsign) 2.在页面中引用<vue-esign ref="esign" :width="800" :height="300" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />  <button @click="handleReset">清空画板</button>  <button @click="handleGenerate">生成图片</button>data () {  return {    lineWidth: 6,    lineColor: '#000000',    bgColor: '',    resultImg: '',    isCrop: false  }},methods: {  handleReset () {    this.$refs['esign'].reset() //清空画布  },  handleGenerate () {    this.$refs['esign'].generate().then(res => {      this.resultImg = res // 得到了签字生成的base64图片    }).catch(err => { //  没有签名，点击生成图片时调用      this.$message({        message: err + ' 未签名！',        type: 'warning'      })      alert(err) // 画布没有签字时会执行这里 'Not Signned'    })  }}data () {  return {    lineWidth: 6,    lineColor: '#000000',    bgColor: '',    resultImg: '',    isCrop: false  }},methods: {  handleReset () {    this.$refs['esign'].reset() //清空画布  },  handleGenerate () {    this.$refs['esign'].generate().then(res => {      this.resultImg = res // 得到了签字生成的base64图片    }).catch(err => { //  没有签名，点击生成图片时调用      this.$message({        message: err + ' 未签名！',        type: 'warning'      })      alert(err) // 画布没有签字时会执行这里 'Not Signned'    })  }}附：将base64转化成图片方法：​​​​​​​// 将base64，转换成图片  base64ImgtoFile(dataurl, filename = 'file') {  const arr = dataurl.split(',')  const mime = arr[0].match(/:(.*?);/)[1]  const suffix = mime.split('/')[1]  const bstr = atob(arr[1])  let n = bstr.length  const u8arr = new Uint8Array(n)  while (n--) {  u8arr[n] = bstr.charCodeAt(n)  }  return new File([u8arr], `${filename}.${suffix}`, {  type: mime  })  },

【功能模块】大屏组件【操作步骤&问题现象】1、上传了一个新的组件，结果组件中的vue模板没有被编译，页面直接显示了vue模板dom【截图信息】【日志信息】（可选，上传日志内容或者附件）

你好，想问下，vuedraggable使用之后，为什么浏览器页面标签没有被正常渲染？在mounted输出了 vuedraggable 显示如下所示

一、路由配置const routes = [  {    path: '/',    name: '导航1',    component: Home,    children:[      {        path: '/customer',        name: 'Customer',        // route level code-splitting        // this generates a separate chunk (about.[hash].js) for this route        // which is lazy-loaded when the route is visited.        component: () => import(/* webpackChunkName: "about" */ '../views/Customer.vue')      },      {        path: '/pageOne',        name: '页面1',        component: PageOne,       },      {        path: '/pageTwo',        name: '页面2',        component: PageTwo,    },    ]  },  {    path: '/navigation',    name: '导航2',    component: Home,    children:[      {        path: '/pageThree',        name: '页面3',        component: PageThree,       },      {        path: '/pageFour',        name: '页面4',        component: PageFour      },    ]  },二、vue页面嵌套App.vue先配置第一个router-view// An highlighted block <router-view></router-view>Home.vue配置第二个router-view// An highlighted block<template>  <div>  <el-container style="height: 500px; border: 1px solid #eee">    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">       <el-menu>        <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">        <template slot="title"><i class="el-icon-sell"></i>{{item.name}}</template>          <el-menu-item v-for="(item2,index2) in item.children" :index="index+'-'+index2">{{item2.name}}</el-menu-item>        </el-submenu>      </el-menu>    </el-aside>     <el-container>      <el-header style="text-align: right; font-size: 12px">        <el-dropdown>          <i class="el-icon-setting" style="margin-right: 15px"></i>          <el-dropdown-menu slot="dropdown">            <el-dropdown-item>查看</el-dropdown-item>            <el-dropdown-item>新增</el-dropdown-item>            <el-dropdown-item>删除</el-dropdown-item>          </el-dropdown-menu>        </el-dropdown>        <span>王小虎</span>      </el-header>       <el-main>        <router-view></router-view>       </el-main>    </el-container>   </el-container> </div></template> <style>.el-header {  background-color: #B3C0D1;  color: #333;  line-height: 60px;} .el-aside {  color: #333;}</style> <script>export default { };</script>三、嵌套联系首先，在访问http://localhost:8181/时会进入第一层嵌套，此时进入第一个router-view：Home.vue。然后当访问pageone时，会连带Home.vue继续访问。因为router-view的嵌套显示和路由路基的嵌套有关，可以看到，在路由里面，导航一的路径底下分别是页面一以及页面二的路由路径。所以当访问页面一pageone时，会先访问上级路径Home.vue页面。加入Home.vue页面没有放置router-view，那么下级页面将无法显示

【功能模块】1. abc自定义导航栏，是基于vue-router实现的吗？2. 是否可以调用vue-router路由的beforeRouteLeave，beforeEnter等方法。3.如果不能的话，该怎么在跳转之前定义事件拦截，没的思路....【操作步骤&问题现象】1、2、【截图信息】【日志信息】（可选，上传日志内容或者附件）

【功能模块】广东清远项目，厂商：拓维信息，租户：Hi-zhyqtalkweb02。【操作步骤】1、运行magno ui2、创建Vue高级组件（因为该组件支持import 要试一试多文件业务逻辑）创建后的组件：你好，我参考文档第六点进行开发https://support.huaweicloud.com/appcube-usermanualnew/appcube_usermanual_0048.html1、第六点a操作时：“在脚手架工具“组件管理”页面中单击待调试组件所在行的“调试”按钮启动该组件的调试功能，系统会弹出“调试地址复制成功”提示框，说明您已成功启动组件调试并已复制调试地址。”因为没有调试按钮，所以没法操作。请问要怎么操作。

本地开发高级组件Scaffolding下创建vue高级页面组件，不做任何操作， 直接发布会失败！添加一点内容发布也失败。高级页面组件发布下不会失败。这个接口 /api/publishAsset 返回 failed to publish Assethttps://bbs.huaweicloud.com/forum/thread-86734-1-1.html  这个帖子出现的问题，我都没有。

使用Scaffolding离线开发vue高级页面组件时只有打包命令，请问本地测试时用哪个命令。{ "name": "test", "version": "1.0.0", "description": "测试用", "widgetname": "test", "author": "pengbo", "private": true, "scripts": { "build": "magno vue-widget --prod" }, "devDependencies": { "theme-chalk": "^1.0.0" } }scripts 中有没有 可以本地进行测试的。

直播回放地址：https://bbs.huaweicloud.com/live/education_live/202106032000.html 上个月的22号，第四届Vue.js开发者大会在杭州举办，华为云云享专家玉城老师借此直播机会，和大家聊一聊Vue 3.0的最新动态。Vue 3.0新特性从2.0到3.0，Vue进行了很多重大的升级，增加了很多新特性，包括：我们常用的Vue周边生态也喜闻乐见的迎来了更新：目前来看，Vue 3.0的周边生态进展非常顺利，配套完善。在2.0时代我们知道针对Vue框架有个非常著名的脚手架Vue-cli，在3.0版本中强势推出了一个新脚手架叫做Vite，也就是法语的“快”，体现了新脚手架的灵魂。为什么要开发这么一个新的脚手架呢，就是要解决在项目开发，尤其是庞大项目编译过程中的效率问题。如果在编译环节节省更多时间，就能极大的节省开发时间。除了特点快之外，还有以下特点：Vue未来规划目前vue3.1版本beta版刚刚发布，主要是让我们从2.0平滑过渡到3.0，框架底层代码用的3.0，对外封装出的API是2.0的。所以大家有2.0的小项目，可以直接用3.1版本，在逻辑代码不改变太多的基础上已经在使用3.0的代码了。说白了就是给2.0的项目升级用的。但毕竟3.0和2.0还是有区别的，有些逻辑上的代码可能还需要自己修修改改。Vue 2.0 最后一个版本将会是Vue 2.7。另外强调一下，Vue 3不支持IE11。作为开发者，可以开始准备了。在3.0版本的官网上有详细的新特性官方教程，想要学习3.0语法可以在官网进行学习，当然大家也可以关注玉城老师下半年发布的3.0课程~答观众问Q:vue2.0 升级到3.0 复杂度难度大不大？目前的项目2.0够用，有必要升级到3.0吗？A:虽然目前vue3框架和周边生态都很成熟，但如果你目前的项目2.0够用且规模比较大，不着急升级。Q:ref()和reactive()这两个方法都是Vue3.0中暴露出的进行响应式绑定的函数，请问两者有什么不同点呢？分别对应于哪些场景？A:这位同学已经在用3.0了，一般来说ref针对基本类型的数据，比如字符串，数字，reactive用于复杂数据类型，对象比较多。Q:vue3.0还有哪些遗憾，短板，开发者怎么去规避？A:新框架大版本升级一开始肯定是不够完善的，会有小bug，需要不断迭代升级。作为第一个吃螃蟹的开发者肯定会遇到些问题。需要开发者多交流多探讨去避开这些短板和问题。