技術標籤：vue3.0vue

樣式庫選擇

目前好用樣式庫有：

tailwindcss
Bootstrap

本專案使用bootstrap， npm install [email protected] --save 其中next表示最新版本

新建元件ColumnList

新建元件後，可以建立元件的interface

export interface ColumnProps {
    id: number;
    title: string;
    avatar: string;
    description: string;
}

建立props，配置必須傳入引數list，型別為ColumnProps的陣列，可以使用vue3的PropType屬性進行型別斷言。

props: {
        list: {
            type: Array as PropType<ColumnProps[]>,
            required: true
        }
    },

app內呼叫元件

在app.vue中簡單寫一個數組，做一些資料，傳入到元件內，就完成了元件的呼叫

<template>
  <div class="container">
    <column-list :list="list"></column-list>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import ColumnList, { ColumnProps } from './components/ColumnList.vue';
const testData:ColumnProps[] = [
  {id:1, title: '專欄1', description: '這是專欄1', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Flarge%2F007s9uFmgy1gn7wnixsccj30k00aijrn.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614747631&t=5c5e2ffc44d0dfa3af13b7f4e0c6e12e'},
  {id:2, title: '專欄2', description: '這是專欄2', avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinakd10111%2F145%2Fw608h337%2F20210201%2Fde7f-kiksqxh5466822.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614747653&t=1c3578cf07c53431faed8847eeef645e'}
]

export default defineComponent({
  name: 'App',
  components: {
    ColumnList
  },
  setup() {
    return {
      list: testData
    }
  }
})
</script>