（十五）VueCli3.0全栈——前端页面的准备工作

1、删除不要的东西

• client/src/assets/ 下面的logo.png删掉
• client/src/components 下面的HelloWorld.vue删掉
• client/src/views 里面的About.vue和Home.vue删掉

2、配置

• 修改client/src/router.js内容

  //删掉多余部分
  import Vue from 'vue'
  import Router from 'vue-router'
  
  Vue.use(Router)
  
  export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
      {
        // path: '/',
        // name: 'home',
        // component: Home
      }
    ]
  })
  
  

• 在views/ 下面新增一个组件 index.vue

  <template>
      <div class="index">
          初始化页面
      </div>
  </template>
  
  <script>
  export default {
      name:'index',
      components: {
          
      }
  }
  </script>
  

• router.js文件中引入组件，配置路径

  //router.js
  import Vue from 'vue'
  import Router from 'vue-router'
  import Index from './views/Index.vue'
  
  Vue.use(Router)
  
  export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
      {
        path:'/',
        redirect:'/index'
      },
      {
        path:'/index',
        name:'index',
        component:Index
      },
  
    ]
  })
  

• App.vue修改为如下内容

  <template>
    <div id="app">
      <router-view/>
    </div>
  </template>
  
  <style>
  html,
  body,
  #app {
    width: 100%;
    height: 100%;
  }
  
  </style>
  

• client/public下面新建一个文件夹css，里面新建一个reset.css文件

  /* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  /* 加载动画的 */
  .el-loading{
      position: absolute;
      z-index: 2000;
      background-color:rgba(255, 255, 255, .7);
      margin: 0;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-transition: opacity .3s;
      transition: opacity .3s;
  }
  
  .el-loading-spinner{
      top: 50%;
      margin-top: -21px;
      width: 100%;
      text-align: center;
      position: absolute;
  }
  

• client/public 下面的index.html引入我们自己创建的样式

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

到这，项目前端页面准备工作完毕。