VUE
文章平均质量分 93
_双眸
GitHub:https://github.com/BothEyes1993
【所有demo地址】
1
2
展开
-
Axios使用及源码解析
简介axios 是一个用于浏览器和Node.js上的基于 Promise 的http网络库。大纲使用方式安装:npm install axios使用://引入axiosconst axios = require('axios');import axios from 'axios';axios的四种使用方式1. axios(config)直接将相关配置包括请求url作为参数传入到axios方法中axios({ url: 'https://jsonplaceholder.原创 2021-06-15 17:39:18 · 922 阅读 · 0 评论 -
webpack4下import()模块按需加载,打包按需切割模块,减少包体积,加快首页请求速度
一:背景因为项目功能越加越多,打包后的体积越来越大,导致首页展示的时候速度比较慢,因为要等压缩的js的包加载完毕。首页展示的时候只需要对应的js,并不需要全部的js模块,所以这里就可以用按需加载,这里webpack4官方文档提供了模块按需切割加载,配合es6的按需加载import()方法,可以做到减少首页包体积,加快首页的请求速度,只有其他模块,只有当需要的时候才会加载对应js。这里参考一些...原创 2019-05-16 01:12:49 · 2135 阅读 · 0 评论 -
内网穿透访问Vue项目的时候出现Invalid Host header解决办法
适用场景:在本地的Vue-cli3项目, 需要其他人浏览. 如果没有外网的服务器, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑.Mac内网穿透工具:natappInvalid Host header当启动了natapp以后, 就这个用natapp提供的域名, 来访问本地的127.0.0.0:8080(端口自己设置), 如果Vue项目启动, 外网就可以通过域名来访问...原创 2019-05-09 12:07:38 · 4391 阅读 · 0 评论 -
使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结
打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools背景最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类似fundebug)听起来高大上的SDK,其实就是一个JS文件,类似平时开发中我们引入的第三方库:const moment = require('moment');moment().format...原创 2019-04-30 14:04:43 · 936 阅读 · 0 评论 -
仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题
最近使用ElementUI做项目的时候用Babel的插件babel-plugin-component做按需加载,使得组件打包的JS和CSS包体积大大缩小,加载速度也大大提升,所有想模仿做一个组件库也来做下按需加载。首先用Vue CLI 3.0新建一个项目vue create bes-ui注意的是cli3的脚手架用的Babel7的配置,只有babel.config.js文件,所以要自己添加...原创 2019-04-22 12:41:50 · 2668 阅读 · 0 评论 -
browserslist 目标浏览器配置表
为什么需要:根据提供的目标浏览器的环境来,智能添加css前缀,js的polyfill垫片,来兼容旧版本浏览器,而不是一股脑的添加。避免不必要的兼容代码,以提高代码的编译质量。共享使用browserslist的组件们:组件名功能Autoprefixerpostcss添加css前缀组件bable-preset-env编译预设环境 智能添加polyfill垫片代码...原创 2018-12-20 18:27:07 · 3210 阅读 · 2 评论 -
Vue-resource和Axios对比以及Vue-axios
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios。vue-resource特点vue-resource插件具有以下特点:1,体积小vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。2,支持主流的浏览器和Vue.js一样,vue-resource除了不支持I...原创 2018-12-14 23:44:02 · 568 阅读 · 1 评论 -
vue-i18n国际化实例
demo 场景需求分析需求很简单,左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本。切换成英文版本:三、实现国际化1、我们得先有开发环境,先有项目跑起来,我推荐如果是喜欢用 vue 的小伙伴,可以尝试 vue-cli 官方脚手架2、我们需要安装 vue-i18n, 推荐 npm 包依赖:$ npm install vue-i18n...原创 2018-12-14 23:30:30 · 234 阅读 · 0 评论 -
AMD 规范与CMD 规范概要
命名冲突和文件依赖,是前端开发过程中的两个经典问题。通过模块化开发来解决。AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD 规范在这里:https://github.com/seajs/seajs/issues/242AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程中对模块...原创 2018-12-14 23:18:14 · 135 阅读 · 0 评论 -
Vue引入第三方JavaScript库和如何创建自己的Vue插件
一 第三方JavaScript库前言.vue文件 中不解析 script标签引入js文件,只能用 import 引入有两种用法:1.import a from ‘…/a’2.import ‘…/a’区别在于第一个你要用到export导出之后 才能用import导入。第二个是直接引入 和script标签是一样的. 但是它作用在自己的js文件中。在使用vue做项目的时候,我们一般不将c...原创 2018-12-14 23:08:31 · 411 阅读 · 0 评论 -
如何去除vue项目中的 # — vue路由的History模式
前言在创建的 router 对象中,如果不配置 mode,就会使用默认的 hash 模式,该模式下会将路径格式化为 #! 开头。添加 mode: ‘history’ 之后将使用 HTML5 history 模式,该模式下没有 # 前缀,而且可以使用 pushState 和 replaceState 来管理记录。关于 HTML5 history 模式的更多内容,可以参考官方文档:https:/...原创 2018-12-14 22:45:47 · 322 阅读 · 0 评论 -
VUE的两种跳转push和replace对比区别
router.push(location)在vue.js中想要跳转到不同的 URL,需要使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,当用户点击浏览器后退按钮时,则回到之前的 URL。当你点击<router-link>时,这个方法会在内部调用,所以说,点击<router-link :to="...">等同于调用ro...原创 2018-12-14 20:18:42 · 1277 阅读 · 0 评论 -
vue-cli项目打包多个与static文件同级的静态资源目录(copy-webpack-plugin插件的使用)
场景业务要求能够直接通过 “域名+/file”的方式访问静态资源的html,然而产品绝对static暴露在url中不好看又不能直接将html放在static中。所以想到了既然static可以直接访问,那么给他新加几个文件目录应该不是问题。重点在webpack.dev.conf.js和webpack.prod.conf.js两个文件中,都有这样一段配置代码:// copy custom st...原创 2018-12-14 19:58:51 · 842 阅读 · 0 评论 -
Vue中的静态资源管理(src下的assets和static文件夹的区别)
你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢?资源打包为了回答这个问题,我们需要了解webpack是如何处理静态资源的。在所有的*.vue文件中你所有的templates 和CSS 都被vue-html-loader 和css-loader 查询资源的URLs解析. 比如说, 在img src=”./logo.png”和b...原创 2018-12-14 19:51:17 · 8118 阅读 · 0 评论 -
package和package-lock区别;dependencies和devDependencies区别
package和package-lockpackage.json: 主要用来定义项目中需要依赖的包package-lock.json: 在 npm install时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。’^’ : 放在版本号之前,表示向后兼容依赖,说白了就是在大版本号不变的情况下,下载最新版的包项目中引入的包版本号之前经常会加^号,每次...原创 2018-12-19 16:04:16 · 1318 阅读 · 0 评论 -
css3打包后自动追加前缀插件:autoprefixer
用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了,自己不需要做什么改动就会自动加前缀:下面一起看看涉及到autoprefixer这个插件的一些配置:1,postcss配置写在.postcssrc.js,2,浏览器规则则写在package.json上,3,开发环境(build/webpack.dev.conf.js)样式相关的loader4,生产环境(...原创 2018-12-19 15:21:42 · 1164 阅读 · 0 评论