vuejs实战

Posted 个人前端历程

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs实战相关的知识，希望对你有一定的参考价值。

一、项目使用资源整合

1、使用vue-cli脚手架工具搭建

2、使用UI框架——elementUI（http://element.eleme.io/#/zh-CN/）

二、使用vue-cli创建项目

  1. 全局安装 vue-cli（$ npm install –global vue-cli）

  2. 创建一个基于webpack模板的新项目（$ vue init webpack 项目名称）

  3. 进入项目目录（$ cd 项目名称）

  4. 安装依赖（$ npm install）

  5. 运行项目（$ npm run dev）

三、将element-ui中的组件添加到项目中

  1. 将element-ui安装到项目中（$ npm i element-ui -S）

  2. 在main.js文件中添加如下语句即可运行 
    import Vue from ‘vue’; 
    import ElementUI from ‘element-ui’; 
    import ‘element-ui/lib/theme-chalk/index.css’; 
    import App from ‘./App’; 
    Vue.use(ElementUI);

四、拆分组件

  1. 头部轮播组件：命名为Carousel.vue

  2. 中间内容部分拆分为：打卡组件、加入组件和共享组件，分别命名为Clock.vue，Share.vue，Join.vue

五、编写各个组件内容，然后在主文件中引入、注册、运用

（后期会对代码进行修改，做到简洁复用的） 
代码实例： 
App.vue文件

<template>
    <div id="app" class="wrap_w">
        <!--轮播区域-->
        <Carousel></Carousel>
        <!--每天一次打卡 收获一份惊喜-->
        <div class="wrap_ww">
            <Clock></Clock>
        </div>
        <!--参与共享活动 实现财富增值-->
        <Join></Join>
        <!--热门共享-->
        <div class="wrap_ww">
            <Share></Share>
        </div>
        <!--<router-view/>-->
    </div></template><script>    import Carousel from './components/Carousel'    import Clock from './components/Clock'    import Join from './components/Join'    import Share from './components/Share'    export default {        name: 'App',        components:{            Carousel,            Clock,            Join,            Share        }    }</script><style>    .wrap_w{width:100%;min-width:1190px;}    .wrap_ww{width:1190px;margin:0 auto;}</style>
 
   
   
 
    
  
    
    
  

    •

轮播组件Carousel.vue文件

<template>
    <div class="carousel">
        <el-carousel trigger="click" class="carousel_wrap">
            <el-carousel-item v-for="(img,idx) in imgs" :key="idx" class="carousel_item">
                <img :src="'/static/images/'+img.imgurl" class="carousel_img"/>
            </el-carousel-item>
        </el-carousel>
    </div></template><script>    export default {        name:'carousel',        data(){            return {                imgs:[                    {imgurl:"1.jpg"},                    {imgurl:"2.jpg"}                ]            }        }    }</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>    .carousel,.carousel_wrap,.carousel_item,.carousel_img{                         
   display:block;width:100%;height:460px;    }</style>
 
   
   
 
    
  
    
    
  

    •

打卡组件Clock.vue文件

