背景描述

Linux 中國曾在過去的 1 ～ 2 年內長期運行了一個 TL;DR 的中國版，不過當時做的版本是小程式的版本，一直以來，受限于小程式·云開發沒有 Web SDK ，因此無法將應用能力遷移到更多的平臺上，剛好最近云開發提供了 Web SDK ，于是便可以借此機會，將業務實作 PC 化，服務更多人群，

專案設計

在進行專案開發時，先對專案進行了基本的 UI 設計

詳情頁

這里用到的是 balsamiq 的手繪線框圖來完成產品設計，以避免我個人過度追求完美，而讓產品延期遲遲不能上線的問題（這樣的事情在歷史上發生了非常多次）

技術選項

由于需要的是一個前端頁面，因此，在技術選型方面，幾乎沒有太多的異議，使用最為熟悉的技術堆疊來完成，

前端框架：Vue
路由器：Vue Router
CSS 框架：Vuetifyjs

mirror 配置

因為身處國內， npm 的速度必然不太好，因此需要進行相應的 mirror 設定，確保 npm 和 yarn 在安裝依賴，這里使用的是騰訊云提供的鏡像，

# Npm 設定
npm config set registry http://mirrors.cloud.tencent.com/npm/

# yarn 設定
yarn  config set registry http://mirrors.cloud.tencent.com/npm/ -g

初始化 Vue 專案

首先，需要安裝 Vue Cli，以進行專案的生成，這里我已經完成安裝，就不再贅述，(Vue cli 的安裝教程點擊這里)

執行如下命令初始化專案

vue create tldr

等待其完成安裝以后，進入專案，并啟動專案，

cd tldr
yarn serve

隨即，可以在系統瀏覽器中的 localhost:8080 中查看專案

記得引入 git 做版本控制，文章里就不介紹了，沒意思，

安裝 Vue Router

在完成 Vue 專案的初始化以后，接下來需要進行 Vue Router 的配置了，

Vue Router 的配置在引入了 Vue 3 以后，顯得非常的簡單，直接執行如下命令即可

vue add router

執行程序中，會問你是否需要啟用 History Mode，根據需要選取，我使用的是 History Model

設定完成以后，保存并重啟 Vue 的開發服務器，你會在預覽中看到 Router 添加的 Home 和 About

安裝 Vuetifyjs

接下來安裝的是 Vuetify ，由于框架提供了相應的支持，因此在開發時也非常簡單，只需要執行如下命令就可以完成初始化，

vue add vuetify

會問你選擇那種預設，直接使用 Default 即可，

保存并重啟開發服務器，你會看到這樣的界面，則說明配置完成，

部署測驗應用

在進行下一步開發的時候，需要先進行一下專案的部署，從而獲得一個測驗的域名，方便后續的開發，

這里專案的開發我并沒有使用云開發自己的 Web Hosting （因為我們不是按量付費套餐，所以沒有辦法開啟），而是使用了 Now.sh 的，這里就不再過多贅述，

引入云開發 SDK

云開發提供了 Web SDK ，可以通過 npm 安裝，并參考，

執行如下命令來安裝，

yarn add tcb-js-sdk

安裝完成后，在 main.js 中引入 tcb，并通過修改 Vue 的原型來實作掛載 Vue

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';
const tcb = require('tcb-js-sdk') // 新增的引入 TCB

Vue.config.productionTip = false

Vue.prototype['$tcb'] = tcb.init({ // 新增的修改原型
	env: 'prod-2c59c7'         // 新增的修改原型
})                                 // 新增的修改原型

new Vue({
  router,
  vuetify,
  render: h => h(App)
}).$mount('#app')

這樣就可以在應用運行的整個周期中使用 this.$tcb 來呼叫云開發的相關邏輯，