Jioho的博客

文章目录js 实现代码格式化调用 api实现代码高亮引入用法highlight.js 高亮代码不换行innerText 和 innerHTML 有什么区别解决 innerHTML 渲染为真实节点的问题上色后都是 span 标签，是怎么做到换行的？vue 中使用 highlight.js用指令使用 js_beautify关于文章开头的编辑器实现一个简易版的网页编辑器，没有智能提示，也不会自动高亮标签（需要手动高亮）用的是 vue+ Highlight.js + js-beautify效果如下图js

video-js 库使用 自定义组件video-js 库原始版的库：github/videojsvue 封装过的组件：npm/vue-video-player这是一个非常棒的播放器，还兼容 hls 的直播流（m3u8）格式的等，还支持自定义组件，基本上满足播放器的很多功能了。如果想了解直播的可以看下以前的文章 vue 项目进行直播视频 vue-video-player后面更多会说自定义组件说一说我的遇到的坑：本来用播放器播放直播流 OK 了，可是 UI 和我说，播放器在回放的时候，希望像普

Vue项目引入使用svg随着项目页面的增多，UI 库的 svg 图标渐渐不够用了。于是 UI 给了一大堆的 svg 新的图标，一个个引入显然不实际，于是把 svg 放到指定文件夹，然后批量引入，通过组件去使用这一堆 svg。项目结构|--build| `-- webpack.base.js`--src `-- assets `-- icons |-- index.js `-- svg `--

使用 webpack 搭建 vue 开发环境（二）接着上一回，第二篇文章开始更进一步的配置老规矩，基于 v0.0.1 的代码继续开发，这次配置结束后的代码将会划分为 v0.0.2使用 less 完善开发体验安装使用 css 预处理器-lessnpm install --save-dev less less-loader修改配置，因为 test 是可以接收正则表达式的，那么对于 css和less的匹配，我们可以这样写：test: /\.(less|css)$/,webpack.base.js

webpack/vue-cli 中的 publicPath / 和 ./ 的区别在说这个问题之前，vue-cli 的配置文档已经说的非常清楚了 publicPath而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子，我们只知道 publicPath 可以配置'',./ 或者 /my-app/ 这种自定义 URL。但是，你真的理解 webpack 里面的 publicPath 吗？准备环境nginx 模拟一个真实的 URL 和高仿真项目

只要一直在路上，一切都不算远使用 webpack 搭建 vue 开发环境（一）虽然 vue-cli 已经非常成熟，成熟到可能自己写的 webpack 性能上不一定比得上 vue-cli。当然只是性能上，在实用性，拓展性，学习性上，自己能写出符合自己工程项目的 webpack 配置才是最好的所有的代码都已经放在了 码云@Jioho/webpack_config毕竟 github 有点慢~这边的网络上不去master 分支的代码是每个版本迭代后最新的代码，所以第一篇文章的最终代码在 v0.0.1 分

分析源码系列 - Vue.set / vm.$set 详解文章目录分析源码系列 - Vue.set / `vm.$set` 详解作用和概念描述小结为什么用过 set 添加的就是响应式属性开始看源码调试模式下，进入 set 方法添加监听 `defineReactive$$1` 方法dep 分析observe 分析总结作用和概念描述官方文档：Vue-set向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 prope

Vue 组件 data 为什么必须是函数文章目录Vue 组件 data 为什么必须是函数要理解这个问题，得从原型说起3 个栗子 理解后在看源码使用 debugger，看下 new vue 发生了什么1. 走到了初始化 vue 的步骤2. 来到 init 方法内部3. 来到 initState 方法4. initData 方法小结new Vue 的源码简单的看下。那继续看今天主角 `components` 的实现1. 进入到了 initAssetRegisters 初始化登记注册（组件注册）2. exten

vue 项目进行直播视频最近电商直播非常火，于是接到需求搞搞！看了很多相关的文章，没看出有啥不同，最后直接采用 vue-video-player 来开发。直播流返回的是m3u8格式的，flv格式的播放不了，可能是我配置问题。然后关于这个插件可以用 flash 。我也没去深究，毕竟谷歌都快放弃flash了。安装插件npm install vue-video-player videojs-...

