vue.js開發外賣App項目的組件拆分總結(五)

static目錄下css中有reset.css文件，開發一個前端頁面，需要將一些標籤默認頁面reset掉。採用的是http://cssreset.com官網提供的樣式。

在入口文件:index.html中引入reset.css文件，還有移動端的視口不能縮放，有個初始的寬和高設置，

可以通過配置eslintrc.js文件修改一些規則，比如：indent:0表示關於空格的規則取消。

在eslint的規則中，當new 一個對象時，是需要賦值給一個變量的，而vue可以不用賦值，所以

/* eslint-disable no-new */

代碼表示跳過這個規則。

項目中需要引入stylus

在package.json文件中devDependencies對象中添加stylus-loader,然後執行npm install，然後node-modules中就有stylus-loader。

header名字與html5原生的header標籤名重複

 <v-header :seller="seller"></v-header>
 export default{
  components: {
      'v-header': header
    }
 }

如以上代碼所示：在註冊組件時，起個別名v-header

flex佈局的應用

實現商品，評論和商家三列等分佈局

這塊在app.vue文件中
<template>
  <div>
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <a v-link="{path:'/goods'}">商品</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/ratings'}">評價</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/seller'}">商家</a>
      </div>
    </div>
    <router-view :seller="seller" keep-alive></router-view>
  </div>
</template>

樣式如下：

.tab
    display: flex  //key code
    width: 100%  //key code
    height: 40px
    line-height: 40px 
    .tab-item
      flex: 1   //key code
      text-align: center

源碼並沒有寫兼容性的代碼，比如以下是flex在不同瀏覽器兼容性的寫法

display: -webkit-box;
display: -ms-flexbox;
display: flex;

如下圖所示，因爲vue-loader依賴了一個postcss插件，這些插件會自動幫我們搞定css兼容問題。

"vue-loader": "^8.3.0",出現在package.json文件的devDependencies選項中，要使用必須配置。

vue-router的使用

vue-router的配置：
在package.json中配置"vue-router":"^0.7.13",，然後npm install，安裝vue-router，在node-module模塊中可以找到。

"dependencies": {
    "vue": "^1.0.21",
    "vue-resource":"^1.0.1",
    "vue-router":"^0.7.13",
    "babel-runtime": "^6.0.0",
    "better-scroll": "^0.1.7"
  }

vue-router的使用

在main.js文件中
import VueRouter from 'vue-router';
Vue.use(VueRouter);//如果使用common.js模塊，需要顯式的使用vue.use()安裝路由模塊

使用vue-router的官方模板，html模板編寫如下：使用指令v-link進行導航

對應項目中的配置如下：

這塊在app.vue文件中
<template>
  <div>
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <a v-link="{path:'/goods'}">商品</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/ratings'}">評價</a>
      </div>
      <div class="tab-item">
        <a v-link="{path:'/seller'}">商家</a>
      </div>
    </div>
    <router-view :seller="seller" keep-alive></router-view>
  </div>
</template>

以上：路由外鏈router-view的作用：當我們改變路由，會刷新router-view中包含的內容。

vue-router的js文件的配置

這塊在main.js中配置
var app = Vue.extend(App);// 路由器需要一個根組件
var router = new VueRouter({//實例化一個router
  linkActiveClass: 'active' //這個選項配置當link是active時，指定的類名爲active，實現了當我們選中某個tab，然後那個Link會被激活，應用active樣式
});

//通過map方法配置路由
router.map({
  '/goods': {
     component: goods
  },
  '/ratings': {
    component: ratings
  },
  '/seller': {
    component: seller
  }
});

router.start(app, '#app');//通過start方法將app掛載點傳入
// router.go('/goods');  //該方法是router提供的API，頁面默認進入goods頁面

需要注意兩點：(1)通過var app = Vue.extend(App);代替new Vue實例(2)通過start方法將app掛載點傳入

關於目錄在webpack的webpack.base.conf文件中的配置。好處：在其他組件引用該組件時，不用每次寫絕對路徑，寫相對路徑即可。作用：將common目錄映射到../src/common

路由的實現：其實是改變哈希值