有留意到看板娘这么个东西,简直就是我们程序员+动漫迷的挚爱.但是回观网上,大多只是在老旧的html的静态引入.vue甚至也有几个不怎么维护的,还是老旧的不行的SDK2.X的版本.这这这这!我们的react开发者怎么能忍!!所以,我基于SDK4.X(没错,就是live2d官网最新的那个)封装了一个咱们react开发者的看板娘·~~接下来这篇文章就是我们react开发者引入看板娘的过程啦~ 首先上示例图 熟悉的logo加上看板娘的同时存在~,还用我说什么吗~ 这就是咱们react的看板娘啦!! 引入…

目录介绍 src:里面的每个文件夹就是一个页面,页面开发相关的组件.图片和样式文件就存放在对应的文件夹下. tpl:里面放置模板文件,当webpack打包时为html-webpack-plugin插件提供模板. tsconfig.json:typescript的配置文件,需要自己新建并编写. webpack.config.js:webpack的配置文件,需要自己新建并编写. config:文件夹下的index.dev.js用来配置开发模块,index.js配置发布模块.将会在webpack.co…

live2d https://l2dwidget.js.org/dev.html https://github.com/xiazeyu/live2d-widget.js 看板娘 要切换看板娘吗? http://dzblog.cn/article/5aca31ccd0597d4709f5337a http://dzblog.cn/cases/react-toutiao/index.html http://dzblog.cn/blog…

<audio src="./res/audio/alarm.mp3" autoplay="autoplay" loop="loop" controls > <track kind="captions" /> 您的浏览器不支持 audio 元素. </audio>   webpack.config.js配置: new CopyWebpackPlugin([ { from: path.resol…

title: Hexo 添加 Live2D看板娘 二次元什么的最喜欢了[大好きです] 准备 项目地址 live2d模型 部分模型预览 开始 首先进入Hexo博客根目录安装live2d插件 $ npm install --save hexo-helper-live2d 接着,修改根目录下的 _config.yml 文件 添加自定义配置(下面提供我的配置做参考): ## live2d live2d: enable: true scriptFrom: local pluginRootPath: liv…

前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习. 基础环境 node/npm webpack 现代JavaScript程序应用的模块打包器.它主要分析你的项目结构,找到JavaScript模块以及其他一些浏览器不能直接运行的拓展语言(Scss.less.TypeScript),将其转换和打包为合适的格式供浏览器使用. 项目创建 创建一个文件夹f…

react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redux-saga的核心配置会加以讲解,通过这个项目,可以系统的了解react技术栈的主要知识,避免搭建一次后面就忘记的情况. 从webpack开始 思考一下webpack到底做了什么事情?其实简单来说,就是从入口文件开始,不断寻找依赖,同时为了解析各种不同的文件加载相应的loader,最后生成我们希望的…

项目代码 从零开始简书项目 ​ 从我第一次接触vue这个框架已经过了快一年的时间,陪伴我从前端小白到前端工程师,前端时间也是使用了 ts+vue这样的组合写代码,明显感觉vue与ts似乎没有产生比较好的化学反应,而vue这一块,也算是比较熟练了,对底层也有一些了解,我开始了react的产生了一些兴趣 ​ 第一次看react慕课网上的一个免费课程React 16实现订单列表及评价功能,还不错,让我大致了解了react也就是jsx的一些代码风格 因为可能写vue的时间比较久了,转到react还没有我…

基于Abp React前端的项目建立与运行 目录 基于Abp React前端的项目建立与运行 1 Abp项目配置 2 运行WebApi后端项目 2.1 创建C3D数据库,并且将数据库对应链接字符串替换 2.2 建立数据库进行数据迁移 2.3 运行WebApi项目 3 运行React前端项目 3.1 利用yarn包安装工具 3.2 运行React项目 3.3 使用React客户端的意义 4 React 前端项目架构 4.1 技术栈 4.2 设计原则 4.3 mobx架构 4.4 React前端整体…

最近逛博客,发现好多博主都加了网页看板娘,简直可爱到血槽空了,赶紧学习模仿改造了一下~ 给博客园的博客也添加了看板娘!!就在右边~喜欢的请打赏我~ 不过因为移植过来比较复杂,就不出教程啦~记得多来调教她哦~ 效果展示==> 源码下载==> 官网==> 官网示例sdk下载==> 开发备注:chrome直接调试会有跨域问题,建议更换火狐或者搭建本地服务器或者在服务器端调试~…