背景描述

Linux 中國(guó)曾在過(guò)去的 1 ～ 2 年內(nèi)長(zhǎng)期運(yùn)行了一個(gè) TL;DR 的中國(guó)版。不過(guò)當(dāng)時(shí)做的版本是小程序的版本,，一直以來(lái),，受限于小程序·云開(kāi)發(fā)沒(méi)有 Web SDK ，因此無(wú)法將應(yīng)用能力遷移到更多的平臺(tái)上,，剛好最近云開(kāi)發(fā)提供了 Web SDK ,，于是便可以借此機(jī)會(huì)，將業(yè)務(wù)實(shí)現(xiàn) PC 化,，服務(wù)更多人群,。

項(xiàng)目設(shè)計(jì)

在進(jìn)行項(xiàng)目開(kāi)發(fā)時(shí)，先對(duì)項(xiàng)目進(jìn)行了基本的 UI 設(shè)計(jì)

這里用到的是 balsamiq 的手繪線框圖來(lái)完成產(chǎn)品設(shè)計(jì),，以避免我個(gè)人過(guò)度追求完美,，而讓產(chǎn)品延期遲遲不能上線的問(wèn)題（這樣的事情在歷史上發(fā)生了非常多次）

技術(shù)選項(xiàng)

由于需要的是一個(gè)前端頁(yè)面，因此,，在技術(shù)選型方面,，幾乎沒(méi)有太多的異議。使用最為熟悉的技術(shù)棧來(lái)完成,。

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

mirror 配置

因?yàn)樯硖巼?guó)內(nèi),， npm 的速度必然不太好,，因此需要進(jìn)行相應(yīng)的 mirror 設(shè)定，確保 npm 和 yarn 在安裝依賴,。這里使用的是騰訊云提供的鏡像,。

# Npm 設(shè)置
npm config set registry http://mirrors.cloud.tencent.com/npm/

# yarn 設(shè)置
yarn  config set registry http://mirrors.cloud.tencent.com/npm/ -g

初始化 Vue 項(xiàng)目

首先，需要安裝 Vue Cli,，以進(jìn)行項(xiàng)目的生成,，這里我已經(jīng)完成安裝，就不再贅述,。(Vue cli 的安裝教程點(diǎn)擊這里)

執(zhí)行如下命令初始化項(xiàng)目

vue create tldr

等待其完成安裝以后,，進(jìn)入項(xiàng)目，并啟動(dòng)項(xiàng)目,。

cd tldr
yarn serve

隨即,，可以在系統(tǒng)瀏覽器中的 localhost:8080 中查看項(xiàng)目

記得引入 git 做版本控制，文章里就不介紹了,。沒(méi)意思,。

安裝 Vue Router

在完成 Vue 項(xiàng)目的初始化以后，接下來(lái)需要進(jìn)行 Vue Router 的配置了,。

Vue Router 的配置在引入了 Vue 3 以后,，顯得非常的簡(jiǎn)單，直接執(zhí)行如下命令即可

vue add router

執(zhí)行過(guò)程中,，會(huì)問(wèn)你是否需要啟用 History Mode,，根據(jù)需要選取，我使用的是 History Model

設(shè)置完成以后,，保存并重啟 Vue 的開(kāi)發(fā)服務(wù)器,，你會(huì)在預(yù)覽中看到 Router 添加的 Home 和 About

安裝 Vuetifyjs

接下來(lái)安裝的是 Vuetify ，由于框架提供了相應(yīng)的支持,，因此在開(kāi)發(fā)時(shí)也非常簡(jiǎn)單,，只需要執(zhí)行如下命令就可以完成初始化。

vue add vuetify

會(huì)問(wèn)你選擇那種預(yù)設(shè),，直接使用 Default 即可,。

保存并重啟開(kāi)發(fā)服務(wù)器，你會(huì)看到這樣的界面,，則說(shuō)明配置完成,。

部署測(cè)試應(yīng)用

在進(jìn)行下一步開(kāi)發(fā)的時(shí)候，需要先進(jìn)行一下項(xiàng)目的部署,，從而獲得一個(gè)測(cè)試的域名,，方便后續(xù)的開(kāi)發(fā)。

這里項(xiàng)目的開(kāi)發(fā)我并沒(méi)有使用云開(kāi)發(fā)自己的 Web Hosting （因?yàn)槲覀儾皇前戳扛顿M(fèi)套餐，所以沒(méi)有辦法開(kāi)啟）,，而是使用了 Now.sh 的,，這里就不再過(guò)多贅述。

引入云開(kāi)發(fā) SDK

云開(kāi)發(fā)提供了 Web SDK ,，可以通過(guò) npm 安裝,，并引用。

執(zhí)行如下命令來(lái)安裝,。

yarn add tcb-js-sdk

安裝完成后,，在 main.js 中引入 tcb，并通過(guò)修改 Vue 的原型來(lái)實(shí)現(xiàn)掛載 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')

這樣就可以在應(yīng)用運(yùn)行的整個(gè)周期中使用 this.$tcb 來(lái)調(diào)用云開(kāi)發(fā)的相關(guān)邏輯,。

總結(jié)

在完成了項(xiàng)目的初始化以后,，回過(guò)頭來(lái)看一看這在初始化項(xiàng)目過(guò)程中，都做了哪些事情,。

1. 配置 npm 鏡像,，以確保 Node package 的安裝速度
2. 使用 vue cli 來(lái)初始化項(xiàng)目
3. 安裝 Vue Router & Vuetifyjs
4. 部署應(yīng)用
5. 安裝 tcb-js-sdk 以調(diào)用云開(kāi)發(fā)數(shù)據(jù)

項(xiàng)目開(kāi)源地址：https://github.com/LCTT/tldr.linux.cn/