“Linux”小程序是Linux中国于2019年2月（正好是去年春节）发布的一款小程序，采用众包模式，翻译了Linux著名的TLDR项目中的命令示例，并以微信小程序的形式呈现。2020年春节，我们面向更多PC端用户开放了网页版Linux命令查询。网页版与小程序版数据同步，让您在使用台式机的同时进行命令查询。从今天开始，我们将在Linux中国官网和公众号连载TL;DRweb应用开发背后的故事。接下来看这篇来自开发gg的文章。背景说明LinuxChina在过去的一年里开发并运营了中文版的TL;DR客户端。不过当时做的版本是小程序的版本。长期以来，受限于小程序云开发没有WebSDK，无法将应用能力迁移到更多平台。就在最近，云开发提供了WebSDK，也逐渐成熟起来，我们可以借此机会实现PC端的业务，服务更多的人。在开发了一个初步版本后，我们决定以这个项目为例，把我们的开发经验分享给大家，大家可以参考开发自己的云应用。项目设计在开发项目的时候，我首先对项目做了一个基础的UI设计：首页详情页使用balsamiq的手绘线框图来完成产品设计，避免个人过度追求完美而耽误产品的问题不能上线的问题（历史上这样的事情发生过多次）因为技术选型需要前端页面，所以在技术选型上几乎没有多少异议。使用最熟悉的技术栈来完成。前端框架：VueRouter：VueRouterCSS框架：Vuetify.js镜像配置由于我们在国内，npm的速度肯定不是很好，所以需要做相应的镜像设置，保证npm和yarn在安装依赖项。这里使用腾讯云提供的镜像。#npmsetnpmconfigsetregistryhttp://mirrors.cloud.tencent.com/npm/#yarnsetyarnconfigsetregistryhttp://mirrors.cloud.tencent.com/npm/-g初始化Vue项目首先，你需要安装VueCLI来生成项目。我这里已经安装完成，这里不再赘述。（VueCLI安装教程点此查看）执行以下命令初始化项目：vuecreatetldr等待安装完成，进入项目，启动项目。cdtldryarnserve马上，可以在浏览器访问localhost:8080查看项目：Preview，记得引入git进行版本控制，本文不再介绍。无聊的。安装VueRouter完成Vue项目的初始化之后，接下来就是配置VueRouter了。引入Vue3后，VueRouter的配置非常简单，直接执行如下命令即可：vueaddrouter执行过程中，会询问是否需要开启HistoryMode，根据需要选择，我使用历史模式。设置完成后，保存并重启Vue开发服务器，在预览中会看到Router添加的“Home”和“About”。安装Vuetify.js接下来要安装的是Vuetify.js。由于框架提供了相应的支持，开发起来也非常简单。您只需要执行以下命令即可完成初始化。vueaddvuetify会要求你选择哪个preset，直接使用Default即可。保存并重启开发服务器，就会看到这个界面，那么配置就完成了。部署测试应用在下一步的开发中，需要先部署项目，以便获取测试用的域名，方便后续开发。对于这个项目的开发，我并没有使用云开发自己的虚拟主机（因为我们不是按量付费的套餐，所以没办法打开），而是使用了Now.sh，这里就不赘述了。介绍云开发SDK云开发提供了WebSDK，可以通过npm安装和引用。执行以下命令安装：yarnaddtcb-js-sdk安装完成后，将tcb导入main.js，修改Vue的原型，挂载Vue。从'vue'导入Vue从'./App.vue'导入应用程序从'./router'导入路由器从'./plugins/vuetify'导入vuetify；consttcb=require('tcb-js-sdk')//新引入TCBVue.config.productionTip=falseVue.prototype['$tcb']=tcb.init({//新修改原型env:'prod-2c59c7'//新修改原型})//新修改原型newVue({router,vuetify,render:h=>h(App)}).$mount('#app')这样this.$tcb就可以一直使用了整个应用周期调用云开发的相关逻辑。小结在完成了项目的初始化之后，回头看看在初始化项目的过程中都做了些什么。配置npm镜像保证Node包安装速度使用VueCLI初始化项目安装VueRouter&Vuetify.js部署应用安装tcb-js-sdk调用云开发数据敬请期待本系列下一篇关于接口开发。
