基於雲開發開發 Web 應用（一）：項目介紹 & 初始化

體驗 Linux 小程序

小程序端

PC 端

訪問 https://tldr.linux.cn/ 體驗

背景描述

Linux 中國曾在過去的 1 年內運行了一個 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 來調用雲開發的相關邏輯。

總結

在完成了項目的初始化之後，回過頭來看一看這在初始化項目過程當中，都作了哪些事情。

1. 配置 npm 鏡像，以確保 Node package 的安裝速度
2. 使用 vue cli 來初始化項目
3. 安裝 Vue Router & Vuetifyjs
4. 部署應用
5. 安裝 tcb-js-sdk 以調用雲開發數據