基于vue-cli@3.x的移动webapp项目搭建

1.执行vue.create app-name创建一个项目

2.进入到项目目录，如果没有安装router，就执行npm install vue-router -s安装vue-router并写入依赖

3.清除无用的文件，让src目录保持最简单的一个min.js和App.vue即可

4.创建一个名为views的目录，在里面分别创建Home.vue,Mall.vue,Cart.vue,Mine.vue这四个页面级的视图组件

5.创建一个名为router的目录，分别创建index.js和routes.js

// src/router/route.js
// 非页面级别的组件，一般不需要做成异步组件
import ProFooter from '@/components/ProFooter'
// 以下页面级别的组件，需要做成异步组件
const Home = () => import('@/views/Home')
const Mall = () => import('@/views/Mall')
const Cart = () => import('@/views/Cart')
const Mine = () => import('@/views/Mine')
// 导出的配置项
export default [
  // 根目录访问，直接定向到/home
  {
    path: '/',
    redirect: '/home',
    meta: {
      isTabItem: false //由于tabbar的数据与routes的数据是共享的，但是又不是全部的routes数据，所以需要加一个标记来确定该路由是否需要显示在tabbar
    }
  },
  // 首页的组件和路由
  {
    path: '/home',  // 访问的路径
    name: 'home',   // 路由的名字
    components: {
      default: Home,  // 默认的router-view
      footer: ProFooter  // 带有name="footer"属性的router-view
    },
    meta: {
      isTabItem: true,
      title: '首页',  // 用于显示在tabbar上得到文字
      icon: ''  // tabbar的icon，注意这里是unicode，渲染的时候需要加v-html，而不是插值表达式
    }
  },
  {
    path: '/mall',
    name: 'mall',
    components: {
      default: Mall,
      footer: ProFooter
    },
    meta: {
      isTabItem: true,
      title: '商场',
      icon: ''
    }
  },
  {
    path: '/cart',
    name: 'cart',
    components: {
      default: Cart,
      footer: ProFooter
    },
    meta: {
      isTabItem: true,
      title: '购物车',
      icon: ''
    }
  },
  {
    path: '/mine',
    name: 'mine',
    components: {
      default: Mine,
      footer: ProFooter
    },
    meta: {
      isTabItem: true,
      title: '我的',
      icon: ''
    }
  }
]

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

import routes from './routes'

Vue.use(VueRouter)

export default new VueRouter({
  routes
})

6 开始你的布局，在App.vue里，把头部，主体和底部的布局先写好，样式什么样，就自己定,注意在写布局的时候最好加入css的设计

<template>
    <div class="pro-container">
      <div class="pro-header">
        头部
      </div>
      <div class="pro-main">
        主体
      </div>
      <div class="pro-tabbar">
        底部
      </div>
   </div>
</template>

7，下一步在头部直接加入一个组件，在主体部分加入router.view，在底部也加上一个带有命名的router-view

<template>
    <div class="pro-container">
      <div class="pro-header">
          // 这个组件是不需要使用router-vue渲染的
        <ProHeader></ProHeader>
      </div>
      <div class="pro-main">

        <!-- 这里是用于渲染default的组件 -->
        <router-view></router-view>
      </div>
      <div class="pro-tabbar">
        <!-- 用于渲染底部的tabbar -->
        <router-view name="footer"></router-view>
      </div>
   </div>
</template>

<script>
import ProHeader from '@/components/ProHeader'
export default {
  components: {
    ProHeader
  }
}
</script>

<style lang="scss">

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, a,
b, u, i, center,
dl, dt, dd, ol, ul, li,
 form, label,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
figure,footer, header,
menu, nav, section,
audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
 section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
.pro {
  &-container{
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  &-main {
    flex: 1;
    overflow-x: hidden;
  }
  }

  @font-face {
  font-family: 'proicon';  /* project id 1171929 */
  src: url('//at.alicdn.com/t/font_1171929_kvjruo3j3q.eot');
  src: url('//at.alicdn.com/t/font_1171929_kvjruo3j3q.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1171929_kvjruo3j3q.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1171929_kvjruo3j3q.woff') format('woff'),
  url('//at.alicdn.com/t/font_1171929_kvjruo3j3q.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1171929_kvjruo3j3q.svg#iconfont') format('svg');
}
</style>