day 75 vue 項目記錄.路飛學城(一)

時間 2019-11-07

標籤 day vue 項目記錄简体版

原文原文鏈接

前情提要:css

　　經過vue 搭建路飛學城記錄
前端

　　　　一:項目分析vue

　　　　二:項目搭建webpack

　　　　　　1:建立項目　　　web

　　　　　　　　　　vue init webpack luffyvue-router

　　　　　　2:初始化項目npm

　　　　　　　　　　清除默認的HelloWorld.vue組件和APP.vue中的默認模板代碼和默認樣式　element-ui

　　　　　　　　2>1: 清除位置bootstrap

　　　　　　　2>2:修改後效果
框架

　　　　　　　　　　　　2>3:結果圖

　　　　　三:引入ElementUI

　　　　　　1:快速安裝ElementUI

對於前端頁面佈局，咱們可使用一些開源的UI框架來配合開發，Vue開發前端項目中，比較經常使用的就是ElementUI了。

ElementUI是餓了麼團隊開發的一個UI組件框架，這個框架提早幫咱們提供了不少已經寫好的通用模塊，咱們能夠在Vue項目中引入來使用，這個框架的使用相似於咱們前面學習的bootstrap框架，也就是說，咱們徹底能夠把官方文檔中的組件代碼拿來就用，有定製性的內容，能夠直接經過樣式進行覆蓋修改就能夠了。

中文官網：http://element-cn.eleme.io/#/zh-CN

文檔快速入門：http://element-cn.eleme.io/#/zh-CN/component/quickstart

　　　　　　　　　　1>1項目根目錄執行如下命令:

