add ts

src/components/ArticleList/ArticleItem.tsx

@@ -13,6 +13,10 @@ export interface IArticle {
     data: {
       type: Object,
       // required: true,
+    },
+    article: {
+      type: Object,
+      // required: true,
     }
   },
   computed: {},
@@ -22,15 +26,15 @@ export interface IArticle {
 
 export default class ArticleItem extends Vue {
   data!: IArticle
-  // article: IArticle
+  article!: IArticle
 
   render () {
     return (
       <div class="vtx-articleItem">
-        <div class="vtx-articleItem__title">{this.data.title}</div>
-        <div class="vtx-articleItem__des">{this.data.description}</div>
-        <div class="vtx-articleItem__date">{this.data.date}</div>
-        <div class="vtx-articleItem__content">{this.data.content}</div>
+        <div class="vtx-articleItem__title">{this.article.title}</div>
+        <div class="vtx-articleItem__des">{this.article.description}</div>
+        <div class="vtx-articleItem__date">{this.article.date}</div>
+        <div class="vtx-articleItem__content">{this.article.content}</div>
       </div>
     );
   }

src/components/ArticleList/index.tsx

@@ -26,13 +26,13 @@ export default class ArticleList extends Vue {
       <div class="vtx-articleList">
         <GroupLabel />
         <div class="vtx-articleList__content">
-          {
+          {/* {
             this.articles.map((i) => {
               return (
                 <ArticleItem  data={i}/>
               )
             })
-          }
+          } */}
         </div>
       </div>
     );

src/components/Nav/index.tsx

@@ -15,7 +15,8 @@ export default class Nav extends Vue {
       <div class="vtx-nav">
         <router-link to="/">{this.$t('home')}</router-link> |
         <router-link to="/article">{this.$t('article')}</router-link> |
-        <router-link to="/about">{this.$t('about')}</router-link>
+        <router-link to="/about">vue</router-link> |
+        <router-link to="/ts">typeScript</router-link> |
       </div>
     );
   }

src/router.ts

@@ -24,6 +24,14 @@ export default new Router({
         },
       ],
     },
+    {
+      path: '/ts',
+      name: 'ts',
+      // route level code-splitting
+      // this generates a separate chunk (about.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import(/* webpackChunkName: "ts" */ './views/TypeScript/index.vue'),
+    },
     {
       path: '/about',
       name: 'about',

src/views/About.vue

@@ -1,38 +1,6 @@
 <template>
   <div class="about">
     <h1>使用vue-template</h1>
-    <pre class="ql-syntax" spellcheck="false">&lt;template&gt;
-
-  &lt;div class="about"&gt;
-
-    &lt;h1&gt;使用vue-template&lt;/h1&gt;
-
-  &lt;/div&gt;
-
-&lt;/template&gt;
-
-
-
-&lt;style lang="scss" scoped&gt;
-
-  .about {
-
-    text-align: left;
-
-    padding-left: 45%;
-
-  }
-
-  h1 {
-
-    color: red;
-
-  }
-
-&lt;/style&gt;
-
-
-</pre><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p>
   </div>
 </template>
 

src/views/TypeScript/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="ts">
+    <h1>{{msg}}</h1>
+    <div v-for="(article,index) in articles" :key="index">
+      <ArticleItem :article="article" @click="handleClick"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import ArticleItem,{IArticle} from '@/components/ArticleList/ArticleItem';
+
+@Component({
+  components:{
+    ArticleItem:ArticleItem,
+  },
+})
+
+export default class TypeScript extends Vue{
+  msg = '使用vue-typeScript';
+  articles = [
+    {title:'article1', description:'this is a description', date: '2019-10-11',content: 'content,content,content'},
+    {title:'article1', description:'this is a description', date: '2019-10-11',content: 'content,content,content'},
+    {title:'article1', description:'this is a description', date: '2019-10-11',content: 'content,content,content'},
+    {title:'article1', description:'this is a description', date: '2019-10-11',content: 'content,content,content'},
+    {title:'article1', description:'this is a description', date: '2019-10-11',content: 'content,content,content'},
+    {title:'article1', description:'this is a description', date: '2019-10-11',content: 'content,content,content'},
+  ] as IArticle[];
+
+  handleClick(val:any) {
+    console.log('handleClick',val)
+  }
+
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .ts {
+    text-align: left;
+  }
+  h1 {
+    color: red;
+  }
+</style>
+