Beam

一、package.json定义了当前项目所需要引用的各个模块，可以手工修改配置，也可以删除后，使用npm init命令重新自动生成。但是该文件只锁定大版本号，也就是版本号的第一位，所以你会发现两个文件中同一个包的版本号不一致，但是第一位一定是一致的。1、锁定小版本如需锁定小版本，修改配置文件，去掉版本号前面的小尖尖即可。"dependencies": { "axios": "^0.21.1", "element-ui": "2.15.1",},例如：此处的axios，若执行npm

代码<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=***&plugin=AMap.ControlBar,Map3D,AMap.DistrictSearch" ignore></script><script language="javascript" src="/static/js/xml2json.js" ignore>// JSO

问题一、重复点击报错连续点击同一个路由，第二次点击时报错NavigationDuplicated。如图所示：vue-router引入的地方加上如下代码段即可import VueRouter from 'vue-router'// 解决重复点击菜单导航报错：NavigationDuplicated 的问题const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (location,

1、引入高德地图，需要改http为https引入。改<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你的密钥&plugin=AMap.ControlBar,Map3D,AMap.DistrictSearch"></script>为<script language="javascript" src="https://webapi.amap.com/ma

使用自定义指令绑定拖拽官方文档：https://cn.vuejs.org/v2/guide/custom-directive.html#%E7%AE%80%E4%BB%8B<div></div><div v-barDrag></div><div></div>Vue.directive('barDrag', { bind (el, binding, vnode, oldVnode) { Vue.nextTick(

