前端Webpack+Vuejs 从0到1写一个分页组件

前端开发工具软件
ios_前端开发工具
手机做前端开发工具
手机网页前端一般用什么开发工具

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

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

在你的C盘里面新建一个文件夹我这里命名为myProject1,然后新建一个文件夹app,里面再来一个文件夹components以及一个文件夹index,index里面放一个index.html以及inex.js。然后在cmd里面cd到myProject1 运行命令npm init后一直回车,你的文件夹会向下面一样
然后通过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。
好了,一个可以运行vue单文件的webpack就配置好了。

2.vue组件。

首先在components里面新建一个命名为Favlist.vue的组件,然后在之前的index.html里面调用这个组件;
接下来就是在index.js里面引用组件;
剩下的就是写一个vue组件我把html,style,js 分别贴出来。

####html
html 代码

<template>
    <div>
        <div>
            <div class=”info-box”>
                <p class=”info-header” v-html=”goodsList.updatetime”></p>
                <p class=”info-con” v-html=”goodsList.content”></p>
            </div>
        </div>
        <div class=”index-page” id=”pageBox” v-cloak>
            总<span class=”allNum” v-html=”pageTotal”></span>页 至
            <input
                type=”text”
                class=”index-target”
                onkeyup=”value=value.replace(/[^\d]/g,”)”
            />
            页
            <a href=”javascript:;” class=”target” v-on:click=”inputJump()”
                >跳转</a
            >
            <ul class=”page-main” id=”pageMain”>
                <li class=”block”>
                    <a
                        href=”javascript:;”
                        class=”prev”
                        v-bind:class=”{‘unable-page’ : page==1}”
                        v-on:click=”goPre()”
                        ><i class=”prev-i”></i
                    ></a>
                </li>
                <li v-if=”pageTotal>0″ v-for=”n in showPageArr”>
                    <a
                        href=”javascript:;”
                        class=”num-item”
                        v-html=”n”
                        v-bind:class=”{‘active’ : page==n}”
                        :data-page=”n”
                        v-on:click=”goPage($event)”
                    ></a>
                </li>
                <li class=”block last”>
                    <a
                        href=”javascript:;”
                        class=”next”
                        v-bind:class=”{‘unable-page’ : page==pageTotal}”
                        v-on:click=”goNext()”
                        ><i class=”next-i”></i
                    ></a>
                </li>
            </ul>
        </div>
    </div>
</template>

####style
html 代码

