Vue學習之商城項目

時間 2021-04-15

標籤 css html vue ios git github vue-router npm axios windows 欄目 CSS 简体版

原文原文鏈接

創建一個商城項目，以及一個github倉庫。css

　　下載安裝githtml

https://git-scm.com/download/win

配置參數：vue

Additional icons 附加圖標
On the Desktop 在桌面上
Windows Explorer integration Windows資源管理器集成鼠標右鍵菜單
Git Bash Here
Git GUI Here
Git LFS (Large File Support) 大文件支持
Associate .git* configuration files with the default text editor 將 .git 配置文件與默認文本編輯器相關聯
Associate .sh files to be run with Bash 將.sh文件關聯到Bash運行
Use a TrueType font in all console windows 在全部控制檯窗口中使用TrueType字體
Check daily for Git for Windows updates 天天檢查Git是否有Windows更新
　　安裝完成後咱們可使用git了：ios

git init
git remote add origin https://github.com/snailbuster/supermall.git

　　這樣就能夠和咱們的git倉庫關聯了。git

　　此時和倉庫的內容沒有同步，因此先使用：　　github

git pull --rebase origin master

　　經過命令git add -A把VUE.JS目錄下的全部文件添加到暫存區裏面去，而後經過命令git commit 把剛剛提交到暫存區裏的文件提交到倉庫。git commit -m "提交全部文件"，-m 後面的文字是註釋，方便查看歷史記錄時知道每一次提交提交的是什麼。vue-router

　　這裏可能讓咱們添加一下用戶郵箱和id正常添加就能夠了。　　npm

　　而後咱們就能夠上傳咱們的項目了：axios

git push -u origin master

　　成功了。windows

　　以後咱們劃分一個目錄結構：

　　src目錄下有asserts和components：

　　咱們在assets下面存放咱們的資源，建立兩個新的文件夾一個是img另外一個是css用來存放這兩類資源。

　　components用來存放組件，這裏注意要存放的是公共組件，單獨使用的組件咱們新建一個同級文件夾views來存儲。

　　而後在src目錄下還要建一個router（路由相關）一個store（狀態管理）還有個network（網絡）三個文件夾。在搞一個common存放公共js文件（公共方法、工具類）。

　　配置別名：

　　腳手架3的別名配置方式是：如今項目目錄新建一個vue.config.js文件，而後添加代碼：

　　這裏默認@是src的別名。

module.exports={
    configureWebpack:{
        resolve:{
            alias:{
                'assets':'@/assets',
                'common':'@/common',
                'components':'@/components',
                'network':'@/network',
                'views':'@/views',
            }
        }
    }
}

　　五個文件夾五個別名。

　　在加入一些通用配置，添加一個.editorconfig文件：

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

　　以後能夠開發項目了：

　　安裝下路由：

npm install vue-router --save

　　路由配置沒必要多說，這裏值得一提的是咱們想用之前項目中寫過的那個tabbar，因而咱們路由這裏直接複製了之前的tabbar的代碼，而後把tabbar、tabbaritem和maintabbar都搞過來。裏面路徑的代碼須要從新寫一下。

　　因爲前面已經配置了別名咱們能夠直接使用別名就不會報錯了。

import MainTabBar from 'components/content/mainTabbar/maintabbar'

　　若是在dom中使用別名須要增長一個小波浪線：

 <img slot="item-icon-active" src="~assets/img/cop-active.svg" alt="">

　　加入以後不須要配置什麼東西就能夠跑起來項目了。還報錯就看看：1.文件夾嵌套的文件夾名字是否有錯誤，或者漏了。2.組件是否註冊了。

　　新增長一個導航欄：使用一個具名插槽，這裏插槽必定要用div包起來好調整樣式。

<template>
    <div class="nav-bar">
      <div class="left"><slot name="left"></slot></div>
      <div class="center"><slot name="center"></slot></div>
      <div class="right"><slot name="right"></slot></div>
    </div>
</template>

　　後來這裏排版不對，是由於第一個div的class寫錯成id，那樣下面的css樣式就不生效了：

<style scoped>
    .nav-bar{
        display:flex;
        height:44px;
        line-height : 44px;
        text-align:center;
    }

    .left,.right{
        width:60px;
        background-color:red;
    }

    .center{
        flex:1;
        background-color: blue;
    }
</style>

　　display選擇flex後就能夠排在一排了。而後home中使用一下這個navbar

<script>
import NavBar from "components/common/navbar/NavBar"
export default {
    name:'Home',
    components:{
        NavBar
    }
}
</script>

　　效果就出來了。背景顏色只是爲了讓咱們更好的看到佈局效果。

　　而後寫一個網絡請求的文件：

import axios from 'axios'
export function request(config){
    const instance = axios.create({
        baseURL:"http://123.207.32.32:8000",
        timeout:5000
    })

    instance.interceptors.request.use(config =>{
        return config
    },err=>{

    })

    instance.interceptors.response.use(res=>{
        return res.data
    },err =>{
        console.log(err)
    })
    
    return instance(config)
}

