基于云開發(fā)開發(fā) Web 應(yīng)用（一）：項目介紹 & 初始化

路人甲Java 2020-08-09

展開全文

背景描述

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

項目設(shè)計

在進行項目開發(fā)時，先對項目進行了基本的 UI 設(shè)計

詳情頁

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

技術(shù)選項

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

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

mirror 配置

因為身處國內(nèi)， npm 的速度必然不太好，因此需要進行相應(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 項目

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

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

vue create tldr

等待其完成安裝以后，進入項目，并啟動項目。

cd tldr
yarn serve

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

預(yù)覽

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

安裝 Vue Router

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

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

vue add router

執(zhí)行過程中，會問你是否需要啟用 History Mode，根據(jù)需要選取，我使用的是 History Model

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

安裝 Vuetifyjs

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

vue add vuetify

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

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

部署測試應(yīng)用

在進行下一步開發(fā)的時候，需要先進行一下項目的部署，從而獲得一個測試的域名，方便后續(xù)的開發(fā)。

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

引入云開發(fā) SDK

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

執(zhí)行如下命令來安裝。

yarn add tcb-js-sdk

安裝完成后，在 main.js 中引入 tcb，并通過修改 Vue 的原型來實現(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)用運行的整個周期中使用 this.$tcb 來調(diào)用云開發(fā)的相關(guān)邏輯。