[Vue]
关注
分享
扫一扫
我能在河边钓一整天的鱼
欢迎来到我的酒馆
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
如何通过IDEA导入并启动前端项目
目录搭建后台管理前端1.解压前端压缩包2.使用IDEA导如这个前端项目3.安装依赖4.启动项目项目结构说明搭建后台管理前端1.解压前端压缩包解压到和后端同一个目录下2.使用IDEA导如这个前端项目效果如下3.安装依赖按alt+F12打开终端，输入npm install下图显示即代表...原创 2020-02-03 14:35:52 · 27518 阅读 · 2 评论 -
如何通过live-server部署启动前端工程
目录为什么要搭建前台系统创建工程导入静态资源安装live-server安装live-server运行设置通过域名访问配置nginx反向代理测试为什么要搭建前台系统门户系统面向的是用户，安全性很重要，而且搜索引擎对于单页应用并不友好。因此我们的门户系统不再采用与后台系统类似的SPA（单页应用）。依然是前后端分离，不过前端的页面会使...原创 2020-02-11 13:54:21 · 2139 阅读 · 0 评论 -
Vue重要技术汇总
VueX作用：不同页面间进行数据共享。索引：travel-8-9,8-10编程式导航作用：通过router实例方法的形式，进行路由跳转索引：travel-8-9localstorge的使用索引：travel-8-10keep-alive标签作用：优化url请求次数。使用keep-alive，路由中的内容每当被加载一...原创 2020-01-27 22:26:09 · 203 阅读 · 0 评论 -
Vue之如何实现兄弟组件间的联动
目录需求说明Do it1.找到字母表的页面2.通过city这个父页面，进行列表页和字母表页面的值传递3.子组件获取父组件传递过来的值需求说明如图，我想要实现当点击字母L，页面定位到L开头的城市名Do it1.找到字母表的页面在html标签绑定一个click事件，在js中定义一个方法，并使用参数e获取点击的字母。当在...原创 2020-01-20 10:12:14 · 943 阅读 · 2 评论 -
Vue之如何使用Better-scroll
Better-scroll是什么？better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。开发时最常用的滚动条是浏览器自带的滚动条，但是有时一个页面中我们用了很多个组件，这些组件又都定义了一定的绝对位置后，浏览器自带的滚动效果常常是不起作用的，如下图。如何通过Better-scroll解决上述问题？1.全局...原创 2020-01-16 14:42:53 · 337 阅读 · 0 评论 -
Vue父子组件实现数据传递
前提上一篇博客我们介绍了如何通过axios获取数据，上一篇没看的朋友可以点击一看https://blog.youkuaiyun.com/Delicious_Life/article/details/103980337json数组传递演示下面我通过传递json数组来演示父子组件是如何传递数据的。首先我们先在父页面js中定义一个data，这里面存储了...原创 2020-01-15 15:56:58 · 757 阅读 · 0 评论 -
Vue之mock假数据并通过axios获取数据
目录axios是干什么用的使用axios1.安装axios2.引入axios效果展示axios是干什么用的浏览器发送请求，或者Node.js发送请求都可以用到Axios。具体功能表现在以下几个方面1、可以在浏览器中发送 XMLHttpRequests2、可以在 node.js 发送 http 请求3、支持 Promise API4、拦截请求和响...原创 2020-01-15 11:37:27 · 1400 阅读 · 0 评论 -
Vue之如何实现图标轮播效果
需求详解我们常在各大app上看到图标轮播的效果。那么下图的这个功能是如何实现的呢？具体实现首先，我们要在js中定义一个数组，然后在里面存放各个功能的名称和图标地址然后再写一个计算属性computed，用来帮助我们处理图标和图片的轮播显示。计算属性自带缓存机制，当这个方法被调用时，每页最多会显示8个图标 compute...原创 2020-01-13 14:50:49 · 634 阅读 · 0 评论 -
Vue之轮播图组件vue-awesome-swiper安装与使用
目录github地址安装npm命令全局引入到项目中如何使用轮播图组件自定义轮播图组件我们需要的轮播图没有左右箭头，也没有滚动条。接下来我们要添加轮播图片，并设置图片格式显示轮播图的页码动态绑定轮播图的图片如何禁用轮播图的自动播放功能github地址https://github.com/surmon-china/vue-awesome...原创 2020-01-12 09:57:24 · 1808 阅读 · 0 评论 -
用Vue开发app之前的项目整合
目录1.设置页面比例2.解决不同手机上显示的页面样式不一致的问题3.解决高像素手机屏幕边框样式显示问题4.解决点击事件300毫秒延迟的问题5.在Iconfont上新建一个项目管理1.设置页面比例找到项目中index.html页面。在<meta name="viewport"...中补充如下代码效果：页面比例始终为1:1，页面不允许用户通过手指进...原创 2019-12-09 11:27:44 · 226 阅读 · 2 评论 -
Vue启动项目报错travel@1.0.0 dev: `webpack-dev-server--inline --progress --config build/webpack.dev.conf.js
问题原因出现在webpack上。如想了解webpack请走官网，如果想了解webpack里面的文件结构，下面推荐一篇博客https://blog.youkuaiyun.com/shan1991fei/article/details/82630656解决方案这个东西我没有深入研究原理，只是用一种办法解决了问题。<1>卸载你项目中的webpac...原创 2019-12-09 09:27:34 · 17716 阅读 · 5 评论 -
新建一个Vue项目
目录卸载旧的vue-cli安装node.js安装Vue脚手架使用vue-cli创建项目启动项目效果展示卸载旧的vue-clinpm uninstall vue-cli -g安装node.js进入node.js官网下载LTS版本的node.js,地址如下https://nodejs.org/en/download/...原创 2019-12-08 19:44:42 · 150 阅读 · 1 评论 -
Vue中的计算属性
目录干嘛用？效果展示methods方法和computed方法的区别干嘛用？Vue中的计算属性可以把多个属性值拼接起来显示。计算属性的代码如下<template> <div id="app"> {{fullName}} {{age}} </div></templ...原创 2019-12-07 10:36:56 · 226 阅读 · 1 评论 -
Vue的生命周期钩子
目录什么是生命周期函数生命周期钩子图示Vue中的11个生命周期钩子什么是生命周期函数vue实例在某一个时间点会自动执行的函数生命周期钩子图示Vue中的11个生命周期钩子...原创 2019-12-07 09:36:58 · 194 阅读 · 1 评论 -
安装vue-cli报错-4048 unlink...
目录安装Vue-cli的方法Vue报错信息解决方案安装Vue-cli的方法https://cli.vuejs.org/zh/guide/installation.htmlVue报错信息解决方案先输入npm cache clean --force再重新执行安装vue-cli的命令np...原创 2019-12-04 15:44:22 · 816 阅读 · 0 评论 -
Vue之如何封装组件，实现简单的组件复用
目录封装复用配置路由效果如下封装首先，我们找到项目的components目录，在里面新建一个文件，我起名为myComponents.vue然后，我们在文件中写入如下代码。我简单已一个图片为例，如果这个图片可以复用，那么其他内容当然也可以复用喽<template> <img src="../../public/set...原创 2019-12-03 18:58:31 · 1992 阅读 · 1 评论 -
VUE之npm install报错 This usually happens because your environment has changed since running `npm insta
原创 2019-11-04 20:13:57 · 699 阅读 · 5 评论 -
VUE错误之 Parsing error: x-invalid-end-tag.eslint-plugin-vue
原创 2019-11-04 19:58:02 · 4351 阅读 · 4 评论