首页 > 其他分享 >记录--Uniapp + TypeScript 配置文档

记录--Uniapp + TypeScript 配置文档

时间:2022-11-10 18:14:32浏览次数:70  
标签:scss Uniapp TypeScript -- uview ts vue ui

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

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

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 库

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 装饰器

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

本文转载于:

https://juejin.cn/post/7000203077525438477

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

 

标签:scss,Uniapp,TypeScript,--,uview,ts,vue,ui
From: https://www.cnblogs.com/smileZAZ/p/16877927.html

相关文章

  • MySQL-InnerDB原理
     InnerDB实现原理 它是MySQL从5.5版本卡死的默认的存储引擎,是第一份支持ACID特性的MySQL存储引擎,特点是行锁设计,支持MVCC(多版本并发控制),支持外键......
  • Java8 新特性 - 方法引用
    ......
  • PiL测试实战(上)| 模型生成代码的单元级PiL测试
    前言  对于嵌入式代码,为了测试软件能否在目标芯片上实现预期的功能,通常需要进行PiL测试(Processor-in-the-Loop-Testing)。目前市面上较为常见的嵌入式软件调试工具有P......
  • 22.11.10
    1、将数据归一化到(a,b)区间(1)首先找到原本样本数据X的最小值Min及最大值Max(2)计算系数:k=(b-a)/(Max-Min)(3)得到归一化到[a,b]区间的数据:Y=a+k(X-Min)或者Y=b+k(X-Max) 2......
  • Integer对象比较
    今天有个需求需要写个目录这不是简简单单把之前的代码复制一份 修修变量名就大功告成了 但是出现了一个bug 改了两个小时 以为Integer是对象  所以两个Int......
  • c#实现身份证脱敏代码
    http://t.zoukankan.com/YYkun-p-15380859.htmlC#实现数据脱敏 数据脱敏,此处以姓名、身份证为例///<summary>///姓名敏感处理///</summary>......
  • 720云展厅展馆定制公司首选深圳华锐视点
    随着5G技术不断完善,借助云端革新出的720云网上展馆,高度还原线下参展的视觉感官体验,能极大降低企业营销运营和管理成本,同时借助网络流量增加潜在客户和整体利润。......
  • k8s-Deployment
    控制器ControllerManager控制器确保pod资源符合预期的状态,pod资源出现故障时,尝试进行重启,当重启策略无效时,会重建pod。1、分类ReplicaSet代用户创建指定数量的pod副本......
  • java中加号的用法
    注意java中+号的使用publicclassAdd{ publicstaticvoidmain(String[]args){ System.out.println(100+80); System.out.println(("100"+80)); System.out.......
  • MySQL-数据库优化
     数据库优化: 数据库设计:1.字段选型:数字类型:tinyintsmalintmediumintintbigint字符类型:charvarchar事件类型:datedate......