记录–Uniapp + TypeScript 配置文档

IT技术2年前 (2022)更新 IT大王

0 30

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

0 目标

使用 uniapp + TypeScript 为基础栈进行小程序开发

uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
以后摘录自 TypeScript官网

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 环境准备

需要安装 Node 环境
需要安装 Git 环境
开发工具：微信开发者工具

2 搭建项目

全局安装 vue-cli

$ npm install -g @vue/cli

创建uniapp

# my-project 为项目目录名
$ vue create -p dcloudio/uni-preset-vue my-project

选择模板

如图，选用默认模板（TypeScript）

完成示意图如下

3 运行项目

$ cd my-project

运行项目至微信小程序

$ npm run dev:mp-weixin

运行编译后，为dist/dev/mp-weixin目录
使用微信开发者工具导入该目录既可开发运行

4 引入 UI 库

这里我们引入的是uView-UI

4.1 安装依赖

$ npm install uview-ui -S

4.2 引入

main.ts

// main.ts
import uView from "uview-ui";
Vue.use(uView);

在main.ts中引入uview-ui时，ts 会报错。此时需要在sfc.d.ts文件中添加配置，用于声明模块。

// sfc.d.ts
declare module 'uview-ui';

uni.scss

// uni.scss
@import 'uview-ui/theme.scss';

APP.vue

<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>

4.3 配置 easycom 模式

// pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
// 此为本身已有的内容
"pages": [
// ......
]
}

5 进入开发

5.1 装饰器

在.vue模板文件中使用vue-property-decorate
vue-property-decorate 使用指南

5.2 开发模板

<template>
<div>
</div>
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator';
// 一定要加 @Component 装饰器，否则小程序生命周期会报错失效
@Component({})
export default class App extends Vue {
}
</script>
<style lang="scss">
</style>

6 Show Me The Code

git 源码

本文转载于:

https://juejin.cn/post/7000203077525438477

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

# IT技术

文章版权归作者所有，未经允许请勿转载。

版权声明：
1、IT大王遵守相关法律法规，由于本站资源全部来源于网络程序/投稿，故资源量太大无法一一准确核实资源侵权的真实性；
2、出于传递信息之目的，故IT大王可能会误刊发损害或影响您的合法权益，请您积极与我们联系处理(所有内容不代表本站观点与立场)；
3、因时间、精力有限，我们无法一一核实每一条消息的真实性，但我们会在发布之前尽最大努力来核实这些信息；
4、无论出于何种目的要求本站删除内容，您均需要提供根据国家版权局发布的示范格式
《要求删除或断开链接侵权网络内容的通知》：https://itdw.cn/ziliao/sfgs.pdf，
国家知识产权局《要求删除或断开链接侵权网络内容的通知》填写说明： http://www.ncac.gov.cn/chinacopyright/contents/12227/342400.shtml
未按照国家知识产权局格式通知一律不予处理；请按照此通知格式填写发至本站的邮箱 wl6@163.com