一、沙箱设置的简单理解strictStyleIsolation = false可以获取到子应用的dom节点，主应用可修改子应用样式，但是子应用不可修改主应用的样式。需要注意样式不能冲突。strictStyleIsolation = true样式严格分离，不可获取到子应用的dom节点。二、res中无法拿到router对象在js文件比如axios的返回拦截res中无法拿到router对象进行路由跳转挂到原生方法上即可。if (!window.__POWERED_BY_QIANKUN__) {

主项目的搭建一、创建主项目vue create hello-main二、安装qiankunnpm install qiankun --save（注意：子项目无需安装qiankun）其他常用组件的安装：npm install jsencrypt --savenpm install element-ui --savenpm install axios --save三、创建vue.config.js配置对外访问的端口号module.exports = { devServer: {

1、设置首选项文件-首选项-设置配置如下：（即setting.json文件）{ // 每次保存自动格式化 "editor.formatOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // vue文件默认格式化方式vetur "[vue]": { "editor.defaultFormatter": "o

一、引入js包：index.html：// 百度地图<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=`申请的秘钥`"></script>// 高德地图<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=`申请的秘钥`&plugin=AM

代码如下websock = new WebSocket('ws://' + location.host + '/wsProxy/')注意此处必须使用location.host，获取localhost和端口号，因为部署到服务器你这端口号不能写死吧。webpack配置：'/wsProxy/': { target: 'http://后台服务IP:后台服务PORT', // 后台的websocket服务地址 changeOrigin: false, ws:

解决问题：因为计算机休眠、网络不稳定等原因，导致实时监视页面的websocket数据推送断了，数据不再更新没有实时性。目的效果：当websocket断开连接时马上重连，依然断开则1分钟后再重连，直到连接成功为止。注意：当切换页面等正常销毁websocket排除在此机制外。可通过设置timerFlagWS以及关闭时的状态码e.code判断是否重连。代码：let websock = nulllet socketTimer = nulllet socketParam = { type: 'te

前言看同事用vscode保存代码都自动进行格式校验，且符合eslint规则。于是开始了我的十万个为什么？vscode保存不自动校验格式Prettier - Code formatter不生效Prettier格式校验和eslint冲突规则不一致结果搜了个遍也没有满意答案，后来发现是编辑器首选项的设置问题。文件-首选项-设置参考https://blog.youkuaiyun.com/weixin_36222137/article/details/80040758满意的首选项{ "editor

1、报错ReferenceError: AMap is not defined通常script应该放到body后，但是地图引入放到body后，刷新页面时，报错：ReferenceError: AMap is not defined因为加载app的时候调用了AMap，你放到后面AMap是啥啊？当然未定义报错了。所以需要把引入：<script language="javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你申请的k

现有文件aaa.json，内容如下：{ "data": [{ "id": "0", "name": "报表demo-此处是表头", "dataField": "", "childs": [ { "id": "1", "name": "第一个", "dataField": "date", "childs": [] }, { "id": "2",

最近疯狂新建项目，于是记录一下使用vue-cli3+创建项目的过程。1、对应文件夹下执行cmd创建项目2、选择手动配置后回车3、选上所需项后回车4、选择eslint的配置本人选的标准配置5、eslint校验时间点本人选择保存时6、这些配置专门存放一个文件还是放在package.json中7、是否保存项目配置8、配置保存命名便于下次创建项目快速调用相同配置9、创建完成10、创建好的项目结构...

IIS错误配置IIS配置web.config如下<?xml version="1.0" encoding="UTF-8"?><configuration> <system.webServer> <rewrite> <rules> <rule name="test" patternSyntax="Wildcard">

配置代理如下vue-cli3.0以前版本配置/config/index.js文件：module.exports = { dev: { proxyTable: { '/api/**': { target: 'http://10.10.17.64:8082/', changeOrigin: false, secure: false, pathRewrite: { '^/api': ''

需求同一界面多个设备，需要点击查看详情，且可以同时点开多个div详情框，进行详情数据对比查看。效果思考最初考虑通过el-dialog实现，但是怎么尝试设置属性，都只能一层层弹出，切存在蒙版层难以设置div的层级关系，无法同时弹出多个对话框切换使用。最后考虑通过v-for控制div的动态渲染来实现。关键代码点击设备按钮和div动态渲染部分<div class="just-cl...

问题：document.getElementById().style.width死活获取不到dom的宽度！！原因：dom.style.width只能获取到style里面设置的宽度，即便在class里设置了宽度，也获取不到。解决：document.getElementById().offsetWidth即可正常获取dom的实际宽度。区分：document.getElementById(...

1、console报错报错：error: Unexpected console statement (no-console)解决：修改package.json中的eslint规则：在eslintConfig.rules，添加一项: “no-console”:“off”"eslintConfig": { "root": true, "env": { "node": tru...

前期准备：一、安装node.js官网下载 https://nodejs.org/en/download/LTS对应系统版本，LTS可以理解为已经过认证的版本？注意：node是装yarn的前提，安装node.js后自动配置了环境变量。检查版本输入命令node --version二、安装cnpm（可以只用npm不安装cnpm，cnpm只是速度较快而已）淘宝NPM镜像 htt...

百度地图的引入在index.html引入百度地图开发包如下：<!DOCTYPE html><html> …… <body> <div id="app"></div> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2....

vue的用法官方文档：https://cn.vuejs.org/v2/guide/components-dynamic-async.html#在动态组件上使用-keep-alivehttps://cn.vuejs.org/v2/api/#keep-alivehttps://cn.vuejs.org/v2/guide/migration.html#keep-alive-属性-替换注意点1...

一、报错找不到.vue明明路径没错，因为同一文件夹下存在同名的index.vue/index.js/index.css文件，所以配置的查找顺序一定要对。webpack.base.conf.js中配置： resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue....

父传子-prop详见官方说明https://cn.vuejs.org/v2/guide/components-props.html注意：为了html的规范，在使用props传值的时候，在父组件引用时变量不用驼峰命名用-连接。参考vue啊element的组件都是-连接的。对应代码如下：// 子组件props: ['whichData'],// 父组件 建议规范化使用<my-ic...

问题两个界面都有id="test"的div，内容不同，路由切换的时候document.getElementById()拿到的是原界面的值。问题代码// 页面1<div id="test">aaa</div>// 页面2<div id="test">bbb</div>// 路由切换如下：<transition name="car...

建议1、如果有change原生事件尽量用原生，不要用watch，毕竟watch只是封装了一层，性能各方面不如原生方法。2、尽量不要watch数组，如果非得监控数组的变化，就设置一个flag，数组变flag变，watch对应的flag来处理。watch数组的一个奇怪现象当前有两个数组：tempY = ["label1", "label2", ... ,"labeln"]tempZ = [...