从今天开始，我们将在Linux China官方网站和官方帐户上序列化TL; DR Web应用程序开发背后的故事。接下来，看一下gg的开发文章。

“ Linux”小程序是Linux China在2019年2月发布的小程序（恰好是去年的春节）。此小程序采用众包模型，并在著名的TLDR项目Translate中执行Linux命令的示例，并以微信小程序的形式显示。在2020年春节，我们向更多PC用户开放了Web版本的Linux命令查询。 Web版本和小程序版本的数据同步，使您可以在使用台式计算机时执行命令查询。

从今天开始，我们将在Linux China官方网站和官方帐户上序列化TL; DR Web应用程序开发背后的故事。接下来，看一下gg的开发文章。

背景说明

过去一年中，Linux China开发并运行了中文版本的TL; DR客户端。但是，当时的版本是小程序的版本。它仅限于小程序。云开发没有Web SDK，因此无法将应用程序功能迁移到更多平台。就在最近，Cloud Development提供了Web SDK，并且它已经逐渐成熟，因此我们可以借此机会实现基于PC的业务并为更多的人提供服务。

在开发了初步版本之后，我们决定以该项目为例，与大家分享我们的开发经验，每个人都可以参考自己的云应用程序的开发。

项目设计

在开发项目时，首先进行了项目的基本UI设计：

主页

详细信息页面

此处使用了balsamiq的手绘线框来完成产品设计，从而避免了我个人对完美的过度追求以及避免产品上市的延迟（这在历史上曾发生过多次）

技术选择

由于所需的是前端页面，因此在技术选择方面几乎没有异议。使用最熟悉的技术堆栈来完成。

镜像配置

由于您在中国，npm的速度绝对不是很好，因此您需要进行相应的镜像设置以确保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 tldryarn serve

您可以立即在浏览器中访问localhost：8080来查看项目：

预览

请记住要引入git进行版本控制，因此本文中不会介绍。无聊。

安装Vue路由器

完成Vue项目的初始化后，下一步是配置Vue路由器。

引入Vue 3之后，Vue Router的配置非常简单，只需执行以下命令：

vue add router

在执行过程中，系统将询问您是否需要启用历史记录模式。根据需要选择。我正在使用历史记录模式。

完成设置后，保存并重新启动Vue开发服务器，您将在预览中看到路由器添加的“主页”和“关于”。

安装Vuetify.js

下一个安装是Vuetify.js。因为该框架提供了相应的支持，所以在开发过程中非常简单。您只需执行以下命令即可完成初始化。

vue add vuetify

将要求您选择哪个预设，只需使用默认值即可。

保存并重新启动开发服务器，您将看到此界面，表明配置已完成。

部署测试应用程序

在进行下一步开发时，需要首先部署项目以获得测试域名，以方便后续开发。

对于该项目的开发，我没有使用云来开发自己的虚拟主机（因为我们不是按需付费的软件包，因此无法打开它），而是使用Now .sh，因此在此不再赘述。

介绍云开发SDK

Cloud Development提供了Web SDK，可以通过npm安装并引用。

执行以下命令进行安装：

yarn add tcb-js-sdk

安装完成后，将tcb引入main.js中，并修改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')   // 新增的引入 TCBVue.config.productionTip = falseVue.prototype['$tcb'] = tcb.init({ // 新增的修改原型    env: 'prod-2c59c7'             // 新增的修改原型})                                 // 新增的修改原型new Vue({   router,   vuetify,   render: h => h(App) }).$mount('#app')

这样，this。$ tcb可用于在应用程序操作的整个周期中调用与云开发相关的逻辑。

摘要

完成项目初始化后，回头看看，在项目初始化过程中做了什么。

配置npm映像以确保Node软件包的安装速度。使用Vue CLI初始化项目。安装Vue Router和Vuetify.js。部署应用程序。安装tcb-js-sdk调用云开发数据。