0 goals

Use uniApp + TypeScript as the base stack for applets development

  • Uniapp is a framework for developing all front-end applications using vue.js. Developers write a set of code, which can be published to iOS, Android, H5, and various small programs (wechat/Alipay/Baidu/Toutiao /QQ/ Dingding/Taobao), kuaiapp and other platforms.

  • Later excerpts from the TypeScript website

TypeScript is an open-source language which builds on JavaScript, one of the world’s most used tools, by adding static type definitions. ** This JavaScript is clean, simple code which runs anywhere JavaScript runs: In a browser, on Node.JS or in your apps.

1 Environment Preparation

  • The Node environment needs to be installed
  • A Git environment needs to be installed
  • Development tools: wechat developer tools

2. Construction Project

  • Global installationvue-cli
$ npm install -g @vue/cli
Copy the code
  • createuniapp
# my-project is the project directory name
$ vue create -p dcloudio/uni-preset-vue my-project
Copy the code
  • Select a template

As shown in figure, selectDefault templates (TypeScript)

  • The schematic diagram is as follows

3 Running Projects

  • Switch to the project root directory
$ cd my-project
Copy the code
  • Run the project into wechat applet
$ npm run dev:mp-weixin
Copy the code
  • After running the compilation, isdist/dev/mp-weixindirectory
  • Use wechat developer tools to import the directory can be developed and run

4 Import the UI library

  • So what we’re going to introduce here is uView-UI

4.1 Installation Dependencies

$ npm install uview-ui -S
Copy the code

4.2 introduced

  • main.ts
// main.ts
import uView from "uview-ui";
Vue.use(uView);
Copy the code
  • inmain.tsThe introduction ofuview-ui, ts reports an error. You need to be in thesfc.d.tsAdd configuration to file to declare the module.
// sfc.d.ts
declare module 'uview-ui';
Copy the code
  • uni.scss
// uni.scss
@import 'uview-ui/theme.scss';
Copy the code
  • APP.vue
<style lang="scss">
	/* Make sure to write it on the first line and add the lang=" SCSS "attribute */ to the style tag
	@import "uview-ui/index.scss";
</style>
Copy the code

4.3 Configuring easyCOM Mode

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// This is its own content
	"pages": [
		/ /...]}Copy the code

5 Entering Development

5.1 a decorator

  • in.vueUsed in template filesvue-property-decorate
  • Vue-property-configuration Usage Guide

5.2 Development Templates

<template> <div> </div> </template> <script lang='ts'> import { Component, Vue } from 'vue-property-decorator'; // Be sure to add the @Component decorator, @Component({}) export default class App extends Vue {} </script> <style lang=" SCSS "> </style>Copy the code

6 Show Me The Code

  • Git source code