跟我学 “Linux” 小程序 Web 版开发(一):初始化
Linux 小程序是 Linux 中国在 2019 年 2 月(恰恰是去年春节)发布的小程序,该小程序采用众包模式,对著名的 TLDR 项目中的 Linux 命令示例进行了翻译,并通过微信小程序的形式展现。在 2020 年的春节,我们面向更多的 PC 端用户,开放了 Web 版的 Linux 命令查询。Web 版和小程序版数据同步,让你在使用桌面计算机时也可以进行命令查询。
从今天起,我们将在 Linux 中国官网和公众号上,连载 TL;DR Web 应用开发背后的故事。接下来,请看来自开发 gg 的文章。
Linux 中国曾在过去的一年开发和运行了一个中国版 TL;DR 客户端。不过当时做的版本是小程序的版本,一直以来,受限于小程序 云开发没有 Web SDK ,因此无法将应用能力迁移到更多的平台上。刚好最近云开发提供了 Web SDK,并已经逐步成熟,于是我们便可以借此机会,将业务实现 PC 化,服务更多人群。
在开发出初步的版本之后,我们决定以这个项目作为范例,将我们开发经验分享给大家,大家可以参考开发自己的云应用。
在进行项目开发时,先对项目进行了基本的 UI 设计:
这里用到的是 balsamiq 的手绘线框图来完成产品设计,以避免我个人过度追求完美,而让产品延期迟迟不能上线的问题(这样的事情在历史上发生了非常多次)
由于需要的是一个前端页面,因此,在技术选型方面,几乎没有太多的异议。使用最为熟悉的技术栈来完成。
前端框架:Vue 路由器:Vue Router CSS 框架:Vuetify.js因为身处国内, 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 tldr yarn serve
随即,可以在浏览器中访问 localhost:8080 查看项目:
记得引入 git 做版本控制,文章里就不介绍了。没意思。
安装 Vue Router在完成 Vue 项目的初始化以后,接下来需要进行 Vue Router 的配置了。
Vue Router 的配置在引入了 Vue 3 以后,显得非常的简单,直接执行如下命令即可:
vue add router
执行过程中,会问你是否需要启用 History Mode,根据需要选取,我使用的是 History Mode。
设置完成以后,保存并重启 Vue 的开发服务器,你会在预览中看到 Router 添加的 Home 和 About 。
安装 Vuetify.js接下来安装的是 Vuetify.js ,由于框架提供了相应的支持,因此在开发时也非常简单,只需要执行如下命令就可以完成初始化。
vue add vuetify
会问你选择那种预设,直接使用 Default 即可。
保存并重启开发服务器,你会看到这样的界面,则说明配置完成。
部署测试应用在进行下一步开发的时候,需要先进行一下项目的部署,从而获得一个测试的域名,方便后续的开发。
这里项目的开发我并没有使用云开发自己的 Web 托管 (因为我们不是按量付费套餐,所以没有办法开启),而是使用了 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 来调用云开发的相关逻辑。
在完成了项目的初始化以后,回过头来看一看这在初始化项目过程中,都做了哪些事情。
配置 npm 镜像,以确保 Node 包的安装速度 使用 Vue CLI 来初始化项目 安装 Vue Router Vuetify.js 安装 tcb-js-sdk 以调用云开发数据请期待本系列的下一篇关于界面开发的文章。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/48922.html
linux相关文章
- Linux:开拓中央大陆(linux居中)
- 使用Win10在电脑上安装Linux双系统(win10装linux双系统)
- Linux变量的宝藏:挖掘你的程序隐藏的秘密(linux变量)
- 在Linux中完成程序配置文件管理(linux程序配置文件)
- Linux下命令行启动程序指南(linux启动软件命令行)
- Linux中常见进程管理命令使用指南(linux进程相关命令)
- 深入浅出:掌握Linux系统操作技巧(linux搜狗)
- Linux下快速运行Jar程序的方法(linux运行jar程序)
- 文件Linux下查找并删除文件的方法(linux查找后删除)
- 程序Linux 平台设备驱动开发实践(linux平台设备驱动)
- 使用SSH操作Linux服务器:必备技能(ssh操作linux)
- Linux下安全使用U盘的方法(linux下使用u盘)
- 如何在Linux中编写c语言程序(linux怎么编辑c语言)
- 挖矿Linux系统下比特币挖矿新技术(linux比特币)
- 极速部署:借助Linux服务器快速运行程序(linux服务器运行程序)
- 利用 Linux 与 C 语言编程处理中断(linux中断c语言)
- Linux安装LZMA压缩程序的指南(linux安装lzma)
- 从零开始:Linux下的Web开发之旅(linux下的web开发)
- 探索Linux世界:如何在Linux下高效编写程序?(linux下写程序)
- 轻松保护您的Linux系统:体验360安全卫士的Linux版(linux版360)
- Linux系统下安装Win7:唤醒双系统兼容之夜(linux系统下安装win7)
- 服务快速部署Linux服务器,轻松架设Web服务(linux部署web)
- 监控 Linux 系统内存情况的方法(linux内存监控)
- 程序管理Linux 自启动程序的正确方式(查看linux自启动)
- 程序构建Linux服务器:运行JSP程序的必要步骤(linux服务器jsp)
- Linux开放防火墙端口实现网络连接(linux打开防火墙端口)
- 开启Linux世界之旅:了解系统信息(linux系统信息)
- Linux新版本发布,让你的Web项目发布更简单!(linux发布web项目)
- Linux显卡驱动:优化系统性能的几步之一(linux下的显卡驱动)
- 工作必备:功能强大的适用于职场的Linux操作系统(适合工作的linux)
- Linux拥有安全的默认端口(linux 默认端口)
- Linux的行业发展趋势:持续稳健的增长(linux的发展趋势)
- Linux教材:由入门到精通(linux教材)
- Linux下开启程序的新模式(linux打开程序)