记录--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
  • 运行编译后,为 dist/dev/mp-weixin 目录
  • 使用微信开发者工具导入该目录既可开发运行

4 引入 UI 库

4.1 安装依赖

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 装饰器

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

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

posted @   林恒  阅读(388)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
欢迎阅读『记录--Uniapp + TypeScript 配置文档』
点击右上角即可分享
微信分享提示