一、創建 uniapp 項目

vue create -p dcloudio/uni-preset-vue ts-uni-mini(這(zhè)裏是(shì)項目名稱）

選擇 默認模版（TypeScript)

創建完進入項目

cd ts-uni-mini

二、在(zài)新項目的(de)vue文件中使用内聯ts

按需引入vue裝飾器

import { Component,Vue ,Watch} from "vue-property-decorator";

不(bù)管幹啥先把下面這(zhè)句話加上(shàng)。

@Component({}) //必須

啓動項目 npm run dev:mp-weixin

三、打開微信開發者工具

導入項目

選擇導入的(de)項目

項目啓動成功

四、引入 uView

1. 安裝uView

npm install uview-ui

2. 在(zài) sfc.d.ts 文件添加聲明

declare module 'uview-ui'

3. 引入uView主JS庫

在(zài)項目根目錄中的(de)main.ts中，引入并使用uView的(de)JS庫，注意這(zhè)兩行要(yào / yāo)放在(zài)import Vue之(zhī)後。

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

4. 在(zài)引入uView的(de)全局SCSS主題文件

在(zài)項目根目錄的(de)uni.scss中引入此文件。 /* uni.scss */ @import 'uview-ui/theme.scss';

5. 在(zài) App.vue 引入uView基礎樣式

/* 注意要(yào / yāo)寫在(zài)第一行，同時(shí)給style标簽加入lang="scss"屬性 */ @import "uview-ui/index.scss";

6. 配置easycom組件模式

此配置需要(yào / yāo)在(zài)項目根目錄的(de)pages.json中進行。

溫馨提示

uni-app爲(wéi / wèi)了(le／liǎo)調試性能的(de)原因，修改easycom規則不(bù)會實時(shí)生效，配置完後，您需要(yào / yāo)重啓HX或者重新編譯項目才能正常使用uView的(de)功能。

請确保您的(de)pages.json中隻有一個(gè)easycom字段，否則請自行合并多個(gè)引入規則。

// pages.json { "easycom": { "^u-(.*)": "uview-ui/components/u-$1\mathrm{/}u?$1.vue" } }

五、請求封裝目錄如下