Vue-Cli3.0脚手架搭建
一. 什么是Vue-Cli？Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，也就是我们通常说的Vue框架。 二. 安装与卸载Vue-Cli Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。所以请各位查看下自己的node版本是否满足打开命令行输入 node -v 查看自己是否安装了Vue-Cli脚手架打开命令行输入(注意是大写V) vue -V 如果你的版本不是3.0+ 请卸载当前系统的Vue-Cli 在命令行输入 npm uninstall vue-cli -g # ORyarn global remove @vue/cli ...
VSCode+ESlint自动修复代码格式错误
一. 开篇自从知道有ESlint这个东西就一直想弄，最近搭建了Vue-Cli3.0的框架并引入ESLint折腾来折腾去，终于是完成了 先看下效果Vu-Cli3.0搭建框架传送门 二. 什么是ESlintESLint属于一种QA工具，是一个ECMAScript/JavaScript语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。 三. 为什么要使用ESLint 团队合作每个人都是独立的，每个人的代码风格也是独立的，开发出来的代码就像一锅粥。A程序员不喜欢B程序员的，B程序员看不惯Ade； 独特的人独特的代码风格，各种代码不规范。想修改又不是自己写的，不改看着又难受； 减少 ...
Vue-Vuex的使用
记录在Vue中如何使用Vuex。 一. 什么是Vuex — 这里采用官方说明 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 总结: 多页面共享一个数据，不用每个页面重复请求一样的数据，单向数据流。 二. 如何安装？ 先创建Vue的项目 vue init webpack my-vue-demo 安装Vuex插件 n ...
CSS实现一个气泡框
一. 需求: CSS代码实现一个带三角型的气泡框 二. 如何实现 创建页面结构 <div class="app"> <div class="wrap" > 好好学习天天向上 </div> <button class="button">点击</button></div> Javascript // 将显示的元素通过js放在 按钮的位置window.onload= ()=>{ let $ = function (className){ return docu ...
在Vue中使用axios + 封装一次axios
一. 什么是axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 官方文档 二. 如何安装到项目中npm install axios 三. 如何在项目中使用 如何发送GET请求 axios.get('http://jsonplaceholder.typicode.com/posts',{ params:{ id:1 } // ?拼接的方式传参}).then((res)=>{ // 请求成后的回调 console.log(res);}).catch((e ...
鼠标滚动事件的总结
一. 什么是鼠标滚轮事件？ 鼠标滚轮事件: 用户通过鼠标滚动触发的事件。 二. 如何使用？鼠标滚动事件一直存在着兼容性问题，主要区分为是火狐浏览器，非火狐浏览器 在非火狐浏览器下如何使用(IE,360,Chrome)。let wheel = function (){ console.log('Hello world')};window.onmousewheel = document.onmousewheel = wheel; 问题: 这样写在单页面应用中离开当前页还是存在事件 只能通过强行赋值的方式清除 window.onmousewheel = docume ...
关于video标签的总结
一. video标签的基本属性及基本事件。 基本属性 autoplay: false 是否自动播放controls: false 是否显示播放控件loop: false 是否是循环播放muted: false 是否是静音播放poster:"" 在播放第一帧之前显示的海报preload: 视频预加载策略 auto: 预加载视频元数据和缓冲一定时长 metadata: 只加载 元数据(第一帧画;时长) none ...
Vue中使用vue-video-player(Nuxt.js版)
一. 安装需要的模块npm install vue-video-player --save 二. 如何引入插件 在plugins文件夹中添加video.js。内容如下import Vue from './node_modules/vue'import VideoPlayer from './node_modules/vue-video-player'import './node_modules/video.js/dist/video-js.css'import './node_modules/vue-video-player/src/custom-theme.css'// import './ ...