vuejs实战——PC端

一、项目使用资源整合

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

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

二、使用vue-cli创建项目

全局安装 vue-cli（$ npm install –global vue-cli）
创建一个基于webpack模板的新项目（$ vue init webpack 项目名称）
进入项目目录（$ cd 项目名称）
安装依赖（$ npm install）
运行项目（$ npm run dev）

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

将element-ui安装到项目中（$ npm i element-ui -S）
在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);

四、拆分组件

头部轮播组件：命名为Carousel.vue
中间内容部分拆分为：打卡组件、加入组件和共享组件，分别命名为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实战——PC端

vuejs实战——PC端

一、项目使用资源整合

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

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

二、使用vue-cli创建项目

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

四、拆分组件

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

猜你喜欢