TypeScript + uniApp + uView 搭建微信小程序项目框架

TypeScript + uniApp + uView 搭建微信小程序项目框架不管干啥先把下面这句话加上。 在项目根目录中的main.ts中,引入并使用uView的JS库,注意这两行要放在import Vue之后。 在项目根目录的uni.scss中引入此文件。 此配置需要在项目根目录的pages.json中进行。 uni-app为了调试性能的原因,修改e…

IMPORTANT:此文章仅仅作为自己搭建此项目框架的记录而已

一、创建 uniapp 项目

vue create -p dcloudio/uni-preset-vue ts-uni-mini(这里是项目名称)

TypeScript + uniApp + uView 搭建微信小程序项目框架

选择 默认模版(TypeScript)

创建完进入项目

cd ts-uni-mini

二、在新项目的vue文件中使用内联ts

按需引入vue装饰器

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

不管干啥先把下面这句话加上。

@Component({}) //必须

TypeScript + uniApp + uView 搭建微信小程序项目框架

启动项目 npm run dev:mp-weixin

三、打开微信开发者工具

导入项目 TypeScript + uniApp + uView 搭建微信小程序项目框架

选择导入的项目 TypeScript + uniApp + uView 搭建微信小程序项目框架

项目启动成功 TypeScript + uniApp + uView 搭建微信小程序项目框架

四、引入 uView

  1. 安装uView

npm install uview-ui

  1. 在 sfc.d.ts 文件添加声明

declare module ‘uview-ui’

TypeScript + uniApp + uView 搭建微信小程序项目框架

  1. 引入uView主JS库 在项目根目录中的main.ts中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

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

TypeScript + uniApp + uView 搭建微信小程序项目框架

  1. 在引入uView的全局SCSS主题文件 在项目根目录的uni.scss中引入此文件。 /* uni.scss */ @import ‘uview-ui/theme.scss’;

TypeScript + uniApp + uView 搭建微信小程序项目框架

  1. 在 App.vue 引入uView基础样式

/* 注意要写在第一行,同时给style标签加入lang=”scss”属性 */ @import “uview-ui/index.scss”;

TypeScript + uniApp + uView 搭建微信小程序项目框架

  1. 配置easycom组件模式 此配置需要在项目根目录的pages.json中进行。

温馨提示

uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。

请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。

// pages.json { “easycom”: { “^u-(.*)”: “uview-ui/components/u-
1 / u 1/u-
1.vue” } }

TypeScript + uniApp + uView 搭建微信小程序项目框架

五、请求封装目录如下

TypeScript + uniApp + uView 搭建微信小程序项目框架

六、github地址:github.com/ysm27/TypeS…

走过路过点个赞呗嘻嘻~

今天的文章TypeScript + uniApp + uView 搭建微信小程序项目框架分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/20936.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注