vue饿了么-拆分组件+配置路由

在index.html中加载reset.css样式

 <link rel="stylesheet" href="static/css/reset.css" type="text/css">

移动端视口不能被缩放

   <meta name="viewport" content="width=device-width,initial-scale=1.0,
    maximum-scale=1.0,user-scalable=no">

整个index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
     <!-- 设置视口标签 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,
    maximum-scale=1.0,user-scalable=no">
    <title>my-sell-demo</title>
    <!-- 去掉默认样式 -->
    <link rel="stylesheet" href="static/css/reset.css" type="text/css">
  </head>
  <body>
    <div id="app">
      <!-- 此处挂载的是整个界面，不能没有 -->
      <router-view></router-view>
    </div>
    <!-- built files will be auto injected -->
    
  </body>
</html>

在eslinc.js中做代码风格检查

rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'semi':['error','always'], // 没有分号就报错
    'indent':0,
    'space-before-function-paren': 0,
    'no-tabs': 0,
    'no-trailing-spaces': 0,
    "spaced-comment": 0,//注释风格要不要有空格什么的
    "comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
    'no-unused-vars': [0, {"vars": "all", "args": "after-used"}]
  }

App.vue中分为header，导航区tab和优先显示的seller组件（seller组件是商品的展示）、

<template>
  <div id="app">
    <!-- 将seller对象传递给header组件，v-blind,这是seller.vue的props属性 -->
    <v-header :seller = "seller">
    </v-header>

<div class="tab border-1px">
      <div class="tab-item">
        <router-link v-bind:to="'/goods'">
          商品
        </router-link>

      </div>
      <div class="tab-item">
        <router-link to="/ratings">
          评论
        </router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">
          商家
        </router-link>
      </div>
    </div>
    <!-- 此处挂载的是商品、评论和商家的内容 -->
    <keep-alive>
      <router-view :seller="seller"></router-view>
    </keep-alive>
  </div>
</template>

所以，App.vue是header和seller的父组件，接下来就编写header组件，编写完成后将header组件引入App.vue中，简单的header写完之后，在App.vue中测试成功引入（import,export defalult{components: {'v-header':header}}, <header></header>）

编写导航栏部分（tab），使用flex布局布置导航栏

.tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px
  border-1px(rgba(7, 17, 27, 0.1))
  .tab-item
    flex: 1
    text-align: center
    & > a
      display : block /* 不用点到a标签的字上就可以，标签所在的块皆可 */
      font-size : 14px
      color : rgb(77,85,93)
      &.active
        color: rgb(240, 20, 20)

vueloader依赖postcss插件解决兼容性问题，所以不用单独写兼容性问题

接下来，点击导航栏应该切换界面，使用vueRouter实现，在依赖中添加并实现npm安装（npm install），并在main.js中注册使用

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

回到App.vue中为tab添加超链接

<div class="tab border-1px">
    <div class="tab-item">
        <router-link v-bind:to="'/goods'">
          商品
        </router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">
          评论
        </router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">
          商家
        </router-link>
      </div>
    </div>
    <!-- 此处挂载的是商品、评论和商家的内容 -->
    <keep-alive>
       <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view :seller="seller"></router-view>
    </keep-alive>
</div>
</template>

回到main.js中配置vue-router路由，

如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

组件有其他文件import进来

import VueRouter from 'vue-router';
/* 第三方插件用块的方式去引用的时候要去注册 */
import VueResource from 'vue-resource';
/* import需要用的路由组件 */
import goods from './components/goods/goods.vue';
import ratings from './components/ratings/ratings.vue';
import seller from './components/seller/seller.vue';

Vue.use(VueRouter);
Vue.use(VueResource);
/* eslint-disable no-new */
// 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
let routes = [
  {
    path: '/', 
    name: 'index', 
    component: App, 
    children: [
      {path: '/goods', component: goods}, 
      {path: '/ratings', component: ratings},
      {path: '/seller', component: seller}]
  }
];
// 创建router实例,创建实例的时候是可以传一些配置进去
let router = new VueRouter({
  'linkActiveClass': 'active', // 此处默认active链接为红色 
   routes // （缩写）相当于 routes: routes
});
// 创建和挂载实例，记得要通过router配置的参数注入路由，从而让整个应用都拥有路由功能
const app = new Vue({
  router
}).$mount('#app');
// 现在，应用已经启动了！

如果想配置路由别名，在webpack.base.conf.js中配置别名

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': path.resolve(__dirname, '../src/components'),
      'common': path.resolve(__dirname, '../src/common'),
    }

配置超链接active时变色

 &.active
        color: rgb(240, 20, 20)

所以，在实例化vue-router时可以传一些option进去

let router = new VueRouter({
  'linkActiveClass': 'active', // 此处默认active链接为红色 
   routes // （缩写）相当于 routes: routes
});

vue饿了么-拆分组件+配置路由

猜你喜欢