随笔分类 - Vue
摘要：以跳转至/detail 页面，传递id:1举例： vue2 vue3 路由跳转 (通过query) //<router-link>跳转 <router-link :to="{ path:'/detail',query:{id:1} }">详情</router-link>//path可替换成name，
阅读全文
摘要：vue-cli3 有时候安装某些包之后会报错。比如提示‘Cannot find module 'vue-loader/package.json'’，可以尝试下执行下面2条命令： 删除已安装的包： rm -r node_modules ； 再重新安包依赖包：npm install 。 我没有执行第一条
阅读全文
摘要：运行vue项目的时候报 Error: listen EADDRINUSE: address already in use 127.0.0.1:3000 这个错，表示3000端口号被占用。 解决方法： 1.打开cmd，执行 netstat -nao | findstr 3000 查询3000端口占用的
阅读全文
摘要：最近在看Nuxt开发vue项目的视频，视频中讲到Nuxt项目不支持es6的import写法。并提供了解决方案： 1.在package.json中添加我标红的部分： 2.根目录创建babel配置文件.babelrc，如果已经存在该文件就修改 内容如下： 3.安装 babel-preset-es2015
阅读全文
摘要：温馨提示：本文只适用于vue-cli 3.0 及以上的版本哦~ 正文开始 开发项目时，经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢？ 为了更加方便消化本文章，建议先看下官方文档： 环境变量和模式 看完官方的文档如果还没有明白，可以参考本文。 在vue-cli 构建的项目中，默认有3种
阅读全文
摘要：最近在自己捣腾个vue的项目，苦于没有接口测试。网上搜寻一遍，基本上是使用mock.js模拟数据。研究mock.js 过程中，发现很多人提到了Easy Mock，发现它更加的方便。但是访问Eash Mock基本是一个打不开的状态。 直接来到它的github。看它的issue，很多人都说到了它打不开的
阅读全文
摘要：以下是本人在用vue cli 开发项目里遇到的最基本的问题及解决方案汇总。没啥很多技术性的东西，各位看个乐呵就行~ 1.vue-cli 创建的项目各文件夹的含义 注意：通过vue-cli 4 创建的项目中没发现 static文件夹。src下面的 pages 变成了 views。 更详细的可查看：vu
阅读全文
摘要：搭建项目之前，请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。 如何安装node? 安装好node默认已经安装好npm了，所以不用单独安装了。 如何安装vue cli? 剧场环境已搭建好，开始表演！ 1.进入一个目录，创建项目 对应命令： 2.我们这里选
阅读全文
摘要：有了eslint的校验，可以来规范开发人员的代码，是挺好的。但是有些像缩进、空格、空白行之类的规范，在开发过程中一直报错，有点烦人了。 我们可以在创建工程的时候选择不要安装eslint。就是在安装工程的时候，出现【Use ESLint to lint your code?】时选择【No】即可。 如果
阅读全文
摘要：项目中需要做一个小弹层，如下图： 我需要知道点击元素距离顶部的值，再计算弹层的top值，如下图： 在vue中如何获取到DOM元素距离窗口顶部的值呢？ 1.通过$event获取 html： methods： 如下图： 2.通过this.$refs.***获取 1.目标DOM定义ref值： 2.通过 【
阅读全文
摘要：在jquery中，如果要获取 data-*** 的值可以通过 $('目标元素').data('属性名') 来获取。 在Vue中如何获取该值呢？ 1.换个思路，作为参数传递。 如下代码： 2.通过e.target.dataset.*** 或者 e.target.getAttribute('data-*
阅读全文
摘要：vue路由设置路由参数有2种方式： 1.通过query配置： 通过query配置的路径显示如下： 2.通过params配置： 通过query配置的路径显示如下： 通过该方法配置的参数，需要在配置路由的时候给参数留个坑，如下图： 获取路由参数的方法： 1.通过query配置的： 2.通过params配
阅读全文
摘要：Vue路由大致分为6个步骤： 1.引用vue-router <script src="js/vue-router.js"></script> 2.安装插件 Vue.use(VueRouter); 3.创建一个路由对象 var router = new VueRouter({ //这里面配置路由对象
阅读全文
摘要：vue官网关于生命周期的文档可点击这里 下面我就以具体的代码来说一下我对vue生命周期的理解，如有错误请告知。每组我会先附上代码，根据返回结果做一些简短的总结，这样可能感觉会更强烈一点。 下面所有的代码截图在本文最后会附上，有需要的小伙伴可以在本地运行看一下效果。 1.beforeCreate 和
阅读全文
摘要：vue中常用v-表示指令，下面总结一下常用的指令有哪些： 插入文本:v-text 相当于元素的innerText属性，必须是双标签 插入HMTL:v-html 相当于元素的innerHTML属性 循环:v-for v-for的使用，除了item属性，还有一些其他辅助属性。假设你现在循环的对象名字为s
阅读全文
