随笔分类 -  VUE

内网穿透访问Vue项目的时候出现Invalid Host header解决办法
摘要：适用场景: 在本地的Vue cli3项目, 需要其他人浏览. 如果没有外网的服务器, 可以把自己的电脑当做服务器. 这时候需要外网的人能访问到自己的电脑. Mac内网穿透工具：natapp Invalid Host header 当启动了natapp以后, 就这个用natapp提供的域名, 来访问本 阅读全文
posted @ 2019-05-09 12:06 双眸 阅读(1109) 评论(0) 推荐(0) 编辑
vue-multi-module【多模块集成的vue项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署】
摘要：基于 vue cli 2 实现，vue 多模块、vue多项目集成工程 Github项目地址 : https://github.com/BothEyes1993/vue multi module 目标：多模块集成的vue项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署 使用业务场景 1.如果 阅读全文
posted @ 2019-05-09 01:08 双眸 阅读(26064) 评论(1) 推荐(1) 编辑
使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结
摘要：打包JS库demo项目地址：https://github.com/BothEyes1993/bes jstools 背景 最近有个需求，需要为小程序写一个SDK，监控小程序的后台接口调用和页面报错(类似fundebug) 听起来高大上的SDK，其实就是一个JS文件，类似平时开发中我们引入的第三方库: 阅读全文
posted @ 2019-04-30 13:57 双眸 阅读(3388) 评论(0) 推荐(0) 编辑
仿ElementUI构建自己的Vue组件库用babel-plugin-component按需加载组件及自定义SASS主题
摘要：最近使用ElementUI做项目的时候用Babel的插件babel plugin component做按需加载，使得组件打包的JS和CSS包体积大大缩小，加载速度也大大提升，所有想模仿做一个组件库也来做下按需加载。 首先用Vue CLI 3.0新建一个项目 注意的是cli3的脚手架用的Babel7的 阅读全文
posted @ 2019-04-22 12:33 双眸 阅读(7535) 评论(0) 推荐(0) 编辑
browserslist 目标浏览器配置表
摘要：为什么需要 ： 根据提供的目标浏览器的环境来，智能添加css前缀，js的polyfill垫片,来兼容旧版本浏览器，而不是一股脑的添加。避免不必要的兼容代码，以提高代码的编译质量。 共享使用browserslist的组件们： |组件名 | 功能 | | | | |Autoprefixer |postc 阅读全文
posted @ 2018-12-20 18:26 双眸 阅读(4545) 评论(0) 推荐(0) 编辑
package和package-lock区别；dependencies和devDependencies区别
摘要：package和package lock package.json : 主要用来定义项目中需要依赖的包 package lock.json ： 在 时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。 '^' : 放在版本号之前，表示向后兼容依赖，说白了就是在 阅读全文
posted @ 2018-12-19 15:34 双眸 阅读(558) 评论(0) 推荐(0) 编辑
Vue-resource和Axios对比以及Vue-axios
摘要：vue更新到2.0之后,作者就宣告不再对vue resource更新,而是推荐的axios。 vue resource特点 vue resource插件具有以下特点： 1，体积小 vue resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQue 阅读全文
posted @ 2018-12-14 23:40 双眸 阅读(1514) 评论(0) 推荐(0) 编辑
vue-i18n国际化实例
摘要：demo 场景需求分析 需求很简单，左上角 ‘’网易云音乐‘’就是一个中英文切换的按钮，点击弹出提示框，确认切换语言后，实现英文版本。 切换成英文版本： 三、实现国际化 1、我们得先有开发环境，先有项目跑起来，我推荐如果是喜欢用 vue 的小伙伴，可以尝试 vue cli　官方脚手架 2、我们需要安 阅读全文
posted @ 2018-12-14 23:28 双眸 阅读(597) 评论(0) 推荐(0) 编辑
AMD 规范与CMD 规范概要
摘要：命名冲突和文件依赖，是前端开发过程中的两个经典问题。通过模块化开发来解决。 AMD 规范在这里：https://github.com/amdjs/amdjs api/wiki/AMD CMD 规范在这里：https://github.com/seajs/seajs/issues/242 AMD 是 阅读全文
posted @ 2018-12-14 23:18 双眸 阅读(218) 评论(0) 推荐(0) 编辑
Vue引入第三方JavaScript库和如何创建自己的Vue插件
摘要：一 第三方JavaScript库 前言 .vue文件 中不解析 script标签引入js文件，只能用 import 引入 有两种用法: 1.import a from '../a' 2.import '../a' 区别在于第一个你要用到export导出之后 才能用import导入。 第二个是直接引入 阅读全文
posted @ 2018-12-14 23:04 双眸 阅读(3241) 评论(0) 推荐(2) 编辑
如何去除vue项目中的 # — vue路由的History模式
摘要：前言 在创建的 router 对象中，如果不配置 mode，就会使用默认的 hash 模式，该模式下会将路径格式化为 ! 开头。 添加 mode: 'history' 之后将使用 HTML5 history 模式，该模式下没有 前缀，而且可以使用 pushState 和 replaceState 来 阅读全文
posted @ 2018-12-14 22:16 双眸 阅读(897) 评论(0) 推荐(0) 编辑
VUE的两种跳转push和replace对比区别
摘要：router.push(location) 在vue.js中想要跳转到不同的 URL，需要使用 router.push 方法。 这个方法会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。 当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 声明式 阅读全文
posted @ 2018-12-14 20:19 双眸 阅读(16460) 评论(0) 推荐(0) 编辑
vue-cli项目打包多个与static文件同级的静态资源目录（copy-webpack-plugin插件的使用）
摘要：场景 业务要求能够直接通过 “域名+/file”的方式访问静态资源的html，然而产品绝对static暴露在url中不好看又不能直接将html放在static中。所以想到了既然static可以直接访问，那么给他新加几个文件目录应该不是问题。 重点 在webpack.dev.conf.js和webpa 阅读全文
posted @ 2018-12-14 19:59 双眸 阅读(2355) 评论(0) 推荐(0) 编辑
Vue中的静态资源管理（src下的assets和static文件夹的区别）
摘要：你可能注意到了我们的静态资源共有两个目录src/assets和static/，你们它们之间有怎样的区别呢？ 资源打包 为了回答这个问题，我们需要了解webpack是如何处理静态资源的。 在所有的 .vue文件中你所有的templates 和CSS 都被vue html loader 和css loa 阅读全文
posted @ 2018-12-14 19:52 双眸 阅读(2303) 评论(0) 推荐(0) 编辑