Vue3教程:用 Vue3 開發小程式,這裡有一份實際的程式碼案例!

我是13發表於2020-11-16

前言

尋尋覓覓冷冷清清,悽悽慘慘慼戚。

Vue 3 釋出以後,最近也在學習和寫一些 Vue3 的 demo 和專案,我也一直想著什麼時候能在小程式裡使用新特性?

於是我翻遍了市面上的小程式框架,如 uni-app、wepy、mpvue,目前(截止至2020年11月5日)還都沒能做到相容 Vue 3 的寫法,直到我發現了一個很騷的東西,Taro 居然支援 Vue 3。

很驚喜!

開整

廢話少說,放碼過來,我們直接開整!

首先需要全域性安裝 @tarojs/cli

# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli
# OR 安裝了 cnpm,使用 cnpm 安裝 CLI
$ cnpm install -g @tarojs/cli

如果你的本地已經安裝了 @tarojs/cli,並且版本是 3.x,那麼可以忽略上述操作。但是如過你的版本是 2.x,你需要先將它解除安裝了,再進行上述安裝,解除安裝如下:

$ npm uninstall -g @tarojs/cli
# 或者
$ yarn global remove @tarojs/cli

必要的話,兩個都執行一遍。

這是我的版本號:

初始化專案

通過如下命令列初始化專案:

taro init taro-vue3

選項如下,這裡要注意 CSS 預處理去選擇 Sass,後面 UI 框架會用到:

稍等一會兒,專案便可初始化完畢。

結束之後進入專案,執行指令:

npm run dev:weapp

編譯成功之後,通過微信開發者工具開啟 dist 目錄,瀏覽專案,如下所示:

UI 庫新增

要開發一個專案,雖然說不一定非要上 UI 庫,但是有總比沒有好。純手寫樣式當然也是考驗一個前端工程師的技術功底,但是專案工期不等人,提高開發效率才是第一位。

在我查詢 Taro 是否有 Vue 相關的 UI 庫時,我找到了 taro-ui-vue,感覺很舒服,應該很快就可以寫出一個 demo 來。

後來安裝好元件包,引入元件使用的時候,編譯出錯了,大概看了一下,是沒有相容 Vue 3 的寫法。

於是我打算暫時放棄了,然後到 taro-ui-vue 的倉庫裡提了一個 Issue,如下所示:

我再一次沸騰了,居然還有這玩意兒 taro-ui-vue3,此時此刻我突然就很想和東哥做兄弟,哈哈哈哈。

繼續整!我們可以在專案裡通過 npm install taro-ui-vue3 新增元件包,根據官網的提示,我這裡採用了樣式全域性引入的方式:

// app.js
import { createApp } from 'vue'
import store from './store'

import 'taro-ui-vue3/dist/style/index.scss'

const App = createApp({
  onShow (options) {},
  // 入口元件不需要實現 render 方法,即使實現了也會被 taro 所覆蓋
})

App.use(store)

export default App

頁面中直接通過引入元件使用:

<template>
  <view class="index">
    <NumberDisplay/>
    <NumberSubmit/>
    <AtButton class="add-btn" type='primary'>測試</AtButton>
  </view>
</template>

<script>
import NumberDisplay from '../../components/NumberDisplay.vue'
import NumberSubmit from '../../components/NumberSubmit.vue'
import { AtButton } from 'taro-ui-vue3'
export default {
  name: 'Index',
  components: {
    NumberDisplay,
    NumberSubmit,
    AtButton
  }
}
</script>

<style>
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

如下圖所示:

更多元件使用,請自行查閱 taro-ui-vue3 官方文件

最後

本文主要就是為了安利大家一個能用 Vue 3 語法寫小程式的框架,在此我也基於上述程式碼實踐了一下,製作了一個 TodoList 小案例:

原始碼已經開源到 GitHub vue3-examples倉庫中,倉庫地址:vue3-examples,此倉庫將不定期更新各種 Vue3.0 相關的知識及各種整合 Demo 及 Vue3 使用小技巧,大家可以關注一下,有什麼建議也歡迎大家給我留言。

除註明轉載/出處外,皆為作者原創,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連結,否則保留追究法律責任的權利。

相關文章