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中的組件添加到項目中

四、拆分組件

五、編寫各個組件內容，然後在主文件中引入、註冊、運用

基於 Nginx Ingress + 雲效 AppStack 實現灰度發佈

12款高效開源Wiki系統推薦，打造團隊知識管理利器

C語言--右移左移

一個開源且全面的C#算法實戰教程

dotnet 基於 DirectML 控制檯運行 Phi-3 模型

自定義MyBatis插件

一款.NET開源、功能強大、跨平臺的繪圖庫 - OxyPlot

常用的 Git 指令

鼠標控制軟件有可能和虛擬機軟件產生衝突

sm4加密工具類

vue.js——基礎篇之vue組件

vuejs實戰——PC端

Node.js（三）——Express

vue實戰——vue中發送AJAX請求

JavaScript-面向對象與原型

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結