vuejs实战——PC端
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>
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>
<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>
<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>
<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.00a>
<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.00a>
<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.00a>
<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.00a>
<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>
<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: '