属性介绍description字符串。用来描述当前项目的大致功能。name此项目包的名称。在不确定自己的包名能否使用之前，请先npm registry 一下，看看当前你喜欢的包名是否已经被占用。version当前项目包的版本号。每一次项目改动时，在即将发布时，都要同步的去更改项目的版本号。一般格式为：x.y.z。意思是：大版本.中版本.小版本keywords放简介，字符串。方便屌丝们在 npm search中搜索homepage项目官网的urlbugs你项目的提交问题的url和（或）邮件地址。这对遇到问题的屌丝很有帮助。{ "url" : "http://github.com/owner/project/issues" , "email" : "project@hostname.com" }你可以指定一个或者指定两个。如果你只想提供一个url，那就不用对象了，字符串就行。如果提供了url，它会被npm bugs命令使用。license你应该要指定一个许可证，让人知道使用的权利和限制的。最简单的方法是，假如你用一个像BSD或者MIT这样通用的许可证，就只需要指定一个许可证的名字，像这样：{ "license" : "BSD" }author项目作者。可以指定name，email，url字段信息。也可以单独使用字符串来表示。{“ author ”: { "name" : "Barney Rubble" , "email" : "b@rubble.com" , "url" : "http://barnyrubble.tumblr.com/" } }contributors项目相关贡献者。是数组。用于罗列对应的贡献人。可以是单独的字符串，也可以分别指定name,email,url等属性。{"contributors ":[ { "name" : "Barney Rubble" , "email" : "b@rubble.com" , "url" : "http://barnyrubble.tumblr.com/" } ]}filesfiles是一个包含项目中的文件的数组。如果命名了一个文件夹，那也会包含文件夹中的文件。（除非被其他条件忽略了）你也可以提供一个.npmignore文件，让即使被包含在files字段中得文件被留下。其实就像.gitignore一样。{ "files": [ "bin/", "templates/", "test/" ]}mainmain字段是一个模块ID，它是一个指向你程序的主要项目。就是说，如果你包的名字叫foo，然后用户安装它，然后require("foo")，然后你的main模块的exports对象会被返回。这应该是一个相对于根目录的模块ID。对于大多数模块，它是非常有意义的，其他的都没啥。{ "main": "bin/index.js"}bin很多包都有一个或多个可执行的文件希望被放到PATH中。（实际上，就是这个功能让npm可执行的）。要用这个功能，给package.json中的bin字段一个命令名到文件位置的map。初始化的时候npm会将他链接到prefix/bin（全局初始化）或者./node_modules/.bin/（本地初始化）。{ "bin" : { "npm" : "./cli.js" } }当你初始化npm，它会创建一个符号链接到cli.js脚本到/usr/local/bin/npm。如果你只有一个可执行文件，并且名字和包名一样。那么你可以只用一个字符串，比如{ "name": "my-program" , "version": "1.2.5" , "bin": "./path/to/program" }// 等价于{ "name": "my-program" , "version": "1.2.5" , "bin" : { "my-program" : "./path/to/program" } }man指定一个单一的文件或者一个文件数组供man程序使用。如果只提供一个单一的文件，那么它初始化后就是man 的结果，而不管实际的文件名是神马，比如：{ "name" : "foo" , "version" : "1.2.3" , "description" : "A packaged foo fooer for fooing foos" , "main" : "foo.js" , "man" : "./man/doc.1" }这样man foo就可以用到./man/doc.1文件了。如果文件名不是以包名开头，那么它会被冠以前缀，下面的：{ "name" : "foo" , "version" : "1.2.3" , "description" : "A packaged foo fooer for fooing foos" , "main" : "foo.js" , "man" : [ "./man/foo.1", "./man/bar.1" ] }会为man foo和man foo-bar创建文件。man文件需要以数字结束，然后可选地压缩后以.gz为后缀。{ "name" : "foo" , "version" : "1.2.3" , "description" : "A packaged foo fooer for fooing foos" , "main" : "foo.js" , "man" : [ "./man/foo.1", "./man/foo.2" ] }会为man foo和man 2 foo创建。repository指定你的代码存放的地方。这个对希望贡献的人有帮助。如果git仓库在github上，那么npm docs命令能找到你。scripts“scripts”是一个由脚本命令组成的hash对象，他们在包不同的生命周期中被执行。key是生命周期事件，value是要运行的命令。config"config" hash可以用来配置用于包脚本中的跨版本参数。在实例中，如果一个包有下面的配置{ "name" : "foo" , "config" : { "port" : "8080" } }然后有一个“start”命令引用了npm_package_config_port环境变量，用户可以通过npm config set foo:port 8001来重写他。dependencies依赖是给一组包名指定版本范围的一个hash。这个版本范围是一个由一个或多个空格分隔的字符串。依赖还可以用tarball或者git URL。请不要将测试或过渡性的依赖放在dependencies。对于引用包的版本号格式，以下都是合法的：{ "dependencies" :   { "foo" : "1.0.0 - 2.9999.9999"   , "bar" : ">=1.0.2 <2.1.2"   , "baz" : ">1.0.2 <=2.3.4"   , "boo" : "2.0.1"   , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0"   , "asd" : "http://asdf.com/asdf.tar.gz"   , "til" : "~1.2"   , "elf" : "~1.2.3"   , "two" : "2.x"   , "thr" : "3.3.x"  ,"vue":"*", "element-ui":"" } }devDependencies如果有人要用你的模块，但他们可能不需要你开发所使用的外部测试或者文档框架。在这种情况下，最好将这些附属的项目列在devDependencies中。这些东西会在根目录执行npm link或者npm install的时候初始化，并可以像其他npm配置参数一样管理。peerDependencies你的模块可能要暴露一个特定的接口，并由host文档来预期和指定。比如：{   "name": "tea-latte",   "version": "1.3.5"   "peerDependencies": {     "tea": "2.x"   } }这能保证你的package可以只和tea的2.x版本一起初始化。试图初始化另一个有会冲突的依赖的插件将导致一个错误。因此，确保你的插件的需求约束越弱越好，而不要去把它锁定到一个特定的版本。此属性尽量避免使用bundledDependencies一组包名，他们会在发布的时候被打包进去engines指定项目工作的环境。除非用户设置engine-strict标记，这个字段只是建议值。{ "engines" : { "node" : ">=0.10.3 <0.12", "npm" : "~1.0.20" } }engineStrict如果你确定你的模块一定不会运行在你指定版本之外的node或者npm上，你可以在package.json文件中设置"engineStrict":true。它会重写用户的engine-strict设置。除非你非常非常确定，否则不要这样做。如果你的engines hash过度地限制，很可能轻易让自己陷入窘境。慎重地考虑这个选择。如果大家滥用它，它会再以后的npm版本中被删除。os可以指定你的模块要运行在哪些操作系统中"os" : [ "darwin", "linux" ]你也可以用黑名单代替白名单，在名字前面加上“!”就可以了："os" : [ "!win32" ]操作系统用process.platform来探测。虽然没有很好地理由，但它是同时支持黑名单和白名单的。cpu如果你的代码只能运行在特定的cpu架构下，你可以指定一个"cpu" : [ "x64", "ia32" ]就像os选项，你也可以黑一个架构："cpu" : [ "!arm", "!mips" ]cpu架构用process.arch探测。preferGlobal如果包主要是需要全局安装的命令行程序，就设置它为true来提供一个warning给只在局部安装的人。它不会真正的防止用户在局部安装，但如果它没有按预期工作它会帮助防止产生误会。{" preferGlobal ":true}private如果你设置"private": true，npm就不会发布它。这是一个防止意外发布私有库的方式。如果你要确定给定的包是只发布在特定registry（如内部registry）的，用publishConfighash的描述来重写registry的publish-time配置参数。publishConfig这是一个在publish-time使用的配置集合。当你想设置tag或者registry的时候它非常有用，所以你可以确定一个给定的包没有打上“lastest”的tag或者被默认发布到全局的公开registry。任何配置都可以被重写，但当然可能只有“tag”和“registry”与发布的意图有关。

链接：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 中有没有 可以本地进行测试的。