vuejs实战——PC端

一、项目使用资源整合

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:#;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/>' })