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

路由的实现：其实是改变哈希值