用Vue3(Vue-Composition API) 寫一個疫情查詢小工具

線上地址
git地址

由於疫情太過嚴重，只能呆在家，因此前幾天用 React+ Antd 寫了一個疫情查詢小工具：React 版本，也算爲疫情的防控作了一點點貢獻。這兩天呢，看見 Vue3-Alpha 版本都出到 v3.0.0-alpha.4 了，如圖：

在這個版本中，主要的工做就只剩下處理服務器端渲染了，因此Vu3真的是指日可待了。同時官方呢但願咱們可以積極試用 Vue 新版本。爲了響應號召（只是由於在家太無聊了），因此咱們來試一試利用 Vue3: Vue-Composition-Api + Typescript 來重構咱們的疫情查看小工具。

Vue3 簡單知識

setup

setup() 函數是 vue3 中，專門爲組件提供的新屬性。它爲咱們使用 vue3 的 Composition API 新特性提供了統一的入口。setup 函數會在 beforeCreate 以後、created 。setup() 函數接收兩個參數，setup(props,context)。其中:

• props: 接收 props 數據
  在 props 中定義當前組件容許外界傳遞過來的參數名稱：

  props: {
        propsName: String
    }
  複製代碼

  經過 setup 函數的第一個形參，接收 props 數據：

  setup(props) {
       console.log(props.p1)
    }
  複製代碼

• context: 這個上下文對象中包含了一些有用的屬性，這些屬性在 vue 2.x 中須要經過 this 才能訪問到，在 vue 3.x 中，它們的訪問方式以下:

  setup(props, context) {
        context.attrs
        context.slots
        context.parent
        context.root
        context.emit
        context.refs
    }
  複製代碼

reactive()

reactive() 函數接收一個普通對象，返回一個響應式的數據對象。 咱們來看一下它的基本用法:

// js部分
import { reactive } from '@vue/composition-api'
setup() {
     // 建立響應式數據對象
    const state = reactive({count: 0})
     // setup 函數中將響應式數據對象 return 出去，供 template 使用
    return state // 必須return
}
// template裏面使用
<p>當前的 count 值爲：{{ state.count }}</p>
複製代碼

咱們經過 reactive包裹的對象，return 以後，就至關於 Vue 2.x 的 data() hooks。 咱們能夠對其進行雙向綁定等操做。

ref

ref() 函數用來根據給定的值建立一個響應式的數據對象，ref() 函數調用的返回值是一個對象，這個對象上只包含一個 .value 屬性：

// js部分
   import { ref } from '@vue/composition-api'
   setup() {
       // 建立響應式數據對象 count，初始值爲 0
       const count = ref(0)
       // 若是要訪問 ref() 建立出來的響應式數據對象的值，必須經過 .value 屬性才能夠
       console.log(count.value) // 輸出 0
       // 讓 count 的值 +1
       count.value++
       // 再次打印 count 的值
       console.log(count.value) // 輸出 1
       return {
           count,
           name: ref('zs')
       }
   }
  // template裏面使用
   <template>
      <p>{{count}}-{{name}}</p>
   </template>
複製代碼

開始動手

初始化項目

首先咱們利用 Vue Cli 腳手架 初始化咱們的應用:

注意，Use class-style component syntax ？ 這一項咱們要選擇爲no, 咱們不用裝飾器寫法，咱們要用composition api 的寫法

搭建項目目錄

而後開始搭建咱們的項目目錄：

├── package-lock.json
  ├── package.json
  ├── public
  │   ├── favicon.ico
  │   └── index.html
  ├── src
  │   ├── App.vue
  │   ├── assets
  │   ├── components
  │   ├── main.ts
  │   ├── map
  │   ├── pages
  │   ├── plugins
  │   ├── services
  │   ├── shims-vue.d.ts
  │   └── utils
  ├── tsconfig.json
  ├── vue.config.js
  ├── yarn-error.log
  └── yarn.lock
複製代碼

page目錄:

├── home
  │   └── Home.vue
  ├── line
  │   └── TrendLine.vue
  ├── map
  │   └── Map.vue
  ├── news
  │   └── News.vue
  ├── pie
  │   └── Pie.vue
  └── rumor
      └── Rumor.vue
複製代碼

導入 Vue-Composition-Api

yarn add @vue/composition-api  //根目錄執行
// main.ts
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)
複製代碼

建立根組件

咱們將Home做爲根組件，咱們先來定義一下這個組件:

import { createComponent, onMounted, onUnmounted, reactive } from '@vue/composition-api'
  export default createComponent({
  name: 'Home',
  components: {
  },
  setup() {
      // 生命週期部分
      onMounted(() => {
      console.log('onMounted...')
      console.log(state)
      })
      onUnmounted(() => {
      console.log('onUnmounted...')
      })
      return {
     
      }
  }
 })
複製代碼

經過 createComponent函數 結合 TypeScript 提供的類型推斷來進行項目的開發。

定義響應式數據

接着咱們得定義一些響應的數據:

export interface HomeState {
  newsList?: []
  caseList?: []
}
// 在 setup()裏面
    const origin: HomeState = {
    newsList: [],
    caseList: []
  }
  const state = reactive(origin)
複製代碼

異步請求

接着咱們須要發起異步請求初始化數據

setup(){
  // methods
  const getRumorList = async () => {
    ....
  }
  const getTrendList = async () => {
    ....
  }
  const initData = async () => {
    ....
  }
}
複製代碼

組件的導入及使用

假設咱們要導入 News組件：

import News from '@/pages/news/News.vue'
// components
components: {
  News
},
setup(){
  .....
}
// template 中使用
<News :newlist="state.newsList" />
複製代碼

組件內部:

import { createComponent } from '@vue/composition-api'
  export default createComponent({
  name: 'News',
  props: {
      newlist: Array
  }
  })
複製代碼

Docker部署

# ncov-vue3 Dockerfile

  #指定node鏡像對項目進行依賴安裝和打包
  FROM node:10.16.0 AS builder
  # 將容器的工做目錄設置爲/app(當前目錄，若是/app不存在，WORKDIR會建立/app文件夾)
  WORKDIR /app 
  COPY package.json /app/ 
  RUN npm config set registry "https://registry.npm.taobao.org/" \
      && npm install
  
  COPY . /app   
  RUN npm run build 

  #指定nginx配置項目，--from=builder 指的是從上一次 build 的結果中提取了編譯結果(FROM node:alpine as builder)，便是把剛剛打包生成的dist放進nginx中
  FROM nginx
  COPY --from=builder app/dist /usr/share/nginx/html/
  COPY --from=builder app/nginx.conf /etc/nginx/nginx.conf


  #暴露容器80端口
  EXPOSE 80
複製代碼

看到這裏，小夥伴們基本上了解Vue3 的相關操做和基本入門，你們也操做起來吧！

效果截圖

咱們仍是來看看效果截圖:

最後，武漢加油⛽️！