新创建

layouts/default.vue

 <template>
-  <div>
-    <nuxt />
-  </div>
+<Layout class="layout">
+  <Header>
+    这是头
+  </Header>
+  <Content>
+     <nuxt />
+  </Content>
+</Layout>   
 </template>
-
-<style>
-html {
-  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
-  font-size: 16px;
-  word-spacing: 1px;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  box-sizing: border-box;
+<script>
+export default {
+  
 }
-
-*,
-*:before,
-*:after {
-  box-sizing: border-box;
-  margin: 0;
+</script>
+<style lang="less" >
+.layout{
+  height: 100vh;
 }
-
-.button--green {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #3b8070;
-  color: #3b8070;
-  text-decoration: none;
-  padding: 10px 30px;
-}
-
-.button--green:hover {
-  color: #fff;
-  background-color: #3b8070;
-}
-
-.button--grey {
-  display: inline-block;
-  border-radius: 4px;
-  border: 1px solid #35495e;
-  color: #35495e;
-  text-decoration: none;
-  padding: 10px 30px;
-  margin-left: 15px;
-}
-
-.button--grey:hover {
-  color: #fff;
-  background-color: #35495e;
-}
-</style>
+</style>
\ No newline at end of file

pages/index.vue

 <template>
   <div class="container">
-    <div>
-      <logo />
-      <h1 class="title">
-        admin
-      </h1>
-      <h2 class="subtitle">
-        this is init project
-      </h2>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          class="button--grey"
-        >
-          GitHub
-        </a>
-        <Button type="primary">hello</Button>
-      </div>
-    </div>
+   <div class="menu">33</div>
+   <div class="main">
+     <Table :columns="columns" :data="list"></Table>
+   </div>
   </div>
 </template>
 
 <script>
-import Logo from '~/components/Logo.vue'
 
 export default {
-  components: {
-    Logo
+  data(){
+    return {
+      columns:[
+        {
+          title:"序号",
+          type:"index"          
+        },
+        {
+          title:"字段",
+          key:"name"
+        },
+        {
+          title:"名称",
+          key:"title"
+        },
+        {
+          title:"类型",
+          key:"type"
+        },
+        {
+          title:"长度",
+          key:"length"
+        },
+        {
+          title:"类别",
+          key:"length"
+        },
+        {
+          title:"类别",
+          key:"length"
+        },
+        {
+          title:"注释",
+          key:"note"
+        },
+      ]
+    }
   }
 }
 </script>
 <style lang="less">
-.container {
-  margin: 0 auto;
-  min-height: 100vh;
+.container{
   display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  .title{
-    color: red;
+  height: 100%;
+  .menu{
+    width: 300px;
+    border-right: 1px solid #ddd;
+    margin-right: 10px;
+    overflow: auto;
+  }
+  .main{
+    flex: 1;
+     overflow: auto;
   }
-}
-
-.title {
-  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  display: block;
-  font-weight: 300;
-  font-size: 100px;
-  color: #35495e;
-  letter-spacing: 1px;
-}
-
-.subtitle {
-  font-weight: 300;
-  font-size: 42px;
-  color: #526488;
-  word-spacing: 5px;
-  padding-bottom: 15px;
-}
-
-.links {
-  padding-top: 15px;
 }
 </style>