Experience Linux applets

The small program end

PC

Visit tldr.linux.cn/ Experience

Background description

Linux China has run a TL in the past year; Chinese version of DR. However, the version we did at that time was the version of small program. Limited by small program · Cloud development without Web SDK, we could not transfer the application ability to more platforms. Just recently, cloud development provided Web SDK, so we could take this opportunity to realize PC business and serve more people.

The project design

At the time of project development, the basic UI design of the project was carried out first

Balsamiq’s hand-drawn wireframes are used to complete the product design, in order to avoid the problem of my over-pursuit of perfection, which leads to the delayed launch of the product (which has happened many times in history).

Technical options

Since a front-end page is required, there are few objections to the technology selection. Do this using the most familiar technology stack.

  • Front-end framework: Vue
  • Router: Vue Router
  • CSS framework: Vuetifyjs

Mirror configuration

In China, the speed of NPM is not good. Therefore, you need to set the mirror to ensure that the dependency of NPM and YARN is installed. The image provided by Tencent Cloud is used here.

# Npm set
npm config set registry http://mirrors.cloud.tencent.com/npm/

# set yarn
yarn  config set registry http://mirrors.cloud.tencent.com/npm/ -g
Copy the code

Initialize the Vue project

First, you need to install the Vue Cli for project generation, which I’ve already done and won’t go over here. (Vue CLI installation tutorial click here)

Run the following command to initialize the project

vue create tldr
Copy the code

After the installation is complete, enter the project and start the project.

cd tldr
yarn serve
Copy the code

The project can then be viewed in localhost:8080 in the system browser

Remember to introduce Git for version control, which will not be covered in this article. Is very interesting.

Install the Vue Router

After completing the initialization of the Vue project, it is time to configure the Vue Router.

After Vue 3 is introduced, the configuration of Vue Router is very simple. You can run the following command

vue add router
Copy the code

During the execution, you will be asked if you want to enable the History Mode. I used the History Model as required

After setting up, save and restart the Vue development server and you will see Home and About added to the Router in the preview

Install Vuetifyjs

Next up is Vuetify, which is easy to develop because of the support provided by the framework. You only need to execute the following command to initialize.

vue add vuetify
Copy the code

You will be asked which Default to choose. Use Default.

Save and restart the development server. If you see something like this, the configuration is complete.

Deploying the test application

In the next stage of development, the deployment of the project needs to be carried out first, so as to obtain a test domain name for the convenience of subsequent development.

For the development of the project here, I did not use the cloud to develop my own Web Hosting (because we did not pay by the amount package, so I could not open it), but used now. sh, so I will not repeat too much here.

Introduce the cloud development SDK

Cloud development provides a Web SDK that can be installed through NPM and referenced.

Run the following command to install it.

yarn add tcb-js-sdk
Copy the code

After the installation is complete, TCB is introduced in main.js and the Vue is mounted by modifying the Vue prototype

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';
const tcb = require('tcb-js-sdk') // Add TCB

Vue.config.productionTip = false

Vue.prototype['$tcb'] = tcb.init({ // New modified prototype
	env: 'prod-2c59c7'         // New modified prototype
})                                 // New modified prototype

new Vue({
  router,
  vuetify,
  render: h= > h(App)
}).$mount('#app')
Copy the code

This allows you to use this.$TCB to invoke cloud development logic throughout the application lifecycle.

conclusion

After completing the initialization of the project, take a look back at what was done during the initialization of the project.

  1. Configure the NPM image to ensure the speed of Node Package installation
  2. Use the Vue CLI to initialize the project
  3. Install Vue Router & Vuetifyjs
  4. The deployment of application
  5. Install tcB-JS-SDK to invoke cloud development data