記錄--Uniapp + TypeScript 配置檔案-有解無憂

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

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

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/531508.html

標籤：JavaScript

上一篇：docker+nginx 安裝部署修改資源目錄組態檔和容器埠資訊

下一篇：TypeScript（基礎篇）day01