zhangxiaodui的博客

public文件夹下的index.html里引入luckysheet的相关依赖，由于考虑到我所做的这个项目可能会内网部署，所以将这些依赖包放在了public文件夹下的static文件夹里新建了一个luckysheet文件夹，：需要用到luckysheet和luckyexcel，根据下面步骤一步一步操作会避免踩坑，比如我当时遇到了window.luckysheet is not defined控制台报红的问题。还发现一种方法可以实现，需要后端配合，叫做KKfileview。当然也可以选择cdn引入的方式。

Cannot read property ‘parseComponent‘ of undefined

window.location.href跳转页面后拿不到cookie的问题

图上d3的代码只是做到了框选拿到框选矩形的位置坐标，拿到坐标后的高亮节点和边是使用cosmograph的api来实现的。

svg转换为icon的方式来使用

vue PC端电脑屏幕大小自适应

场景今天合并代码后vue报错如下Invalid default value for prop “d3Data”: Props with type Object/Array must use a factory function解决通过报错提示可以了解到我们写的组件，props设置默认值时，如果是Object或者Array类型，不能直接设置，需要使用工厂函数。报错代码props: { d3Data: { type: Object, default: {} }}修改后的代码pro

场景上个月遇到了我们的后端同事需要将多个vue项目部署到同一域名同一端口下，下面记录一下当时我们两个里面前端的操作有哪些。例如有一个产品，它分为3个产品模块，有三个vue的项目想部署到同一域名下访问路径想为如下所示：xxx.xxx.com:8089/productAxxx.xxx.com:8089/productBxxx.xxx.com:8089/productC方法前端我进行了3个操作，剩余nginx那里由后端来处理1.public/index.html文件head标签里加入如下代码

使用场景用于一些常见的文本格式化。也许后端返回的数据格式并不是最终想要展示出来的，通过过滤器可以进行处理成自己想要展示出来的格式。由“管道”符号指示。使用方式1.双花括号插值{{message | myFilter}}2.v-bind表达式<el-tag :type="message | myFilter"></el-tag>3.vue的生命周期中，如用在methods方法中this.$options.filters['这里是过滤器的名字']('过滤器的参数')

1.将vue项目打包生成dist文件夹2.下载HbuilderX的APP开发版并且登录3.在HbuilderX里点击文件>新建>项目，选择5+APP，填写项目名称和存储位置，模板选择空项目。点击创建即可。4.将HbuilderX里新建项目里的js、css、image文件夹以及index.html删掉。打包的dist的文件夹里的static文件夹和index.html复制粘贴进去。5.打开manifest.json文件配置几个核心项。选择基础配置，将应用名称填写上，应用标识（APPID）

场景今天在使用vue-cli4的版本创建vue2.0项目时，发现执行了yarn serve报错。错误如下图Cannot read property 'version' of undefined解决最终从网上搜索多篇解决方案后，采用了如下方案解决了问题。第1步：卸载eslintyarn remove eslint --save第2步：在package.json里将下图代码删除"@vue/cli-plugin-eslint": "~4.5.0"ok...

场景昨天还是在别人写的项目的基础上进行UI优化的时候，遇到一个覆盖element样式在生产环境失效的问题。首先我将.el-main这个类的覆盖样式写在了app.vue里，当然写在公共的css里也一样会遇到这个问题。.el-main { padding: 0;}其次element的css样式文件是在main.js里引入的。开发环境一切正常，我覆盖的el-main的类起作用了。但是打包放到生产环境，发现padding: 0;并没有生效。解决从开发者工具那里查看样式可以看到，element的

场景今天跑一个别人的项目，已经写了有一段时间了，发现npm install之后执行npm run dev命令，报错{ parser: “babylon“ } is deprecated； we now treat it as { parser: “babel“ }。解决方案这是prettier的版本导致，我当时安装的是1.18.0，然后执行如下命令安装了1.12.0版本。npm install prettier@~1.12.0 -dok，重新npm run dev便不会报这个错误了。延伸之前

场景：今天在使用vue-cli4.5.12版本创建vue 2.0项目时，发现使用vue create 项目名创建的项目采用的是yarn来创建的，这个时候我就产生了疑惑，现在想改为npm怎么办呢。解决想起前不久我选择了手动创建项目，vue-cli的官网上有写在项目创建的过程中被保存的preset将会存在用户电脑的C盘下的用户下的administrator文件夹下的名为.vuerc的json文件里，可以编辑该文件去修改或者删除它，重新执行vue create 项目名称即可。...

vue-cli脚手架 3.0以前的版本安装我们用npm install vue-cli -gvue-cli脚手架3.0以后的版本安装我们用npm install @vue/cli -g

在改别人写的项目的bug时，本来没有路由守卫，该项目是静态路由，用户直接输入路径不能进入没有权限的页面，于是我就加了beforeEach钩子进行权限判断，结果发现在我进行权限切换测试时，有些时候并没有走入beforeEach里，从网上查了一下，原来自己把router.beforEach放在了挂载根实例的后面，这就导致beforeEach在有些情况下不走。总结一定要把挂在根实例的操作放到最后。// 将它放在最后new Vue({ el: '#app', router, components

深夜记录一下这个问题，真的折腾了我一天，element的el-input上为了去除首尾空格，在v-model后面加了.trim,结果空格在输入框里压根输不进去。我记得之前写的项目就算加了trim还是可以输入空格的，等调后台接口时会直接把首尾空格去掉的，这次怎么不行了呢。其他人说他们的项目就可以呀，我还看他们在本地跑的项目确实是可以的。我胡乱检查了node版本，vue版本，element版本，又看了其他人的正常的项目里的版本，绕了一大圈，结果发现问题所在是element，它的版本问题。element官网上

场景今天根据需求做功能的时候，直接赋值修改了数组中某一项的对象里的一个属性，视图没有重新渲染，解决办法如下。this.$set('数组', '修改的项的索引', '修改项')总结对于数组为什么视图没有更新呢？因为Vue 不能检测以下数组的变动：1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue2.当你修改数组的长度时，例如：vm.items.length = newLength所以可使用vue的set方法来触发状态更新。...

场景最近被反馈说用vue做的一个官网首次加载很慢，要好多秒，需要进行一下优化，下面说一下我的探索历程。1.这是中途接手的一个项目，我发现里面有一些本地的第三方库并没有用到或者node modules里已经有了，比如font awesome，bootstrap等，我就把她们删掉了，还有多余的图片也删掉了。2.从网上搜了方法，把config文件夹下的index.js文件里的productionS...

1.config文件夹下的index.js文件2.找到proxyTable: {}3.改成如下内容proxyTable: { '/surfront': { target: 'http://localhost:9000', // 请求的后台接口域名 changeOrigin: true, // 允许跨域 pathRewrite: { '^/surfront': '/surf...

linkActiveClass: ‘自定义的导航高亮的类名’在路由文件里设置linkActiveClass: ‘类名’export default new Router({ linkActiveClass: 'active', routes: [{路由}]})在导航栏文件里使用router-link标签即可<router-link to="/price" class="nav...

最近在做的Vue项目中，从一个长页面跳到另一个路由后，页面的位置还停留在上个页面的位置，没有回到顶部，怎么办呢？以下是解决办法。找到你的路由文件（我的是router文件夹下的index.js），加入下图绿色框框中的代码就可以啦。scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0}}...