记录--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 环境准备
2 搭建项目
- 全局安装
vue-cli
1 | $ npm install -g @vue/cli |
- 创建
uniapp
1 2 | # my-project 为项目目录名 $ vue create -p dcloudio/uni-preset-vue my-project |
- 选择模板
如图,选用 默认模板(TypeScript)
- 完成示意图如下
3 运行项目
- 切换目录至项目根目录
1 | $ cd my-project |
- 运行项目至微信小程序
1 | $ npm run dev:mp-weixin |
1 | $ npm install uview-ui -S |
4.2 引入
- main.ts
1 2 3 | // main.ts import uView from "uview-ui"; Vue.use(uView); |
- 在
main.ts
中引入uview-ui
时,ts 会报错。此时需要在sfc.d.ts
文件中添加配置,用于声明模块。
1 2 | // sfc.d.ts declare module 'uview-ui'; |
- uni.scss
1 2 | // uni.scss @import 'uview-ui/theme.scss'; |
- APP.vue
1 2 3 4 | < style lang="scss"> /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */ @import "uview-ui/index.scss"; </ style > |
4.3 配置 easycom 模式
1 2 3 4 5 6 7 8 9 10 11 | // 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 开发模板
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < 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
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
分类:
uni-app学习笔记
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)