如题前几天在搭建新的项目的时候，脚手架升级到了 vue-cli4.x 的版本，然后像往常一样创建了新的项目。可是在安装依赖的过程中，node-sass 需要在 github 上下载一个依赖包。一直没安装成功，后来改用了 cnpm (淘宝的镜像)去安装全部依赖。依赖是装上了，可是引发了下面的很多问题vscode 对于 vue 文件无法进行智能提示没有智能提示那简直比白板面试还要难受，甚至乱...

腾讯地图选择地址进阶版（二）使用腾讯地图的地图组件，获取用户经纬度和当前地址之前也写过一篇 vue中使用腾讯地图选择地址不过不太完善。因为毕竟要跳转新的页面选择在回调回来，最近也发现了一些新的坑！今天来填坑了腾讯地图相关文档地图选点组件申请腾讯地图的我就不多叙述，跟着提示申请即可效果图：写成组件之前采用的是第二种方式，直接跳转新页面，后来还是问题很多，所以我改成了用 if...

vue 单页面应用分享文章目录vue 单页面应用分享hash(哈希路由的处理)微信验签失败的问题微信配置成功，可是分享出去的标题，图片不是预期设置的微信第一次分享成功，从分享链接进去后二次分享失败微信分享对 hash 路由不太友好，分享经常失败，记录一次踩坑过程hash(哈希路由的处理)只需要把分享的链接 # 替换成 ?#比如要分享的链接是:http://test.com/dist/#...

文章的代码和大部分描述转载自：Vue.js 技术揭秘 | 生命周期。感谢大佬总结分析的vue源码。这里做一个笔记学习生命周期beforeCreate -> created相关代码：callHook(vm, "beforeCreate")initInjections(vm) // resolve injections before data/propsinitState(vm)i...

win下 vue-cli2 和 vue-cli3 并存，一起使用开局一张图，内容慢慢编！文章目录win下 vue-cli2 和 vue-cli3 并存，一起使用安装vue-cli版本检验安装是否成功修改vue2和vue3的名称配置环境变量打开环境变量所在位置新建系统变量最后修改Path变量最后。重启电脑就行了vue2和vue3命令，分别代表了vue-cli2 和 vue-cli3的运行环...

文章目录在自己项目或者 vue 中使用可爱的二次元（(Live2D）开始前的小说明：下面开始折腾 `Hexo` 提取这二次元第一步自然是安装 `Hexo` 博客咯安装 Live2D安装了 Live2D 只是相当于一个运行环境，下面还得安装动画资源下载了一堆资源后，终于可以动手了！运行 hexo 博客。看看效果如果预览没问题，那就开始提取文件了！拓展关于vue项目如何使用这些资源在自己项目或者 v...

vue 文件太多懒加载过慢的问题背景项目中的路由达到了 300 多个，所以路由使用了懒加载的方式优化。引发了开发的时候热更新特别慢（因为路由使用的懒加载，热更新的时候需要把内容重新准备一次，所以特别忙），卡在70%需要加载好一会才更新遇到的坑测试环境热更新特别慢使用 () => import('文件名') 进行懒加载的时候打包不了（卡在某个进度不动了）解决方法测试环境热更...

vue 自定义组件使用 v-module 属性在 vue 中使用 v-module 可以同步更新视图和数据源的值，常用于输入框（输入框可视为组件），输入后直接同步了 data 的值在自定义组件中使用 v-module 同步组件和 data 的值。以首页全屏广告为例：自定义组件先定义一个组件，接收一个show参数。页面内需要加上 model。页面点击后，触发model 绑定的方法，修改对...

腾讯地图选择地址引发的一系列问题使用腾讯地图的地图组件，获取用户经纬度和当前地址遇到的问题：选择地址的回调路径不兼容哈希路由回调后腾讯地图返回了完整的地址，而我需要省市区具体名称获取省市区具体名称后，如何和后端的数据对上对应的 ID腾讯地图相关文档地图选点组件申请腾讯地图的我就不多叙述，跟着提示申请即可效果图：开始使用我采用的是地图 API 的第二种方式，跳转新的...