Vue
流浪的的鱼
这个作者很懒,什么都没留下…
展开
-
使用nginx反向代理实现vue项目打包部署上线
在开发完成vue项目的时候,面临的问题就是打包部署。打包很简单,只需要执行npm run build命令即可。但是部署的时候需要使用nginx做反向代理,因为开发的时候我们使用的是webpack提供的proxyTable做的代理从而解决了开发环境的跨域请求问题。使用nginx反向代理根据前面写到的下载安装nginx服务器配置nginx server { li...转载 2019-12-16 16:42:50 · 1095 阅读 · 0 评论 -
css3动画(从上、左下、左、右进入页面)
/*动画-start*/.animated { animation-duration: 1.5s !important; -webkit-animation-duration: 1.5s !important; animation-fill-mode: both !important; -webkit-animation-fill-mode: both !imp...原创 2019-11-01 10:56:36 · 7101 阅读 · 1 评论 -
nuxt第三方插件(px2rem,mint-ui,swiper,video,百度统计)
安装px2rem首先下载flexible.js可加载阿里的cdn文件 http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js将下载好的文件放到static也就是静态资源文件中1.安装:npm install --save postcss-px2rem2.在nuxt.cofig.js中在head上...原创 2019-10-23 14:53:31 · 3216 阅读 · 0 评论 -
vue及js常用方法(更新中)
原生js判断某个元素是否有指定的class名的几种方法var p = document.getElementsByTagName('p');for(var i = 0;i <p.length;i++){ //第一种方法,用classList这个H5 API,有兼容性问题 if(p[i].classList.contains('test')==true){ cons...原创 2019-10-17 14:57:39 · 665 阅读 · 0 评论 -
使用vuex的state状态对象的5种方式
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试。下面给大家来贴一下我的vuex的结构下面是store文件夹下的state.js和index.js内容//state.jsconst state = {headerBgOpacity:0,loginStatus:0,count:66}export default state/...转载 2019-08-23 13:40:32 · 468 阅读 · 0 评论 -
在Vue中使用Animate.css库
地址:https://daneden.github.io/animate.css/下载:npm install animate.css --save在入口文件引用import animate from 'animate.css'Attention Seekers 注意力寻求者(9个)样式 简介 bounce 弹跳 flash 闪 pul...原创 2019-08-29 09:28:15 · 232 阅读 · 0 评论 -
Vue推荐VSCode开发必备的插件
首先这几个是VSCode推荐Vue开发必备的插件Vetur —— 语法高亮、智能感知、Emmet等 EsLint —— 语法纠错 view in browser —— 如何用浏览器预览运行html文件 Debugger for Chrome —— 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个) Auto Close Tag —— 自动闭合HTML/X...原创 2019-09-03 10:22:11 · 3526 阅读 · 0 评论 -
nginx部署laravel和vue
本次的配置只使用一个域名的情况下来部署前后端分离的项目,后端采用的技术是laravel,前端采用的技术是vue。前提说明,下文涉及到的代码放置位置,应该根据你实际情况决定。首先,将laravel的代码上传至 /data/web/project/api,然后将vue进行打包,将打包的dist文件上传至/data/web/project/app,最后修改nginx配置文件。上传laravel代码...原创 2019-09-03 16:45:07 · 1035 阅读 · 0 评论 -
Nuxt 部署(源代码去掉css,window.__NUXT__数据,图片base64,端口)
1. 本地打包npm run build2.打包后,将以下文件上传至服务器.nuxtstaticnuxt.config.jspackage.json3.在服务器上安装相应依赖cd nuxtSSRnpm install4.Nginx配置代理服务# 新建一个nuxtserver服务upstream nuxtserver{ server 127.0...原创 2019-10-10 11:10:54 · 2549 阅读 · 0 评论 -
vue-$event事件
原创 2019-08-22 16:56:10 · 1475 阅读 · 0 评论 -
VUE:this.$route 和 this.$router区别
原创 2019-08-22 16:55:12 · 212 阅读 · 0 评论 -
js数组与字符串的相互转换方法
原创 2019-08-22 16:50:52 · 109 阅读 · 0 评论 -
使用vue-axios插件
一、vue-axios插件的安装使用 npm:$ cnpm install axios二、vue-axios插件的引用出于页面的优雅考虑,使用vue2.0 vue-cli脚手架的代码风格去实现。1、创建引用文件:用ide打开项目文件,在src目录下创建文件夹axios,后在文件夹内创建index.js。如图:2.编写引用的相关代码:step1: axios下的in...转载 2018-09-27 10:09:08 · 1449 阅读 · 0 评论 -
axios请求失败,TypeError: Cannot set property 'article' of undefined vue
调试vue程序,使用axios请求后台报错,源码如下:getGoodsList () { axios.get('/v1/random') .then(function (response) { this.article = 'sss' console.log(response.title) co...转载 2018-09-27 10:14:50 · 322 阅读 · 0 评论 -
VUE动态绑定video的src不能播放
VUE的$refs特性:https://cn.vuejs.org/v2/api/#ref给video绑定个ref值<video ref='video' controls>您的浏览器不支持 video元素。</video>在需要动态绑定的方法里用$refs动态设置srcthis.$refs.video.src = res.data.video_ur...原创 2018-09-28 18:00:50 · 23553 阅读 · 4 评论 -
Laravel5.5+Vue+Element-ui 环境搭建
1. compose和node的安装这两个的安装网上教程多的是,大家可自行下载安装。2. Laravel5.5 安装3. Vue的安装Laravel 默认是带vue环境的,所以我们可以非常方便的搭建使用安装的话我们直接进入项目的根目录执行 npm install ,等待一段时间就OK了然后,我们来写一些代码来测试下,我们进入 resources\assets 目录后...原创 2018-09-30 11:30:04 · 953 阅读 · 0 评论 -
Vue生命周期
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-10-09 10:54:24 · 237 阅读 · 0 评论 -
Vue中使用Editor,报错 Cannot read property 'scrollTo' of undefined
打开ueditor下的ueditor.all.js文件中, 搜索 lastScrollY 如图在 lastScrollY != 0 后 加上 && !me 就好了,亲测有效原创 2018-11-12 15:10:32 · 5834 阅读 · 1 评论 -
VUE常用插件库总结
一、UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- ...转载 2019-08-21 15:50:51 · 458 阅读 · 0 评论 -
在Vue中使用js-cookie
原创 2019-08-22 16:48:10 · 3293 阅读 · 0 评论 -
vue-cli 脚手架 安装
vue-cli 脚手架 安装一、 node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本);2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:http://nodejs.cn/download/注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上;二...转载 2018-09-26 09:36:01 · 105 阅读 · 0 评论