标签：

配景描述

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 # yarn 设置 yarn config set registry -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 来挪用云开发的相关逻辑。

总结

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

配置 npm 镜像，以确保 Node package 的安置速度

使用 vue cli 来初始化项目

安置 Vue Router & Vuetifyjs

部署应用

安置 tcb-js-sdk 以挪用云开发数据

基于云开发开发 Web 应用（一）：项目介绍 & 初始化