一、創(chuàng)建 uniapp 項目

vue create -p dcloudio/uni-preset-vue ts-uni-mini(這里是項目名稱）

選擇 默認模版（TypeScript)

創(chuàng)建完進入項目

cd ts-uni-mini

二、在新項目的vue文件中使用內聯ts

按需引入vue裝飾器

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

不管干啥先把下面這句話加上。

@Component({}) //必須

啟動項目 npm run dev:mp-weixin

三、打開微信開發(fā)者工具

導入項目

選擇導入的項目

項目啟動成功

四、引入 uView

1. 安裝uView

npm install uview-ui

2. 在 sfc.d.ts 文件添加聲明

declare module 'uview-ui'

3. 引入uView主JS庫

在項目根目錄中的main.ts中，引入并使用uView的JS庫，注意這兩行要放在import Vue之后。

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

4. 在引入uView的全局SCSS主題文件

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

5. 在 App.vue 引入uView基礎樣式

/* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */ @import "uview-ui/index.scss";

6. 配置easycom組件模式

此配置需要在項目根目錄的pages.json中進行。

溫馨提示

uni-app為了調試性能的原因，修改easycom規(guī)則不會實時生效，配置完后，您需要重啟HX或者重新編譯項目才能正常使用uView的功能。

請確保您的pages.json中只有一個easycom字段，否則請自行合并多個引入規(guī)則。

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

五、請求封裝目錄如下