体验Linux小程序小程序PC端访问https://tldr.linux.cn/体验背景介绍LinuxChina运行近1年中文版TL;博士。不过我当时做的版本是小程序的版本。长期以来，受小程序和云开发的限制，没有WebSDK，无法将应用能力迁移到更多平台。就在最近，云开发提供了WebSDK，我们可以借此机会实现业务的PC化，服务更多的人。项目设计在开发项目的时候，我首先对项目做了一个基础的UI设计。这里我使用了balsamiq的手绘线框图来完成产品的设计，以免个人过于追求完美，耽误产品的上市。（这种事情历史上发生过很多次）由于技术选型需要前端页面，所以在技术选型方面几乎没有多少异议。使用最熟悉的技术栈来完成。前端框架：VueRouter：VueRouterCSS框架：VuetifyjsmirrorConfiguration因为我们在国内，npm的速度肯定不是很好，所以我们需要做相应的镜像设置，保证npm和yarn在安装依赖。这里使用腾讯云提供的镜像。#npmsetnpmconfigsetregistryhttp://mirrors.cloud.tencent.com/npm/#yarnsetyarnconfigsetregistryhttp://mirrors.cloud.tencent.com/npm/-g初始化Vue项目首先，你需要安装VueCli来生成项目。到这里我已经安装完成，不再赘述。（Vuecli的安装教程点此查看）执行以下命令初始化项目vuecreatetldr等它完成安装，进入项目，启动项目。cdtldryarnserve立即可以在系统浏览器中查看localhost:8080中的项目。记得引入git进行版本控制，本文不再介绍。无聊的。安装VueRouter完成Vue项目的初始化之后，接下来就是配置VueRouter了。引入Vue3后，VueRouter的配置就非常简单了。您可以直接执行以下命令。在执行vueaddrouter的过程中，会询问你是否需要启用HistoryMode。根据您的需要选择。我使用HistoryModel来完成设置以后保存重启Vue开发服务器，你会在预览中看到Router添加的Home和About。安装Vuetifyjs接下来要安装的是Vuetify。由于框架提供了相应的支持，开发起来也非常简单，只需要执行下面的命令即可完成初始化。vueaddvuetify会要求你选择哪个preset，直接使用Default即可。保存并重启开发服务器，就会看到这个界面，那么配置就完成了。部署测试应用在下一步的开发中，需要先部署项目，以便获取测试用的域名，方便后续开发。对于这个项目的开发，我并没有使用云开发自己的WebHosting（因为我们不是按量付费套餐，所以没办法启动），而是使用了Now.sh，这里就不赘述了。介绍云开发SDK云开发提供了WebSDK，可以通过npm安装和引用。执行以下命令进行安装。yarnaddtcb-js-sdk安装完成后，在main.js中引入tcb，修改Vue的原型为mountVueimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'。/router'从'./plugins/vuetify'导入vuetify；consttcb=require('tcb-js-sdk')//newimportTCBVue.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&Vuetifyjs部署应用安装tcb-js-sdk调用云开发数据