<style>
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    form,
    fieldset,
    input,
    textarea,
    p,
    blockquote,
    th,
    td {
        margin: 0;
        padding: 0;
    }
    html {
        font-size: 12px;
    }
    address,
    caption,
    cite,
    code,
    dfn,
    em,
    strong,
    th,
    var {
        font-style: normal;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    q:before,
    q:after {
        content: ”;
    }
    object,
    embed {
        vertical-align: top;
    }
    hr,
    legend {
        display: none;
    }
    img,
    abbr,
    acronym,
    fieldset {
        border: 0;
    }
    ul li {
        list-style-type: none;
    }
    a,
    label {
        cursor: pointer;
    }
    img {
        vertical-align: bottom;
        margin: 0;
        padding: 0;
    }
    a {
        text-decoration: none;
        outline: none;
    }
    .clearfix:after {
        content: ‘.’;
        visibility: hidden;
        display: block;
        height: 0.1px;
        font-size: 0.1em;
        line-height: 0;
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
    input,
    textarea,
    select {
        outline: none;
        border: 1px solid #bfbfbf;
    }
    th {
        font-weight: 400;
    }
    button {
        cursor: pointer;
        border: none;
        outline: none;
    }
    textarea {
        border: 1px solid #ccc;
        resize: none;
        outline: none;
        overflow: hidden;
        padding: 5px;
    }
    select {
        outline: none;
    }
    .text_overflow {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    html {
        font-family: ‘Microsoft YaHei’, tahoma, arial, ‘Hiragino Sans GB’,
            ‘\5b8b\4f53’, sans-serif;
        font-size: 14px;
        color: #5c5d5e;
    }
    .index-page {
        width: 800px;
        height: 40px;
        margin: 100px auto;
        padding-top: 10px;
    }
    .index-page .index-target {
        width: 25px;
        height: 14px;
        line-height: 14px;
        padding: 3px 5px;
        border-radius: 2px;
        vertical-align: middle;
    }
    .index-page .target {
        margin-right: 30px;
        color: #808080;
    }
    .index-page .page-main {
        float: right;
        margin-top: -10px;
    }
    .index-page .page-main li {
        float: left;
        width: 37px;
        height: 37px;
        border: 1px solid #e6e6e6;
        text-align: center;
        line-height: 37px;
        margin-right: 5px;
    }
    .index-page .page-main .block {
        display: block;
    }
    .index-page .page-main a {
        display: block;
        height: 100%;
        color: #c0c0c0;
    }
    .index-page .page-main a:hover,
    .index-page .page-main .active {
        background-color: #f75000;
        color: #fff;
    }
    .index-page .page-main .unable-page {
        cursor: not-allowed;
        background-color: #dedede;
    }
    .index-page .page-main .unable-page:hover {
        background-color: #dedede;
    }
    .index-page .page-main .prev,
    .index-page .page-main .next {
        display: block;
        height: 9px;
        padding: 13px 14px 15px 15px;
    }
    .index-page .page-main .prev-i,
    .index-page .page-main .next-i {
        display: block;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-right: 8px solid #c0c0c0;
        border-bottom: 6px solid transparent;
    }
    .index-page .page-main .next-i {
        border-top: 6px solid transparent;
        border-right: none;
        border-left: 8px solid #c0c0c0;
        border-bottom: 6px solid transparent;
    }
    .info-box {
        width: 800px;
        padding: 20px 50px;
        margin: 50px auto;
        border: 2px dotted #e6e6e6;
        text-align: center;
    }
    .info-header {
        line-height: 2;
        font-size: 28px;
    }
</style>

####js
html 代码

<script>
    var data = {
        error_code: 0,
        reason: ‘Success’,
        result: {
            data: [
                {
                    content:
                        ‘偶老婆有个嗜好,但凡别人送的东西一定要利用上,毫不拖延绝不浪费,比如上个月在超市抽奖中了一瓶快过期的醋,结果家里吃了一个多礼拜的饺子醋瓶见底才算完。。。今天中午老婆回来,刚进屋就举起手中袋子说:老公你看,今天居委会送东西了。偶心里一紧:又要玩什么里格啷?接过袋子打开一看,立马晕过去:尼玛半打安全套!’,
                    hashId: ’78c42b5a6fe2922b700900a4c73e2464′,
                    unixtime: 1491461630,
                    updatetime: ‘2017-04-06 14:53:50’,
                },
                {
                    content:
                        ‘儿子提著一个很大的提包,对爸爸说:「这个家我再也忍受不下去 了。我要离开, 我要自己去过那种天天有刺激 , 天天花天酒地, 天天有漂亮妹妹的生活。爸爸,你无论如何都不能阻挠我。」 爸爸一听,急急忙忙的说:「谁会阻挠你呀,我马上准备行李跟 你一起去。」’,
                    hashId: ‘cd2d1bd487447bd3b7dd05ed7999d6f3’,
                    unixtime: 1491459230,
                    updatetime: ‘2017-04-06 14:13:50’,
                },
                {
                    content:
                        ‘电视上出现男女接吻的镜头。 上幼儿园的儿子:妈妈,你看,叔叔在给阿姨做人工呼吸!在救阿姨的命! 妈妈:你还小,不懂,这不是人工呼吸! 儿子:这就是!你看那阿姨闭着眼睛昏迷了,抢救完了,她就睁开眼睛苏醒了! 妈妈:这些都是谁告诉你的? 儿子:老师告诉我的!而且,昨天我还看到爸爸用人工呼吸,费了好长的时间,才把老师救过来的。’,
                    hashId: ‘1c2a620dd8d8850c87de3cd4b894e6e7’,
                    unixtime: 1491459230,
                    updatetime: ‘2017-04-06 14:13:50’,
                },
                {
                    content:
                        ‘小蚊子央求母亲准许他去戏院看戏,苦苦求了半天之后,母亲终于答应了。“ 好吧,你可以去,”她叮嘱道,“可是人家鼓掌的时候你要当心。”’,
                    hashId: ‘dfc2142c45a6ef17de84aef7c65a3d51’,
                    unixtime: 1491458630,
                    updatetime: ‘2017-04-06 14:03:50’,
                },
                {
                    content:
                        ‘两位先生一道去打猎。行进间其中一位忽然举枪射击,一只野鸭应声落地!另 一位说:“好枪法!不过你这一枪完全是多余的。从那么高的的地方掉下来,摔也 摔死了!”’,
                    hashId: ‘ab6775bcf0a50a856b06814a28c6d11b’,
                    unixtime: 1491458630,
                    updatetime: ‘2017-04-06 14:03:50’,
                },
                {
                    content:
                        ‘甲:昨夜和朋友上酒家,小偷光顾我家里。 乙:偷去什么东西? 甲:太太以为是我酒醉夜归,不分青红皂白揍了他一顿,小偷高喊救命,幸好 警察来救了他。’,
                    hashId: ‘bbbcc5a203db91fdc42f61d74bd7dcb8’,
                    unixtime: 1491458030,
                    updatetime: ‘2017-04-06 13:53:50’,
                },
                {
                    content:
                        ‘妻:我们怎么来庆祝我们的结婚纪念日? 夫:静默一分钟如何?’,
                    hashId: ‘83926f6df086a69a1dc7c1a2674c5e6c’,
                    unixtime: 1491458030,
                    updatetime: ‘2017-04-06 13:53:50’,
                },
                {
                    content:
                        ‘甲:你那只会说话的鹦鹉还活着吗? 乙:唉,别提了,想不到我养了一星期,她就死了。 甲:是病死的? 乙:不,她和我太太比赛说话,说到力竭而死。’,
                    hashId: ‘cb924366205c12518f3825ac125d4b0c’,
                    unixtime: 1491458030,
                    updatetime: ‘2017-04-06 13:53:50’,
                },
                {
                    content:
                        ‘1. 姑妈送给我一只微型步话机做为我生日礼物。她说如果我乖巧听话,明年会给我另一只。 2. 银行说昼夜营业?但我哪有那么多的时间跟它耗!? 3. 实在百无聊赖。我就把车开到市中心的一个大停车场,坐在车里,数着有多少人 过来问我是不是要走。 4. 加油站有块儿牌子写着:“诚征员工”,下面另一牌上说:“劳驾自助”。我就 雇了自己,自己当老板。加满汽油,我把钱付给自己。最后,辞职,走人。 5. 世界上最胖的家伙怎么不去当冰球守门员? 6. 你在森林中讲个笑话,没人听到,没人发笑。那还是笑话吗?’,
                    hashId: ‘b4eea13134ac11b1971e1341d84a8390’,
                    unixtime: 1491458030,
                    updatetime: ‘2017-04-06 13:53:50’,
                },
                {
                    content:
                        ‘饶舌的妻子说:“你昨晚又在说梦话了。” 驯服的丈夫回答道:“是的,不然我就没有说话的机会了。”’,
                    hashId: ‘eb0fe1a7b9f86e1056461c09f665bbb2’,
                    unixtime: 1491457430,
                    updatetime: ‘2017-04-06 13:43:50’,
                },
                {
                    content:
                        ‘“先生,我家里一只大公鸡把你花园里的花弄坏了,我真过意不去。” “太太,你不用道歉了,我的狗已经把你的大公鸡吃掉了。” “那太好了,我刚开车的时候,正好把你的狗碾死了。”’,
                    hashId: ‘f94c0a63f9dd3fa0919393b543e05aca’,
                    unixtime: 1491457430,
                    updatetime: ‘2017-04-06 13:43:50’,
                },
                {
                    content:
                        ‘大哥弄了一支甚重的自动步枪在家里,每逢大嫂发脾气,大哥总是二话不说, 到旁边擦步枪去了。大嫂便吓得面容失色,一场内战还没开始,就结束了。 我忍不住问大哥:“大嫂怕你杀她?” 大哥很得意地说:“哪里,她是怕我自杀。”’,
                    hashId: ’09b6006b197b1c3c4dd6fba5a3087d70′,
                    unixtime: 1491457430,
                    updatetime: ‘2017-04-06 13:43:50’,
                },
                {
                    content:
                        ‘一个病人第一次去看医生。 “关于你的病情,你来这儿之前请教过什么人吗?”医生问。 “只问过拐角上药房的老板,”病人回答说。 那位医生最讨厌那些不是医生的人常常提出医疗方面的建议,他并不掩示这一 点。“那个傻瓜给你出了什么馊主意了?” “他让我来找你。”’,
                    hashId: ‘0c1cbfb9a698e4b04272fd917cff7902’,
                    unixtime: 1491457430,
                    updatetime: ‘2017-04-06 13:43:50’,
                },
                {
                    content:
                        ’12岁侄女哭着说:我失恋了。。”我问她怎么了,她说她被班主任调到前排,而她男朋友(13岁)接受不了异地恋,跟她分手了。。。’,
                    hashId: ‘90206b37f1502e2cb590981b452c915f’,
                    unixtime: 1491457430,
                    updatetime: ‘2017-04-06 13:43:50’,
                },
                {
                    content:
                        ‘科长:桌上那两封信都寄出了吗? 工友:都寄出了,但我把邮票贴错了,国内的贴了国外的,国外的贴了国内的。 科长:你真不细心,后来重贴过了没有? 工友:因邮票撕不下来,我就把里面的信笺互相调换了。’,
                    hashId: ’65d1941fe964778dd3d369e27223844f’,
                    unixtime: 1491457430,
                    updatetime: ‘2017-04-06 13:43:50’,
                },
                {
                    content:
                        ‘妈:以后啊,你出门前都要好好收拾收拾,不要不洗头出门,特别是你要叫车的时候。 女儿:为啥啊? 妈:北京户口,有本地车牌,开的都是2.0L或者1.8T以上排量的车,这条件,平时介绍对象都不好碰,现在滴滴都给你筛好了。 —滴滴打车,一个严肃的婚恋平台。’,
                    hashId: ‘605da2f7e4ecde243a94748af5abb366’,
                    unixtime: 1491456830,
                    updatetime: ‘2017-04-06 13:33:50’,
                },
                {
                    content:
                        ‘晚上吃饭我爸找来找去找不到酒,问我妈:我酒呢? 我妈说被老鼠偷喝了。 老鼠呢? 猫抓了。 猫呢? 狗逮住了。 狗呢? 狗在找酒呢! 噗~ 哎,哎,爸你别围着我打呀,我只是没忍。。。’,
                    hashId: ‘b8ec83d7e81e9f9c154eb17bf761b782’,
                    unixtime: 1491456830,
                    updatetime: ‘2017-04-06 13:33:50’,
                },
                {
                    content:
                        ‘因天气转凉,为了解决各位单身女性怕冷,本人今日正式加入滴滴暖被窝,限女性客户,有脸蛋有长相有经验的优先,超过30岁的不接! 本人强烈推荐套餐:1万包过冬,5万包年,先转账再暖被窝。 小本生意,诚信暖被窝。 暖到你心花怒放!!暖到你走路扶墙! 我的口号是:只有你想不到的,没有哥做不到的!’,
                    hashId: ‘c3c51814094bc1f459b8bc4c6f7562a8’,
                    unixtime: 1491456830,
                    updatetime: ‘2017-04-06 13:33:50’,
                },
                {
                    content:
                        ‘A:“等我死后把我的骨灰撒到海里,不是怕有人在坟头蹦迪,也不为大海更宽广,只是为了我死了也能浪起来。” B:“我勒个去,能把死了没地儿埋说的这么有个性也是没谁了!”’,
                    hashId: ‘13762765363a3d1dc85803d1b118b5bd’,
                    unixtime: 1491456830,
                    updatetime: ‘2017-04-06 13:33:50’,
                },
                {
                    content:
                        ‘“如果杀人不犯法,你先杀谁?” “我先杀谁?我TM先藏起来,泼皮二货太多,别把我杀了。。。”’,
                    hashId: ‘a421429cbb0e1a2b707ec4b54110bfd7’,
                    unixtime: 1491456830,
                    updatetime: ‘2017-04-06 13:33:50’,
                },
            ],
        },
    }
    export default {
        data() {
            return {
                page: 1, //当前页面
                pageTotal: 12, //总页数
                showPage: 10, //最多显示10个num-item
                showPageArr: [], //显示的num-item数组
                goodsList: {}, //商品数据
            }
        },
        mounted() {
            var oThis = this
            this.pageTotal = data[‘result’][‘data’].length
            if (this.pageTotal <= this.showPage) {
                this.showPage = this.pageTotal
            }
            this.showPageFn()
        },
        methods: {
            getData() {
                this.goodsList = data[‘result’][‘data’][this.page – 1]
            },
            showPageFn() {
                var min = 0,
                    max = this.showPage
                console.log(this.page)
                this.showPageArr = []
                if (this.page <= this.showPage / 2) {
                    min = 0
                    max = this.showPage
                } else if (
                    this.pageTotal – this.page <=
                    Math.ceil(this.showPage / 2)
                ) {
                    min = this.pageTotal – this.showPage
                    max = this.pageTotal
                } else {
                    min = Math.round(this.page – this.showPage / 2)
                    max = Math.round(this.page + this.showPage / 2)
                }
                for (var i = min + 1; i < max + 1; i++) {
                    this.showPageArr.push(i)
                }
                this.getData()
            },
            goPage(event) {
                var oThis = this
                oThis.page = parseInt(
                    event.currentTarget.getAttribute(‘data-page’),
                )
                oThis.showPageFn()
            },
            goPre() {
                if (this.page == 1) {
                    return
                }
                this.page–
                this.showPageFn()
            },
            goNext() {
                if (this.page == this.pageTotal) {
                    return
                }
                this.page++
                this.showPageFn()
            },
            inputJump() {
                var value = document.querySelector(‘.index-target’).value
                if (
                    parseInt(value) < 1 ||
                    parseInt(value) > this.pageTotal ||
                    value.trim() == ”
                ) {
                    this.page = 1
                } else {
                    this.page = parseInt(value)
                }
                document.querySelector(‘.index-target’).value = ”
                this.showPageFn()
            },
        },
    }
</script>

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

ubuntu前端开发工具
python 前端开发工具
前端 hybrid如何开发工具
xml与web前端开发工具
» 本文来自:前端开发者 » 《前端Webpack+Vuejs 从0到1写一个分页组件》
» 本文链接地址:https://www.rokub.com/6819.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!