　　同時使用：

npm install axios --save

　　安裝一下axios。而後也在home文件夾裏寫一個Home.js用來做爲中間引用文件，實現解耦，首頁只須要面向這個模塊進行開發，調用相應的函數就能夠無序關心具體的url，而url等內容統一放在這裏管理。

import {request} from "./request"

export function getHomeMultidata(){
    return request({
        url:'/home/multidata'
    })
}

　　這樣就能夠在home.vue中引入函數getHomeMultidata了：

import {getHomeMultidata} from "network/home"

　　以後咱們接着在下面寫一個created()函數的內容，只要這個組件建立了咱們就但願發送請求來請求數據，因此使用created()：

    created(){
        //1.請求多個數據
        getHomeMultidata().then(res=>{
            console.log(res);
        })
    }

　　這樣就拿到了請求的內容。可是這些內容都是函數內部的局部內容，咱們須要把這些內容保存在data中供之後使用。

data(){

return{

banners:[],

recommends:[]

}

created(){

//1.請求多個數據

getHomeMultidata().then(res=>{

console.log(res);

this.banners = res.data.banner.list;

this.recommends = res.data.recommend.list;

})

}

　　插入一個輪播圖

　　咱們如何使用別人寫好的組件呢？加入一個別人寫好的輪播圖組件到components/common/swiper，這個swiper中的內容就是咱們想要的輪播圖。咱們看到index.js文件能夠幫助咱們更好的引用這個組件：

import Swiper from './Swiper'
import SwiperItem from './SwiperItem'

export {
  Swiper, SwiperItem
}

　　那麼咱們引用的時候就很方便了：components中註冊別忘記了

import {Swiper,SwiperItem} from 'components/common/swiper'
export default {
    name:'Home',
    components:{
        NavBar,
        Swiper,
        SwiperItem
    },

　　而後就可使用輪播圖展現咱們請求到的內容：

    <swiper>
        <swiper-item v-for="item in banners">
            <a :href="item.link">
                <img :src="item.image" alt="">
            </a>
        </swiper-item>
    </swiper>

　　banners咱們已經經過網絡請求獲取到內容了，綁定href和item的link而後img的src屬性當頂上item的image，綁定dom屬性別忘記是有冒號的v-bind。

　　而後寫推薦欄

<template>
<div class="recommend">
   <div v-for="item in recommends" class="recommend-item">
       <a :href="item.link">
           <img :src="item.image" alt="">
           <div>{{item.title}}</div>
       </a>
   </div>
</div>
</template>

<script>
export default {
    name:'RecommendView',
    props:{
        recommends:{
            type:Array,
            default(){
                return []
            }
        }
    }

}
</script>

　　這裏props用來接收home傳過來的數據，home中v-bind來吧數據傳到props中：

<recommend-view :recommends="recommends"></recommend-view>

　　組件的引包和註冊這裏很少說也是須要的，還有一些css樣式來調整圖片大小不至於太大：

<style scoped>
    .recommend{
        display:flex;
        width: 100%;
        text-align:center;
        font-size:12;
        padding:15px 0 20px;
        border-bottom: 8px solid #eee;
    }
    .recommend-item{
        flex:1;
    }
    .recommend-item img{
        width:70px;
        height:70px;
        margin-bottom:10px;
    }
</style>

　　寫特點視圖欄：

　　在home下childcamps文件夾中添加一個featureview，短短几行代碼就能夠了：

<div class = "feature">
    <a href = "https://act.mogujie.com/zzlx67">
        <img src="~assets/img/home/mogujie.jpg" alt="">
    </a>
</div>

　　而後仍是老樣子須要回到home中引包，註冊組件而後使用一下組件就ok了。圖片能夠截圖來代替先，而後調整下css樣式使得圖片正常。

　　接着寫這個：內容導航

　　作一個封裝，由於可能在多個地方使用，放在components中。這個東西和導航欄不同，這個組件上都是同樣的，只有文字就有變化，咱們就不須要使用插槽。

　　這裏代碼彷佛有點亂，可是實現的無非就是上面那個東西，首先，點擊的內容須要高亮，因此咱們添加了class 和：class來肯定這個是否是激活狀態，須要不須要激活css樣式（粉色和下劃線）。而後@click函數則用來傳遞index來告訴函數是哪一個激活了。函數只須要this.currentIndex = index一下就能夠保持點擊的那個選項是高亮的了。注意的是對象語法active賦值爲True仍是False取決於index和currentIndex。

<template>
<div class = "tab-control">
   <div v-for ="(item,index) in titles" 
    class="tab-control-item" 
    :class="{active:index === currentIndex}" 
        @click="itemClick(index)">
       <span>{{item}}</span>
   </div>
</div>
</template>

　　以後是最重要的列表內容：

　　咱們須要使用一種方式來保存這些數據，

　　這是還沒更改的狀態