正文
基于云开发开发 Web 应用（一）：项目介绍 & 初始化
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
背景描述
Linux 中国曾在过去的 1 ～ 2 年内长期运行了一个 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') // 新增的引入 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 package 的安装速度
- 使用 vue cli 来初始化项目
- 安装 Vue Router & Vuetifyjs
- 部署应用
- 安装 tcb-js-sdk 以调用云开发数据
项目开源地址：https://github.com/LCTT/tldr.linux.cn/
基于云开发开发 Web 应用（一）：项目介绍 & 初始化的更多相关文章- 火鸡堂 对 基于云的胜利冲锋队 为了交项目干杯 的 Beta 产品测试报告
基于云的胜利冲锋队 第一次上手 第一次上手体验感觉如何?能否正常运行? 不错,学生端和老师端各功能很清晰,大部分功能正常运行,但添加班级之类的部分功能页面暂时无响应 看到千帆竞发图泪流满面,图表中有各 ...
- 开发Java web应用程序的介绍
本文将介绍使用Eclipse来开发web应用程序的基础知识.它演示了如何创建一个简单的web应用程序,将其部署到服务器,查看其呈现在浏览器中.应用程序使用JavaServer Pages™(JSP)页 ...
- [springboot 开发单体web shop] 1. 前言介绍和环境搭建
前言介绍和环境搭建 简述 springboot 本身是为了做服务化用的,我们为什么要反其道使用它来开发一份单体web应用呢? 在我们现实的开发工作中,还有大量的业务系统使用的是单体应用,特别是对于中小 ...
- 构建基于Javascript的移动web CMS入门——简单介绍
看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 ...
- 基于云原生DevOps服务自动化部署前端项目学习总结
本文主要以部署前端Vue项目为例,讲述了如何基于云原生DevOps服务自动化部署前端项目~从开发完成到线上环境,我们只需提交代码即可~ 一.引言 作为一名开发人员,日常工作中我们除了需要负责代码的开发 ...
- 基于Servlet+jsp的web计算器
基于Servlet+jsp的web计算器 这次老大为了让我们自己复习web中页面的跳转给布置得任务 天下代码一大抄,关键看你怎么抄 首先我想到的计算算法不是什么堆栈,是简单的(其实很复杂,但是我就只需 ...
- 构建基于Javascript的移动web CMS——Hello,World
在一篇构建基于Javascript的移动web CMS入门--简单介绍中简单的介绍了关于墨颀CMS的一些原理,其极框架组成.于是開始接着应该说明一下这个CMS是怎样一步步搭建起来. RequireJS ...
- 基于云开发开发 Web 应用（三）：云开发相关数据调用
介绍 在完成了 UI 界面的实现后,接下来可以开始进行和云开发相关的数据对接.完成数据对接后,应用基础就打好了,接下来的就是发布上线以及一些小的 feature 的加入. 配置 在进行相关的配置调用的 ...
- 如何在华为云软件开发云上搭建JavaWeb,Maven项目
本文将使用华为云软件开发云向大家演示如何搭建JavaWeb,Maven项目. 一．相关信息 1.华为云软件开发云简介 华为云软件开发云(DevCloud)是集华为近30年研发实践,前沿研发理念,先进研 ...
随机推荐- GCD的同步异步串行并行、NSOperation和NSOperationQueue一级用dispatch_once实现单例
转:http://www.tuicool.com/articles/NVVnMn (1)GCD实现的同步异步.串行并行. ——同步sync应用场景:用户登录,利用阻塞 ——串行异步应用场景:下载等耗时 ...
- 渐变颜色的进度条WGradientProgress－备用
今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移动的, ...
- SIEM思考
https://securosis.com/blog/comments/understanding-and-selecting-siem-log-management-introduction/ ht ...
- UVA 11426 - GCD - Extreme (II) (数论)
UVA 11426 - GCD - Extreme (II) 题目链接 题意:给定N.求∑i<=ni=1∑j<nj=1gcd(i,j)的值. 思路:lrj白书上的例题,设f(n) = gc ...
- 开源 免费 java CMS - FreeCMS1.4-功能说明-站点管理
下载地址:http://code.google.com/p/freecms/ 站点管理 FreeCMS支持网站群模式,并支持无限树级管理. 1. 添加一级站点 从左侧管理菜单点击站点管理进入. 提示 ...
- 前端开发chrome console的使用 ：评估表达式 – Break易站
本文内容来自:chrome console的使用 :评估表达式 – Break易站 从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态. DevTools 控制台让您可通过特定方 ...
- 基于后端云的Android注册登录开发
APP开发离不开注册登录功能,但是注册登录功能开发需要后台数据库的支持,对于一些初学者或者对后台数据 不熟悉的同学来说可能会有些困难.本文介绍一下后端云: 1. Bmob是国内起步较早的云后端服务平台 ...
- android 开发 使用自定义布局实现标题栏复用（标题栏内容自定义：使用代码实现和xml布局自定义属性2种办法实现）
在个人学习的情况下可能很少使用自定义布局去实现大量复用的情况下,但是在一个开发工作的环境下就会使用到大量复用的自定义控件. 实现思维: 1.写一个xml的布局,用于标题栏的样式,并且添加在标题栏中你想 ...
- Alpha冲刺 - (10/10)
Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 本人负责的模块(共享编辑)的前端代码 ...
- 日常使用Shell积累
HDFS统计文件行数: hdfs dfs -cat hdfs://ns3/wordcount/* |wc -l
基于云的胜利冲锋队 第一次上手 第一次上手体验感觉如何?能否正常运行? 不错,学生端和老师端各功能很清晰,大部分功能正常运行,但添加班级之类的部分功能页面暂时无响应 看到千帆竞发图泪流满面,图表中有各 ...
本文将介绍使用Eclipse来开发web应用程序的基础知识.它演示了如何创建一个简单的web应用程序,将其部署到服务器,查看其呈现在浏览器中.应用程序使用JavaServer Pages™(JSP)页 ...
前言介绍和环境搭建 简述 springboot 本身是为了做服务化用的,我们为什么要反其道使用它来开发一份单体web应用呢? 在我们现实的开发工作中,还有大量的业务系统使用的是单体应用,特别是对于中小 ...
看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 ...
本文主要以部署前端Vue项目为例,讲述了如何基于云原生DevOps服务自动化部署前端项目~从开发完成到线上环境,我们只需提交代码即可~ 一.引言 作为一名开发人员,日常工作中我们除了需要负责代码的开发 ...
基于Servlet+jsp的web计算器 这次老大为了让我们自己复习web中页面的跳转给布置得任务 天下代码一大抄,关键看你怎么抄 首先我想到的计算算法不是什么堆栈,是简单的(其实很复杂,但是我就只需 ...
在一篇构建基于Javascript的移动web CMS入门--简单介绍中简单的介绍了关于墨颀CMS的一些原理,其极框架组成.于是開始接着应该说明一下这个CMS是怎样一步步搭建起来. RequireJS ...
介绍 在完成了 UI 界面的实现后,接下来可以开始进行和云开发相关的数据对接.完成数据对接后,应用基础就打好了,接下来的就是发布上线以及一些小的 feature 的加入. 配置 在进行相关的配置调用的 ...
本文将使用华为云软件开发云向大家演示如何搭建JavaWeb,Maven项目. 一．相关信息 1.华为云软件开发云简介 华为云软件开发云(DevCloud)是集华为近30年研发实践,前沿研发理念,先进研 ...
- GCD的同步异步串行并行、NSOperation和NSOperationQueue一级用dispatch_once实现单例
转:http://www.tuicool.com/articles/NVVnMn (1)GCD实现的同步异步.串行并行. ——同步sync应用场景:用户登录,利用阻塞 ——串行异步应用场景:下载等耗时 ...
- 渐变颜色的进度条WGradientProgress－备用
今天我们来实现一个iOS平台上的进度条(progress bar or progress view).这种进度条比APPLE自带的更加漂亮,更加有“B格”.它拥有渐变的颜色,而且这种颜色是动态移动的, ...
- SIEM思考
https://securosis.com/blog/comments/understanding-and-selecting-siem-log-management-introduction/ ht ...
- UVA 11426 - GCD - Extreme (II) (数论)
UVA 11426 - GCD - Extreme (II) 题目链接 题意:给定N.求∑i<=ni=1∑j<nj=1gcd(i,j)的值. 思路:lrj白书上的例题,设f(n) = gc ...
- 开源 免费 java CMS - FreeCMS1.4-功能说明-站点管理
下载地址:http://code.google.com/p/freecms/ 站点管理 FreeCMS支持网站群模式,并支持无限树级管理. 1. 添加一级站点 从左侧管理菜单点击站点管理进入. 提示 ...
- 前端开发chrome console的使用 ：评估表达式 – Break易站
本文内容来自:chrome console的使用 :评估表达式 – Break易站 从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态. DevTools 控制台让您可通过特定方 ...
- 基于后端云的Android注册登录开发
APP开发离不开注册登录功能,但是注册登录功能开发需要后台数据库的支持,对于一些初学者或者对后台数据 不熟悉的同学来说可能会有些困难.本文介绍一下后端云: 1. Bmob是国内起步较早的云后端服务平台 ...
- android 开发 使用自定义布局实现标题栏复用（标题栏内容自定义：使用代码实现和xml布局自定义属性2种办法实现）
在个人学习的情况下可能很少使用自定义布局去实现大量复用的情况下,但是在一个开发工作的环境下就会使用到大量复用的自定义控件. 实现思维: 1.写一个xml的布局,用于标题栏的样式,并且添加在标题栏中你想 ...
- Alpha冲刺 - (10/10)
Part.1 开篇 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Part.2 成员汇报 组员1(组长)柯奇豪 过去两天完成了哪些任务 本人负责的模块(共享编辑)的前端代码 ...
- 日常使用Shell积累
HDFS统计文件行数: hdfs dfs -cat hdfs://ns3/wordcount/* |wc -l
