基于云开发开发 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') // 新增的引入 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 来调用云开发的相关逻辑。

总结

在完成了项目的初始化以后,回过头来看一看这在初始化项目过程中,都做了哪些事情。

  1. 配置 npm 镜像,以确保 Node package 的安装速度
  2. 使用 vue cli 来初始化项目
  3. 安装 Vue Router & Vuetifyjs
  4. 部署应用
  5. 安装 tcb-js-sdk 以调用云开发数据

原文地址:https://www.cnblogs.com/cloudkit/p/12248621.html

时间: 2024-10-05 04:48:14

基于云开发开发 Web 应用(一):项目介绍 & 初始化的相关文章

火鸡堂 对 基于云的胜利冲锋队 为了交项目干杯 的 Beta 产品测试报告

基于云的胜利冲锋队 这个团队到目前为止还没有给我提供一个能用的版本,坐等. 为了交项目干杯 第一次上手 第一次上手首先注意到的问题是应用似乎对全面屏(18:9)的兼容性不佳,在手动设置了全面屏显示后展示正常. 应用界面给我的感觉是一种比较小清新的风格,各界面之间的切换也很流畅. 但是当我注册登录的时候就比较蛋疼了,注册了半天结果总是没注册上,获得的用户名总是 NULL,后面只得叫那个团队的开发人员在后台给我搞了一个账号. 登录进去,发布任务,然后获得了一个余额不足的充值提示--囧 "充值&quo

[springboot 开发单体web shop] 1. 前言介绍和环境搭建

前言介绍和环境搭建 简述 springboot 本身是为了做服务化用的,我们为什么要反其道使用它来开发一份单体web应用呢? 在我们现实的开发工作中,还有大量的业务系统使用的是单体应用,特别是对于中小型团队来说,在项目开发之初选择服务化开发是得不偿失的,因为对于此类团队,势必所有的工作都是需要我们开发人员来做的,例如: 技术选型 业务需求分析 业务需求设计 大量的测试 运行部署 运营健康监控 ... 小团队或小公司如果开发人员把大规模的精力放在除业务之外的工作中,那么我们的开发效率势必会特别低下

构建基于Javascript的移动web CMS入门——简单介绍

看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 尝试过用AngularJS和EmberJS.发现对于使用AngluarJS以及EmberJS来说,基本的问题是要使用自己熟悉的东西没那么easy引入.并且考虑到谷歌向来对自己的项目的支持不是非常好~~,所以便放弃了AngluarJS的想法. 于是開始寻找一些方案,可是最后还是选择了一个比較通用的方案

基于Servlet+jsp的web计算器

基于Servlet+jsp的web计算器 这次老大为了让我们自己复习web中页面的跳转给不值得任务 天下代码一大抄,关键看你怎么抄 首先我想到的计算算法不是什么堆栈,是简单的(其实很复杂,但是我就只需要知道有这个东西,东西别人做好了...传说中的CV大法好?Emmm,当你知道有这么个算法但是不会自己写可是自己会用的时候,也就相当于...自己会了.....) 废话不多说一下是收集的正则工具类,支持括号运算 package pers.cal.util; import java.util.regex.

如何在华为云软件开发云上搭建JavaWeb,Maven项目

本文将使用华为云软件开发云向大家演示如何搭建JavaWeb,Maven项目. 一.相关信息 1.华为云软件开发云简介 华为云软件开发云(DevCloud)是集华为近30年研发实践,前沿研发理念,先进研发工具为一体的一站式云端DevOps平台,面向开发者提供包括项目管理,代码托管,流水线,代码检查,编译构建,测试管理,移动应用测试,部署,发布,CloudIDE,研发协同等基础功能的研发工具服务.覆盖软件开发全生命周期,支持多种主流研发场景,让软件开发更高效. 官网入口:https://www.hu

如何快速高效地开发和调试基于gradle管理的web应用

本文探讨如何高效快速地开发和调试基于gradle管理的web应用. gradle是新一代应用构建.版本发布管理工具,功能强大而灵活,号称将取代maven的霸主地位,但是目前在开发和调试web应用程序方面还有很多不足,效率低下. 那么我们能不能基于gradle强大而灵活的功能,探寻出一种简单.高效.便捷的方法,以便在调试web应用过程中修改程序无需重启应用服务器和应用呢?答案是肯定的,接下来就给大家分享bboss开发团队在使用gradle开发调试web应用所使用的行之有效的工具和方法. 工具和方法

Spring boot 基于Spring MVC的Web应用和REST服务开发

Spring Boot利用JavaConfig配置模式以及"约定优于配置"理念,极大简化了基于Spring MVC的Web应用和REST服务开发. Servlet: 1 package org.windwant.spring.servlet; 2 3 import javax.servlet.Servlet; 4 import javax.servlet.ServletConfig; 5 import javax.servlet.ServletException; 6 import j

基于Spring MVC的Web应用开发(三) - Resources

基于Spring MVC的Web应用开发(3) - Resources 上一篇介绍了在基于Spring MVC的Web项目中加入日志,本文介绍Spring MVC如何处理资源文件. 注意到本项目的web.xml配置的DispatcherServlet对应的url-pattern为"/",即所有的URL请求都会经过 Spring MVC的处理.实际的Web项目有大量的资源文件,如javascript文件,css文件,png,jpg等图片文件,甚至是Flash等等,我们没有 必要对这些静态

一个基于SSM框架开发的高并发电商秒杀Web系统

0 前言 一个基于SSM框架的高并发秒杀系统采用IDEA+Maven+SSM+Mysql+Redis+Jetty.Bootstrap/Jquery开发. 通过这个小项目,理清了基于SSM框架开发Web应用的流程以及常见的避坑方法,并在最后简单采用了Redis缓存以及Mysql Procedure对项目进行了高并发优化. 接下来从DAO层.Service层.Web层开发以及高并发优化4个方面梳理整个项目开发过程. 源码地址https://github.com/Allegr0/seckill 项目准