npm i element-ui -S
上面的命令等同於 `npm install element-ui --save

　　　　　　1>2:項目執行完效果

　　　　　　2:配置ElementUI到項目中

　　　　　　　　　　在main.js中導入ElementUI，並調用。代碼：

// elementUI 導入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 調用插件
Vue.use(ElementUI);

　　　　　　　　　　成功引入了ElementUI之後，接下來咱們就能夠開始進入前端頁面開發，首先是首頁。

　　　　　　　　四:首頁

　　　　　　首頁採用了上下頁面佈局，首頁是導航欄、輪播圖。。。腳部等幾個小模塊。因此咱們能夠把首頁做爲一個組件進行開發，而後把首頁的這些小模塊做爲單獨的組件來進行開發。

　　　　　　1:建立首頁組件

　　　　　　在src/components目錄下建立文件 Home.vue　　

<template>
  <div id="home">
    首頁
  </div>
</template>

<script>
export default {
  name:"Home",
  data(){
    return {

    }
  }
}
</script>

<style scoped>

</style>

　　　　效果:

　　　　　　　　1>1:建立首頁對應的路由

　　　　在router/index.js中引入Home組件，並設置Home組件做爲首頁路由。

import Vue from "vue"
import Router from "vue-router"

// 後面這裏引入能夠被用戶訪問的頁面組件
import Home from "../components/Home"

Vue.use(Router);

export default new Router({
  // 路由跳轉模式，注意使用 history
  mode: "history",

  // 路由規則
  routes:[
    {
      // name:"路由別名",
      name:"Home",
      // path: "路由地址",
      path: "/",
      // component: 組件類名,
      component: Home,
    },{
      // name:"路由別名",
      name:"Home",
      // path: "路由地址",
      path: "/home",
      // component: 組件類名,
      component: Home,
    },
  ]
})

　　　　　　效果:

　　　　　　2:開發導航子組件

　　　　通過前面的觀察，能夠發現導航不只在首頁出現，其餘頁面也有，因此對於這些不一樣頁面中公共的內容，能夠建立一個單獨的組件目錄存放。

　　　　　　　　建立src/components/common/Header.vue目錄路徑，編寫代碼：

<template>

</template>

<script>
  export default {
    name: "Header",
    data(){
      return {
        
      };
    }
  }
</script>

<style scoped>

</style>

　　　　　　　　效果圖:

　　　　　　　　2>1:在首頁引入導航組件

　　　　　　代碼:

<template>
  <div class="home">
    <Header/>
  </div>
</template>

<script>
  import Header from "./common/Header"
  export default {
    name: "Home",
    data(){
      return {

      };
    },
    components:{
      Header,
    }
  }
</script>

<style scoped>

</style>

　　　　　　效果圖:

　　　　　　2>2 headers 子組件代碼:

<template>
  <div class="header">
    <el-container>
      <el-header>
        <el-row>
          <el-col class="logo" :span="3">
            <a href="/">
              <img src="@/assets/head-logo.svg" alt="">
            </a>
          </el-col>
          <el-col class="nav" :span="16">
              <el-row>
                <el-col :span="3"><router-link to="/">免費課</router-link></el-col>
                <el-col :span="3"><router-link to="/">輕課</router-link></el-col>
                <el-col :span="3"><router-link to="/">學位課</router-link></el-col>
                <el-col :span="3"><router-link to="/">題庫</router-link></el-col>
                <el-col :span="3"><router-link to="/">教育</router-link></el-col>
              </el-row>
          </el-col>
          <el-col class="login-bar" :span="5">
            <el-row>
              <el-col class="cart-ico" :span="9">
                <router-link to="">
                  <b class="goods-number">0</b>
                  <img class="cart-icon" src="@/assets/cart.svg" alt="">
                  <span>購物車</span>
                </router-link>
              </el-col>
              <el-col class="study" :span="8" :offset="2"><router-link to="">學習中心</router-link></el-col>
              <el-col class="member" :span="5">
                <el-menu class="el-menu-demo" mode="horizontal">
                  <el-submenu index="2">
                    <template slot="title"><router-link to=""><img src="@/assets/logo@2x.png" alt=""></router-link></template>
                    <el-menu-item index="2-1">個人帳戶</el-menu-item>
                    <el-menu-item index="2-2">個人訂單</el-menu-item>
                    <el-menu-item index="2-3">個人優惠卷</el-menu-item>
                    <el-menu-item index="2-3">退出登陸</el-menu-item>
                  </el-submenu>
                </el-menu>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "Header",
    data(){
      return {
        // 設置一個登陸標識，表示是否登陸
        token: false,
      };
    }
  }
</script>

<style scoped>
  .header{
    box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
  }
  .header .el-container{
    width: 1200px;
    margin: 0 auto;
  }
  .el-header{
    height: 80px!important;
    padding:0;
  }
  .logo{

  }
  .logo img{
    padding-top: 22px;
  }

  .nav{
    margin-top: 22px;
  }

  .nav .el-col a{
    display: block;
    text-align: center;
    padding-bottom: 16px;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    font-size: 16px;
  }

  .login-bar{
    margin-top: 22px;
  }
  .cart-ico{
    position: relative;
    border-radius: 17px;
  }
  .cart-ico:hover{
    background: #f0f0f0;
  }
  .goods-number{
    width: 16px;
    height: 16px;
    line-height: 17px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #fa6240;
    border-radius: 50%;
    transform: scale(.8);
    position: absolute;
    left: 16px;
    top: -1px;
  }
  .cart-icon{
    width: 15px;
    height: auto;
    margin-left: 6px;
  }
  .cart-ico span{
    margin-left: 12px;
  }
  .member img{
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-block;
  }
  .member img:hover{
    border: 1px solid yellow;
  }

</style>

　　　　App.vue，中設置一些公共樣式的代碼

<style>
  body{
    padding: 0;
    margin:0;
  }
  a{
    text-decoration: none;
    color: #4a4a4a;
  }
  a:hover{
    color: #000;
  }
  .header .el-menu li .el-submenu__title{
    height: 26px!important;
    line-height: 26px!important;
  }
  .el-menu--popup{
    min-width: 140px;
  }
</style>

　　Home組件中引入使用Header子組件，代碼無需改變，直接訪問效果：

　　　　3:開發輪播圖子組件

　　　　1:建立Banner.vue組件文件

　　　　代碼:

<template>
  <div class="banner">

  </div>
</template>

<script>
  export default {
    name:"Banner",
    data(){
      return {};
    }
  }
</script>

<style scoped>

</style>

　　效果:

　　　　2:在home 組件中引入Banner 子組件

<template>
  <div class="home">
    <Header/>
    <Banner/>
  </div>
</template>

<script>
  import Header from "./common/Header"
  import Banner from "./common/Banner"
  export default{
    name:"Home",
    data(){
      return {};
    },
    components:{
      Header,
      Banner,
    }
  }
</script>

<style scoped>
.home{
  padding-top: 80px;
}
</style>

　　　　效果圖:

　　　　　　　　接下來，在ElementUI中有對應的輪播圖[跑馬燈]效果，能夠直接提取過來使用。

　　　　　　注意，圖片保存到static目錄下。保存在assets目錄下的圖片等同於保存在static/img目錄下。

　　　　　　對於圖片的使用，若是是vue代碼中直接要使用的圖片，能夠保存accets目錄下，若是是第三方插件要使用到的圖片，須要保存在static目錄下。其實本質上來講，全部的圖片都是保存在static目錄下的，而assets目錄下的內容,最終被vue解析成地址的時候,也是在static目錄的.

　　　　　　Banner.vue組件,代碼:

<template>
  <div class="banner">
      <el-carousel trigger="click" height="506px">
        <el-carousel-item v-for="banner in banner_list">
          <a :href="banner.link"><img width="100%" :src="banner.img" alt=""></a>
        </el-carousel-item>
      </el-carousel>
  </div>
</template>

<script>
  export default {
    name:"Banner",
    data(){
      return {
        banner_list:[
          {link:"http://www.baidu.com",img:"/static/banner/1.png"},
          {link:"http://www.baidu.com",img:"/static/banner/2.png"},
          {link:"http://www.baidu.com",img:"/static/banner/3.png"},
        ]
      };
    }
  }
</script>

<style scoped>

</style>

　　　　　　展現效果

　　　　　　5:頁面腳部

　　　　1:建立腳部文件

<template>
  <el-container>

  </el-container>
</template>

<script>
  export default {
    name:"Footer",
    data(){
      return {}
    }
  }
</script>


<style scoped>

</style>

　　　　　　2:在home 組件中引入footer組件

　　　　　　　　Home組件代碼：

<template>
  <div class="home">
    <Header/>
    <Banner/>
    <Footer/>
  </div>
</template>

<script>
  import Header from "./common/Header"
  import Banner from "./common/Banner"
  import Footer from "./common/Footer"
  export default{
    name:"Home",
    data(){
      return {};
    },
    components:{
      Header,
      Banner,
      Footer,
    }
  }
</script>

<style scoped>
.home{
  padding-top: 80px;
}
</style>

　　　　效果圖:

　　　　　　3: 編寫腳步樣式

<template>
  <div class="footer">
    <el-container>
      <el-row>
        <el-col :span="4"><router-link to="">關於咱們</router-link></el-col>
        <el-col :span="4"><router-link to="">聯繫咱們</router-link></el-col>
        <el-col :span="4"><router-link to="">商務合做</router-link></el-col>
        <el-col :span="4"><router-link to="">幫助中心</router-link></el-col>
        <el-col :span="4"><router-link to="">意見反饋</router-link></el-col>
        <el-col :span="4"><router-link to="">新手指南</router-link></el-col>
        <el-col :span="24"><p class="copyright">Copyright © luffycity.com版權全部 | 京ICP備17072161號-1</p></el-col>
      </el-row>
    </el-container>
  </div>
</template>

<script>
  export default {
    name:"Footer",
    data(){
      return {}
    }
  }
</script>


<style scoped>
.footer{
  width: 100%;
  height: 128px;
  background: #25292e;
}
.footer .el-container{
  width: 1200px;
  margin: auto;
}
.footer .el-row {
  align-items: center;
  padding: 0 200px;
  padding-bottom: 15px;
  width: 100%;
  margin-top: 38px;
}
.footer .el-row a{
  color: #fff;
  font-size: 14px;
}
.footer .el-row .copyright{
  text-align: center;
  color: #fff;
  font-size: 14px;
}
</style>

　　　　　　效果:

首頁的三大塊咱們已經完成了，可是咱們開始新的頁面出現以前，咱們須要把連接補充上，新增課程的導航連接.

接下來,咱們就能夠建立免費課的組件.

　　　　　　　　五:免費課

　　　　　　在組件目錄components下建立Couses.vue組件文件,代碼以下:

<template>
  <div class="courses">

  </div>
</template>

<script>
  export default {
    name:"Courses",
    data(){
      return {

      }
    }
  }
</script>


<style scoped>
  
</style>

　　　　　　　　1:在router/index.js路由中註冊路由

import Vue from "vue"
import Router from "vue-router"

// 導入能夠被用戶訪問的組件
import Home from "@/components/Home"
import Courses from "@/components/Courses"

Vue.use(Router);

export default new Router({
  mode: "history",
  routes:[
    // 路由列表
    {
      path: "/",
      name: "Home",
      component:Home,
    },
    {
      path: "/home",
      name: "Home",
      component:Home,
    },
    {
      path: "/courses",
      name: "Courses",
      component:Courses,
    },

  ]
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。