<template>
    <div class="clock">
        <h3>
            <span class="mr15">每天一次打卡</span>
            <span>收获一份惊喜</span>
        </h3>
        <h4>
            <span class="mr10">无需投资</span>
            <span>天天赚钱</span>
        </h4>
        <el-row>
            <el-col :span="12">
                <div>
                    <div class="clock_icon clock_reward"></div>
                    <span class="clock_title">新人奖励</span>
                    <p class="clock_txt">7天内打卡每天额外获2元奖励</p>
                    <p class="clock_txt">满20提现</p>
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <div class="clock_icon clock_invite"></div>
                    <span class="clock_title">邀请奖励</span>
                    <p class="clock_txt">邀请好友参与，最高日赚10000元！</p>
                    <p class="clock_txt">赚钱先机，错过再无！</p>
                </div>
            </el-col>
        </el-row>
        <a href="javascript:void(0)" class="clock_btn">立即打卡</a>
    </div></template><script>    export default {        name:'share',        data(){            return {            }        }    }</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>    a{text-decoration:none;}    .mr15{margin-right:15px;}    .mr10{margin-right:10px;}    .clock{width:100%;padding-bottom:50px;overflow:hidden;}    .clock h3{        width:100%;height:34px;margin:66px auto 20px;line-height:34px;        text-align:center;font-size:34px;font-weight:normal;    }    .clock h4{        width:100%;height:20px;margin-bottom:70px;line-height:20px;        text-align:center;font-size:20px;font-weight:normal;    }    .clock_icon{        width:205px;height:226px;margin:0 auto;        background:url('http://localhost:8080/static/images/csssp.png') no-repeat;    }    .clock_reward{background-position:0 -50px;}    .clock_invite{background-position:0 -276px;}    .clock_title{        display:block;width:100%;margin:48px auto 20px;color:#666;font-size:36px;        text-align:center;    }    .clock_txt{width:100%;text-align:center;font-size:20px;line-height:30px;}    a.clock_btn{        display:block;width:200px;height:50px;margin:66px auto 0;text-align:center;        line-height:50px;font-size:24px;color:#fff;font-weight:bold;        background:url('http://localhost:8080/static/images/csssp.png') no-repeat;        background-position:0 0;    }</style>
 
   
   
 
    
  
    
    
  

    •

加入组件Join.vue文件

<template>
    <div class="join">
        <div class="join_wrap">
            <h3>
                <span class="mr15">参与共享活动</span>
                <span>实现财富增值</span>
            </h3>
            <h4>工资存入银行？积蓄放进保险柜？NO！</h4>
            <el-row>
                <el-col :span="8">
                    <div>
                        <div class="join_icon join_reward"></div>
                        <p class="join_desc">参与共享活动，立得现金奖励</p>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <div class="join_icon join_flex"></div>
                        <p class="join_desc">可继续可结束，自由灵活</p>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div>
                        <div class="join_icon join_profit"></div>
                        <p class="join_desc">无需等待，加入天天坐等收钱</p>
                    </div>
                </el-col>
            </el-row>
            <a href="javascript:void(0)" class="join_btn">立即参与</a>
        </div>
    </div></template><script>    export default {        name:'share',        data(){            return {            }        }    }</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>    a{text-decoration:none;}    .mr15{margin-right:15px;}    .join{width:100%;padding-bottom:50px;background:#ddd;overflow:hidden;}    .join_wrap{width:1190px;margin:0 auto;}    .join_wrap h3{        width:100%;height:36px;margin:65px auto 20px;line-height:36px;        text-align:center;font-size:36px;font-weight:normal;    }    .join_wrap h4{        width:100%;height:24px;margin-bottom:70px;line-height:24px;text-align:center;        font-size:24px;font-weight:normal;    }    .join_icon{        width:160px;height:160px;margin:0 auto;        background:url('http://localhost:8080/static/images/csssp.png') no-repeat;    }    .join_reward{background-position:0 -502px;}    .join_flex{background-position:0 -662px;}    .join_profit{background-position:0 -822px;}    .join_desc{        margin:34px auto 65px;font-size:18px;font-weight:300;text-align:center;        color:#666;    }    a.join_btn{        display:block;width:200px;height:50px;margin:0 auto;text-align:center;        line-height:50px;font-size:24px;color:#fff;font-weight:bold;        background:url('http://localhost:8080/static/images/csssp.png') no-repeat;        background-position:0 0;    }</style>
 
   
   
 
    
  
    
    
  

    •

共享组件Share.vue文件

<template>
    <div class="share">
        <h3>热门共享</h3>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="share_item">
                    <a href="javascript:void(0)" class="share_img_wrap">
                        <img src="/static/images/goods.jpg" class="share_img"/>
                    </a>
                    <a href="javascript:void(0)" class="share_price">￥125.00</a>
                    <a href="javascript:void(0)" class="share_desc"                      title="Kuegou夏季新款男士短袖纯色立领修身T恤"> 
                    Kuegou夏季新款男士短袖纯色立领修身T恤</a>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="share_item">
                    <a href="javascript:void(0)" class="share_img_wrap">
                        <img src="/static/images/goods.jpg" class="share_img"/>
                    </a>
                    <a href="javascript:void(0)" class="share_price">￥125.00</a>
                    <a href="javascript:void(0)" class="share_desc"                      title="Kuegou夏季新款男士短袖纯色立领修身T恤"> 
                    Kuegou夏季新款男士短袖纯色立领修身T恤</a>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="share_item">
                    <a href="javascript:void(0)" class="share_img_wrap">
                        <img src="/static/images/goods.jpg" class="share_img"/>
                    </a>
                    <a href="javascript:void(0)" class="share_price">￥125.00</a>
                    <a href="javascript:void(0)" class="share_desc"                      title="Kuegou夏季新款男士短袖纯色立领修身T恤"> 
                    Kuegou夏季新款男士短袖纯色立领修身T恤</a>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="share_item">
                    <a href="javascript:void(0)" class="share_img_wrap">
                        <img src="/static/images/goods.jpg" class="share_img"/>
                    </a>
                    <a href="javascript:void(0)" class="share_price">￥125.00</a>
                    <a href="javascript:void(0)" class="share_desc"                      title="Kuegou夏季新款男士短袖纯色立领修身T恤"> 
                    Kuegou夏季新款男士短袖纯色立领修身T恤</a>
                </div>
            </el-col>
        </el-row>
    </div></template><script>    export default {        name:'share',        data(){            return {            }        }    }</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>    a{text-decoration:none;}    .share{width:100%;padding-bottom:100px;overflow:hidden;}    .share h3{        width:100%;height:34px;margin:42px auto 49px;line-height:34px;text-align:center;        font-size:34px;font-weight:normal;    }    .share_item{width:100%;}    a.share_img_wrap{display:block;width:100%;margin-bottom:17px;overflow:hidden;}    .share_img{        display:block;width:100%;transition:all 1s;-webkit-transition:all 1s;        -o-transition:all 1s;-moz-transition:all 1s;-ms-transition:all 1s;    }    a.share_img_wrap:hover .share_img{        transform:scale(1.2);-webkit-transform:scale(1.2);-o-transform:scale(1.2);        -moz-transform:scale(1.2);-ms-transform:scale(1.2);    }    a.share_price{display:block;text-align:left;font-size:16px;color:#ff5600;}    a.share_desc{        display:block;width:100%;margin-top:8px;line-height:24px;font-size:16px;        color:#606060;overflow:hidden;    }    a.share_desc:hover{text-decoration:underline;}</style>
 
   
   
 
    
  
    
    
  

    •

main.js文件

import Vue from 'vue'import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App'import router from './router'Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'})


以上是关于vuejs实战的主要内容，如果未能解决你的问题，请参考以下文章

solr分布式索引实战分片配置读取：工具类configUtil.java，读取配置代码片段，配置实例

VueJs全栈-电商网站实战（41节）

vuejs实战

Vuejs实战项目：登陆页面

十分钟快速实战Three.js

Vuejs实战项目五：数据列表