首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于云开发开发 Web 应用(一):项目介绍 & 初始化

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

原创
作者头像
白宦成
修改2020-02-06 20:26:23
1.6K0
修改2020-02-06 20:26:23
举报

背景描述

Linux 中国曾在过去的 1 年内运行了一个 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 以调用云开发数据

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 背景描述
  • 项目设计
  • 技术选项
  • mirror 配置
  • 初始化 Vue 项目
  • 安装 Vue Router
  • 安装 Vuetifyjs
  • 部署测试应用
  • 引入云开发 SDK
  • 总结
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档