記錄--Uniapp + TypeScript 配置文檔

来源:https://www.cnblogs.com/smileZAZ/archive/2022/11/10/16877927.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 0 目標 使用 uniapp + TypeScript 為基礎棧進行小程式開發 uniapp 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套代碼,可發佈到iOS、Android、H5、以及各種小程式(微信/支付寶/百度/ ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

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

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 我是風箏,公眾號「古時的風箏」,專註於 Java技術 及周邊生態。 文章會收錄在 JavaNewBee 中,更有 Java 後端知識圖譜,從小白到大牛要走的路都在裡面。 本來是一個平靜而美好的下午,其他部門的同事要一份數據報表臨時彙報使用,因為系統目前沒有這個維度的功能,所以需要寫個SQL馬上出一下 ...
  • 背景 監控、優化、診斷 cpu, io消耗監控https://github.com/powa-team/pg_stat_kcache where條件過濾性統計https://github.com/powa-team/pg_qualstats cgroup , /proc 系統級指標統計https:/ ...
  • dispatch_sync執行了兩件事:把代碼塊放入指定線程的任務隊列中、堵塞當前線程直到代碼塊執行結束,如果出現了堵塞的線程和代碼塊所在的線程為同一線程的話,這個時候代碼無法在此線程執行繼續下去,即造成了死鎖。 - (void)viewDidLoad { [super viewDidLoad]; ...
  • 隨著元宇宙的興起,3D虛擬現實廣泛引用,讓數字化信息和現實世界融合,目前大家的目光主要聚焦於視覺交互層面,為了在虛擬環境中更好的再現真實世界的三維空間體驗,引入聽覺層面必不可少,空間音頻孕育而生。 空間音頻是一種音頻體驗,會讓用戶更容易體驗到聲音的立體感和深度,將環繞聲更準確地定位在合適的方位,讓用 ...
  • 好家伙, 本篇內容為《JS高級程式設計》第三章學習筆記 1.數據類型 ECMAScript有6種簡單數據類型(稱為原始類型): Undefined, Null, Boolean, Number, String和Symbol。 Symbol (符號)是ECMAScript6新增的。還有一種複雜數據類型 ...
  • Ant Design Pro V5 訪問signalR : connection.start 沒反應, network顯示待處理, 原來是代理沒設置好,需要配置成支持websocket,配置如下圖所示。 ...
  • vue vue簡介 Vue (發音為 /vjuː/,類似 view) 是一款用於構建用戶界面的 JavaScript 框架。它基於標準 HTML、CSS 和 JavaScript 構建,並提供了一套聲明式的、組件化的編程模型,幫助你高效地開發用戶界面。無論是簡單還是複雜的界面,Vue 都可以勝任。 ...
  • 一.TS介紹 1.1 簡介 ts是2012年由微軟開發,在js的基礎上添加了類型支持 1.2 優劣勢 優勢 :任何位置都有代碼提示,增加效率;類型系統重構更容易;使用最新的ECMAscript語法 劣勢:和有些庫的結合併不是很完美;學習需要成本需要理解介面、泛型、類型等知識 1.3 與js區別 首先 ...
一周排行
    -Advertisement-
    Play Games
  • 1.部署歷史 猿友們好,作為初來實習的我,已經遭受社會的“毒打”,所以請容許我在下麵環節適當吐槽,3Q! 傳統部署 ​ 回顧以往在伺服器部署webapi項目(非獨立發佈),dotnet環境、守護進程兩個逃都逃不掉,正常情況下還得來個nginx代理。不僅僅這仨,可能牽扯到yum或npm。node等都要 ...
  • 隨著技術的進步,跨平臺開發已經成為了標配,在此大背景下,ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例,簡述基於MVC三層架構開發的常見知識點,前一篇文章,已經簡單介紹瞭如何搭建開發框架,和登錄功能實現,本篇... ...
  • 這道題只要會自定義cmp恰當地進行排序,其他部分沒有什麼大問題。 上代碼: 1 #include<bits/stdc++.h> 2 using namespace std; 3 int n,s,h1,h2,cnt; 4 struct apple{ 5 int height,ns;//height為蘋 ...
  • 這篇文章主要描述RPC的路由策略,包括為什麼需要請求隔離,為什麼不在註冊中心中實現請求隔離以及不同粒度的路由策略。 ...
  • 簡介: 中介者模式,屬於行為型的設計模式。用一個中介對象來封裝一系列的對象交互。中介者是各對象不需要顯式地相互引用,從而使其耦合鬆散,而且可以獨立地改變他們之間的交互。 適用場景: 如果平行對象間的依賴複雜,可以使用中介者解耦。 優點: 符合迪米特法則,減少成員間的依賴。 缺點: 不適用於系統出現對 ...
  • 【前置內容】Spring 學習筆記全系列傳送門: Spring學習筆記 - 第一章 - IoC(控制反轉)、IoC容器、Bean的實例化與生命周期、DI(依賴註入) Spring學習筆記 - 第二章 - 註解開發、配置管理第三方Bean、註解管理第三方Bean、Spring 整合 MyBatis 和 ...
  • 簡介: 享元模式,屬於結構型的設計模式。運用共用技術有效地支持大量細粒度的對象。 適用場景: 具有相同抽象但是細節不同的場景中。 優點: 把公共的部分分離為抽象,細節依賴於抽象,符合依賴倒轉原則。 缺點: 增加複雜性。 代碼: //用戶類 class User { private $name; fu ...
  • 這次設計一個通用的多位元組SPI介面模塊,特點如下: 可以設置為1-128位元組的SPI通信模塊 可以修改CPOL、CPHA來進行不同的通信模式 可以設置輸出的時鐘 狀態轉移圖和思路與多位元組串口發送模塊一樣,這裡就不給出了,具體可看該隨筆。 一、模塊代碼 1、需要的模塊 通用8位SPI介面模塊 `tim ...
  • AOP-03 7.AOP-切入表達式 7.1切入表達式的具體使用 1.切入表達式的作用: 通過表達式的方式定義一個或多個具體的連接點。 2.語法細節: (1)切入表達式的語法格式: execution([許可權修飾符] [返回值類型] [簡單類名/全類名] [方法名]([參數列表]) 若目標類、介面與 ...
  • 測試一、虛繼承與繼承的區別 1.1 單個繼承,不帶虛函數 1>class B size(8): 1> + 1> 0 | + (base class A) 1> 0 | | _ia //4B 1> | + 1> 4 | _ib //4B 有兩個int類型數據成員,占8B,基類邏輯存在前面 1.2、單個 ...