菜单

js_脚本之家,热模块替换澳门太阳娱乐手机登录

2020年3月30日 - 澳门太阳娱乐手机登录

介绍一下,已经有很多的vue分页的组件了,大家都是大同小易,那么我就结合自身的使用,写出了一片文章

本文介绍了react-webpack2-热模块替换[HMR],分享给大家,具体如下:

首先在新建一个分页模块

模块热替换功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载页面。这使得你可以在独立模块变更后,无需刷新整个页面,就可以更新这些模块,极大地加速了开发时间。

在模块中引入相应的代码,

babel 配置

    共{{dataNum}}条记录 第 {{cur}} / {{all}} 页   <//点击上一页   <//点击第一页时显示   {{ index }}//页码   >//点击下一页   > //点击最后一页时显示   共{{all}}页 // 共有多少页  

.page-bar a { width: 34px; height: 34px; border: 1px solid #ddd; text-decoration: none; position: absolute; top: 50%; left: 50%; transform: translate; /*margin-left: -1px;*/ line-height: 34px; color: #333; cursor: pointer}.page-bar .li_a a:hover { background-color: #eee; border: 1px solid #40A9FF; color: #40A9FF;}.page-bar a.banclick { cursor: not-allowed;}.page-bar .active a { color: #fff; cursor: default; background-color: #1890FF; border-color: #1890FF;}.page-bar i { font-style: normal; color: #d44950; margin: 0px 4px; font-size: 14px;}

export default { //显示的声明组件 name: "paging", //从父级组件中传值过来的,你可以自己设置名字,但是需要跟父级传入的名字一致! props : ["dataAll","dataCur","datanum","dataDatanum"], data() { return { all: this.dataAll, //总页数 cur: this.dataCur ,//当前页码 num: this.datanum , //一页显示的数量 奇数 dataNum: this.dataDatanum,//数据的数量 } }, watch: { cur: function { //父组件通过change方法来接受当前的页码 this.$emit //这里是直接点击执行函数 } }, methods: { btnClick: function { //页码点击事件 if { this.cur = data } }, pageClick: function() { console.log('现在在' + this.cur + '页'); //父组件通过change方法来接受当前的页码 //这里是点击下一页执行函数 this.$emit } }, computed: { indexs: function() { var left = 1; var right = this.all; var ar = []; if(this.all >= this.num ) { if(this.cur > 3 && this.cur < this.all - 2) { left = this.cur - /2 right = this.cur + /2 } else { if { left = 1 right = this.num } else { right = this.all left = this.all - ; } } } while { ar.push left++ } return ar } }}

//这是我自己设置的,可以根据情况不用设置不同的样式  //这里时通过props传值到子级,并有一个回调change的函数,来获取自己传值到父级的值   .page { width: 100%; min-width: 1068px; height: 36px; margin: 40px auto; }import Paging from './paging'export default { name: "homepage", components: { Paging }, data() { return { all: 40, //&#24635;&#39029;&#25968; cur: 1, //&#24403;&#21069;&#39029;&#30721; num: 7, //&#19968;&#39029;&#26174;&#31034;&#30340;&#25968;&#37327; &#24517;&#39035;&#26159;&#22855;&#25968; dataNum: 400, //&#25968;&#25454;&#30340;&#25968;&#37327; } }, methods: { //&#23376;&#32423;&#20256;&#20540;&#21040;&#29238;&#32423;&#19978;&#26469;&#30340;&#21160;&#24577;&#25343;&#21435; pageChange: function { this.cur = page } }}

需要先下载npm install --save-dev react-hot-loader@3.0.0-beta.6

最后重新保存,重新运行

然后在 .babelrc 中配置

 npm run dev 
{ "presets": [ ["es2015", {"modules": false}], // webpack 2 中需要这样配置禁用 "stage-2", "react" ], "plugins": [ "react-hot-loader/babel" // 开启 React 代码的模块热替换 ]}

可以根据自己喜好来自己动手做一个分页,我在其它人的基础之上添加了页码以及当前页面数,也可以添加跳转的页数,也可以更改css样式来改变!

webpack 配置

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

 entry: { app: [ 'react-hot-loader/patch', // 开启 React 代码的模块热替换 'webpack-dev-server/client?http://localhost:8080', // 为 webpack-dev-server 的环境打包代码 // 然后连接到指定服务器域名与端口,可以换成本机ip 'webpack/hot/only-dev-server', // 为热替换打包好代码 // only- 意味着只有成功更新运行代码才会执行热替换 './index.js' // 我们 app 的入口文件 ], vendor: ['react', 'react-router'] // 公共文件打包 }

出口配置 publicPath,

 output: { path: defPath.DEV_PATH, // 所有输出文件的目标路径 filename: 'js/bundle.js', publicPath: '/', chunkFilename: '[name].chunk.js' },

plugins 添加相应插件

 plugins: [ new webpack.HotModuleReplacementPlugin new webpack.NamedModulesPlugin() // 控制台输出模块命名美化 ]

devServer 配置 HMR

 devServer: { // ... 其他配置 hot: true, // 开启服务器的模块热替换 contentBase: defPath.DEV_PATH, // 输出文件的路径 publicPath: '/' // 和 output 的 publicPath 保持一致 }

应用代码中修改

应用代码中需要做很大的改动

拆分原入口文件

新建一个根组件,存放原入口文件中的路由配置部分

 /* Root, Router 配置 */ import React from 'react'; import {Provider} from 'react-redux'; import {browserHistory, Router} from 'react-router'; import {syncHistoryWithStore} from 'react-router-redux'; import store from '../store/index'; // 引入 配置后的 store import routes from '../routes.js'; // 子级路由配置 // 创建一个增强版的history来结合store同步导航事件 const browhistory = syncHistoryWithStore(browserHistory, store); const Root = () => (      ); export default Root;

 /* app/js/index.js 入口文件, 配置 webpack 热加载模块 */ import '../scss/index.scss'; import '../scss/commoncom.scss'; import React from 'react'; import ReactDOM from 'react-dom'; import {AppContainer} from 'react-hot-loader'; // 引入 react-hot-loader 提供的容器 import injectTapEventPlugin from 'react-tap-event-plugin'; // 引入总路由的配置模块 import Root from './containers/Root'; // 定义要挂载的 DOM 节点 const mountNode = document.getElementById; // react 的插件,提供onTouchTap() injectTapEventPlugin(); // 封装 render 函数 const render =  => { ReactDOM.render((    ), mountNode); }; // 初始化调用 render; // 配置需要热模块替换的条件 if (module.hot && process.env.NODE_ENV !== 'production') { // 处理对特定依赖的更改 module.hot.accept('./containers/Root',  { console.log; } // 从DOM 中移除已经挂载的 React 组件 然后重装 ReactDOM.unmountComponentAtNode; render; }

以上就可以使用 webpack 2
模块热替换,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图