Vue項目3、項目中碰到的問題詳解

1、組件的劃分建立

方法一：

把頁面上須要複用的模塊，拆分紅組件。好比，頁面的header、footer、麪包屑、彈出框等拆分紅組件。因此在src中應該有一個文件夾(components)專門放這些會複用的組件。

頁面中不被複用的模塊，好比content主體內容。會被作爲一個主頁面，在這個主頁面中會去導入可複用組件組成一個能夠被用戶瀏覽的完整網頁。因此在src中應該有一個文件夾（views）專門放這些主體頁。

 

方法二：

把頁面上全部的模塊能拆分的都拆分紅小組件。那些複用的組件，好比頁面的header、footer、麪包屑、彈出框等，放入一個文件夾(components)。

其它拆分的小組件，按照頁面的名稱的不一樣，放入以頁命名不一樣的文件夾，過程：建立一個文件夾（pages），以後建立以頁命名不一樣的文件夾。好比Home頁，除了header、footer，能夠把表明主體內容的，展現1內容、展現2內容、展現3內容等放入一個文件夾（home），home中再建立一個Home.vue把這些組件導入進來，組成一個能夠被用戶瀏覽的完整網頁。

 

2、關於項目靜態資源的存放

src目錄中有assets文件夾。再src目錄外有一static文件夾。那項目中引用的靜態資源文件應該如何選擇存放位置呢？

assets：資源目錄（放置一些圖片等），這裏的資源會被webpack構建,只支持相對路徑形式eg: ../assets/[filename]。更傾向於放置組件（那些能夠被複用的模塊）中引用的資源（css及img），若是圖片足夠小會被打包成Base64

static：純靜態資源（不會變更的資源，如圖片、字體），不會被webpack構建，必須使用絕對路徑引用這些文件eg: /static/[filename]，直接被複制到打包目錄。頁面中（不被複用的vue頁面）應用的資源放在這裏。

在咱們實際的開發中，總的來講：static放不會變更的文件 assets放可能會變更的文件。

 

3、關於項目組件導入資源文件

css導入-->直接能夠用import導入。eg：導入base.css。在script中，用 import './../assets/css/base.css' 直接導入。

組件導入-->import NavHeader from '@/components/Header'

注意：import導入文件地址須要加引號（雙引號/單引號），import導入文件後，結尾不須要符號（好比，逗號或者分號）

組件導入後，還要定義組件。用components:{Header,Footer} 

 

4、命名

vue的組件的命名支持駝峯命名,不支持鏈接線命名,使用是用鏈接線連接名稱，包括屬性的命名!

Vue局部註冊 或者全局註冊 組件時，組件定義要用 分隔命名，用駝峯命名是不生效的

若是組件以駝峯式命名，那麼導入的時候，須要用分隔命名加載到Dom中，不然不生效

 

5、調試神器

安裝Vue調試神器 vue-devtools

 

6、slot的應用 

在複用組件中，使用<slot></slot> ,調用單頁中直接寫將要代替插槽的內容，好比<span>列表</span>

若是使用多個插槽，就須要給插槽制定名字。好比。複用組件中使用<slot name="list"></slot><slot name="id"></slot>，則單頁中寫代替插槽內容爲，<span slot="list">列表</span><span slot="id">id號</span>

 

7、前端調用後端接口數據

當要調用後臺對接接口的時候，若是後臺人員還沒給到接口時，這時能夠本身建立一些測試數據，先保證前端交互是正確的。通常後端會給的接口規範。按照後端給的接口規範，能夠作一些測試數據。通常有固定的寫法，首先要返回給前端一個狀態(status),1表示接收成功，0表示接收失敗。而後要返回結果。

我是在static中建立一個goods.json（商品列表信息），而後在裏面放一些測試數據。

eg：goods.json

{   //json是一個對象
    "status":"0",     //json中鍵必須加雙引號，值也須要加
    "msg":"WOCUOWU",
    "result":[
        {
            "productId":"0001",
            "productName":"小米1",
            "productPrice":"1100",
            "productImg":"images/1.jpg"
        },
        {
            "productId":"0002",
            "productName":"小米2",
            "productPrice":"1200",
            "productImg":"images/2.jpg"
        },
        {
            "productId":"0003",
            "productName":"小米3",
            "productPrice":"1300",
            "productImg":"images/3.jpg"
        }

    ]
}

 

 8、開發環境中，跨域，

在config中的index.js中跨域代理中設置所要跨域的連接。

proxyTable: {
       '/goods':{
        target: 'http://localhost:3000',
       },
       '/goods/*':{
        target: 'http://localhost:3000',
       },
       '/users':{
        target: 'http://localhost:3000',
       },
       '/users/*':{
        target: 'http://localhost:3000',
       },
       '/users/*/*':{
        target: 'http://localhost:3000',
       }
    }

注意：若在線上環境就不能用proxyTable要用ngix代理轉發。

 

 9、分頁

前端須要給後臺參數  page當前頁  pageSize 一頁中要展現幾條數據   sort排序（1升序，0降序 ）

後臺中skip(跳過多少條數據)=(page-1)*pageSize

 

10、升序降序

在dada中定義一個sortFlag=true，將升降序的標籤上加上事件，在事件中

sortGoods(){
  this.sortFlag=!this.sortFlag
}

 

 11、插件 vue-infinite-scroll  製做分頁

用法，能夠去npm中搜索，裏面會有應用方法

 

 12、關於導航選中樣式

<div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filtershow}">
          <dl class="filter-price">
            <dt>Price:</dt>
            <dd><a href="javascript:void(0)" @click="seleAllP" :class="{'cur':priceCheck=='all'}">All</a></dd>
            <dd v-for="(price,index) of priceFilter">
              <a href="javascript:void(0)" @click="selePrice(index)" :class="{'cur':priceCheck==index}">{{price.startPrice}} - {{price.endPrice}}</a>
            </dd>

          </dl>
        </div>

data () {
    return {
      priceCheck:"all",  //默認選中all
    }
  }

seleAllP:function(){
this.priceCheck='all';
},

 selePrice:function(index){
this.priceCheck=index;
 }

 

 

持續更新中......