webpack+vuejs 从0到1写一个分页组件

原创 走火爱上鱼 教程 日常杂记 725阅读 2017-05-11 20:08:03 举报

webpack+vuejs 这样的搭配目前是很流行的,不过我发现网上都是写好的项目,很少有将从怎么配置webpack运行vue文件开始写一个组件的。下面我就来一步一步讲解如何用webpack跑一个vue组件。不足之处,还请指出,谢谢。

1.配置webpack。(前提是你已经按照了nodejs)

在你的C盘里面新建一个文件夹我这里命名为myProject1,然后新建一个文件夹app,里面再来一个文件夹components以及一个文件夹index,index里面放一个index.html以及inex.js。然后在cmd里面cd到myProject1 运行命令npm init后一直回车,你的文件夹会向下面一样

webpack+vuejs从0到1写一个分页组件

然后通过npm按照一系列后面你要用到的模块

npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime html-webpack-plugin babel-preset-es2015 babel-runtime@5 --save-dev
npm install vue --save

依赖的模块安装好了以后,让我们在新建一个文件夹命名为build,里面新建一个配置webpack的js 命名为webpack.config.js。配置代码如下。

webpack+vuejs从0到1写一个分页组件

好了,一个可以运行vue单文件的webpack就配置好了。

2.vue组件。

首先在components里面新建一个命名为Favlist.vue的组件,然后在之前的index.html里面调用这个组件,如下图

webpack+vuejs从0到1写一个分页组件

接下来就是在index.js里面引用组件,如下图

webpack+vuejs从0到1写一个分页组件

剩下的就是写一个vue组件我把html,style,js 分别贴出来。

####html
html 代码

####style
html 代码

####js
html 代码

组件也写好了,接下来你只要在当前目录下运行
webpack --display-modules --display-chunks --config build/webpack.config.js
你会发现在myProject1里面多出来一个文件夹output,里面的index.html双击打开就是最后的结果了。截图如下

webpack+vuejs从0到1写一个分页组件

下面是可以直接运行的页面压缩包:

webpack+vuejs 从0到1写一个分页组件

评论 ( 2 )
最新评论
走火爱上鱼 1F 2017-05-12 11:59:20 2F

分页那个吗
先 var page, //当前页
showPages,//默认显示多少页数(不管总页数多少,比如这里默认显示10条),
pagesToal//总页数(这里默认20页)

就是分三种情况 1.取头部的 在当前页(比如page=3)比分页显示的页数的一半(10/2)小 2.取尾部的 在showPages(10)比总页数(20)- 当前页(page=17)大 也就是说这时候要实现的页右边还剩不到默认显示的页面的数量的一半,那是不是最后一页也要显示出来呢 3.处理头尾2种情况 其他都是取当前页左右2边默认显示页数的一半 其实都是为了让当前页显示在中间 要注意 可能会出现默认显示页面比总页面多的情况 比如你接口获取的数据只有4页但是你默认显示10页,这时候要做一个判断的 if ( this.pageTotal<=this.showPage ) {
this.showPage = this.pageTotal;
}

zhaozhangnan 2017-05-12 11:19:39 1F

你好 你能解释一下 那 最小 和最大 取值的 思路么