uniapp 使用命令行创建vue3 ts 项目

命令行创建 uni-app 项目:

vue3 + ts 版

	npx degit dcloudio/uni-preset-vue#vite-ts 项目名称

注意 Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
如果下载失败,请去gitee下载

https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip

安装依赖

安装依赖 pnpm install

还需要安装sass,不然会报错

  • npm install sass --save-dev
  • npm i sass -D 或 yarn add sass -D
  • 安装 sass-loader pm i sass-loader@10.1.1 -D 或 yarn add sass-loader@10.1.1 -D
  • 如果 node 版本小于 16 ,sass-loader 请使用低于 @11.0.0 的版本,sass-loader@11.0.0 不支持 vue@2.6.12 如果 node 版本大于 16 , sass-loader 建议使用 v8.x 版本
    vite配置 根目录新建文件vite.config.ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import path from "path";// https://vitejs.dev/config/
export default defineConfig({resolve: {alias: {"@": path.resolve(__dirname, "./src") // map '@' to './src' },},plugins: [uni()],css: {preprocessorOptions: {scss: {// prependData: '@import "./static/css/index.scss";',additionalData: '@import "../src/static/css/index.scss";',},// stylus: {//     additionalData: '@import "./static/css/index.scss";',// },},},
});

用 VS Code 开发 uni-app 项目

安装 Vue3 + TS 插件​
注意事项

没开发过 Vue3 + TS 项目的小伙伴注意,需要先安装 Vue3 和 TS 的插件,并完成以下配置 👇

  • 安装 Vue Language Features (Volar) :Vue3 语法提示插件

  • 安装 TypeScript Vue Plugin (Volar) :Vue3 的 TS 插件

  • 工作区禁用 Vetur 插件(Vue2 插件和 Vue3 插件冲突)

  • 工作区禁用 @builtin typescript 插件(禁用后自动开启 Vue3 的 TS 托管模式)

  • 安装 uni-app 插件

  • uni-create-view :快速创建 uni-app 页面

  • uni-helper uni-app :代码提示

  • uniapp 小程序扩展 :鼠标悬停查文档

  • TS 类型校验

    • 安装类型声明文件 pnpm i -D @types/wechat-miniprogram @uni-helper/uni-app-types
    • 配置 tsconfig.json
      设置文件关联,把 manifest.json 和 pages.json 设置为 jsonc
  • 在VS Code中找到设置

  • 在设置中搜索文件关联

  • 添加这两个文件名,值为 jsonc (jsonc表示json文件可以写注释)
    在这里插入图片描述

{"extends": "@vue/tsconfig/tsconfig.json","compilerOptions": {"sourceMap": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"lib": ["esnext", "dom"],"types": ["@dcloudio/types",
+      "@types/wechat-miniprogram",
+      "@uni-helper/uni-app-types"]},
+  "vueCompilerOptions": {
+    "nativeTags": ["block", "component", "template", "slot"]
+  },"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

注意:原配置experimentalRuntimeMode现调整为 nativeTags。

加入其他UI插件 如uni ui

npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui配置easycom使用 npm 安装好 uni-ui 之后,需要配置 easycom 规则,让 npm 安装的组件支持 easycom
打开项目根目录下的 pages.json 并添加 easycom 节点:
"easycom": {"autoscan": true,"custom": {// uni-ui 规则如下配置"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/773171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024 解决 Failed to launch process [ElasticSearch]

操作系统:centos 7 (x86) sonarQube不能使⽤root账号进⾏启动,所以需要创建普通⽤户及其⽤户组 一、问题描述:使用root启动时,一直反馈 SonarQube is not running 问题原因:不能够使用root用户进行启动 解决方案…

【Effective Web】html/css优化和技巧

html/css优化和技巧 html/css可以做到一些js的功能&#xff0c;减少js操作dom的高昂成本。 巧用伪类 显示勾选时文案 checkbo勾选时触发&#xff0c;实现checkbox的简单选中事件处理 <template><input type"checkbox" /><span class"checkb…

Unity Text文本固定框条内无缝衔接循环滚动效果实现

在Unity中要实现在一个固定背景框条内播放文本&#xff0c;并且文本能够衔接循环滚动&#xff0c;可以通过以下步骤实现&#xff1a; 1、创建一个Image组件作为背景框条&#xff0c;在Image下添加一个Mask组件&#xff0c;如下图&#xff1a; 2、创建Text文本组件&#xff0c…

深入理解TCP/IP协议:网络通信的基石

提示&#xff1a;本系列文章重点学习TCP/IP协议 深入理解TCP/IP协议&#xff1a;网络通信的基石 简介一、TCP/IP协议的基本原理二、TCP/IP协议的工作机制三、TCP面向连接建立连接&#xff1a;断开连接&#xff1a; 四、分层传输五、TCP流量控制滑动窗口机制流量控制的工作流程优…

深入解析代理模式:使用场景、实现及应用实例

在软件设计中&#xff0c;代理模式是一种常用的设计模式&#xff0c;它为其他对象提供一种代理以控制对这个对象的访问。代理模式在多种场景下都能发挥重要作用&#xff0c;特别是在需要控制对象访问权限、降低系统耦合度或提高系统性能时。 一、代理模式的使用条件 代理模式…

ABAP - 上传文件模板到SMW0,并从SMW0上下载模板

upload file template to SMW0 and download the template from it 首先上传文件到tcode SMW0 选择新建后,输入文件名和描述,再选择想要上传的文件 上传完成后: 在表WWWPARAMS, WWWDATA里就会有信息存进去 然后就可以程序里写代码了: 屏幕上的效果:

iOS - Runtime - Class的结构

文章目录 iOS - Runtime - Class的结构前言1. Class的结构1.1 Class的结构1.1.1 objc_class1.1.2 class_rw_t1.1.3 class_ro_t 1.2 class_rw_t和class_ro_t的区别1.3 class_rw_t和class_ro_t的关系1.3.1 分析关系1.3.2 原因 1.4 method_t1.4.1 Type Encoding1.4.2 types iOS - …

langchain调用语言模型chatglm4从智谱AI

目录 ​0.langchain agent 原理 ReAct 1.langchain agent使用chatgpt调用tools的源代码 2.自定义本地语言模型的代码 3.其他加速方法 背景&#xff1a;如果使用openai的chatgpt4进行语言问答&#xff0c;是需要从国内到国外的一个客户请求-->openai服务器response的一个…

pytorch反向传播算法

目录 1. 链式法则复习2. 多输出感知机3. 多层感知机4. 多层感知机梯度推导5. 反向传播的总结 1. 链式法则复习 2. 多输出感知机 3. 多层感知机 如图&#xff1a; 4. 多层感知机梯度推导 简化式子把( O k O_k Ok​ - t k t_k tk​) O k O_k Ok​(1 - O k O_k Ok​)起个别名…

react native上传二进制图片、视频的方法

react native获取本地图片我用的react-native-image-picker&#xff0c;但是它只能获取图片路径&#xff0c;以及base64的图片&#xff0c;不能获取到binary二进制形式的。 一开始我是让后端改造接口&#xff0c;把原本传binary的改成了base64&#xff0c;可是&#xff0c;躲得…

[自研开源] 数据集成之分批传输 v0.7

开源地址&#xff1a;gitee | github 详细介绍&#xff1a;MyData 基于 Web API 的数据集成平台 部署文档&#xff1a;用 Docker 部署 MyData 使用手册&#xff1a;MyData 使用手册 试用体验&#xff1a;https://demo.mydata.work 交流Q群&#xff1a;430089673 介绍 本篇基于…

嵌入式下C/C++调用sqlite3简单开发

交叉编译sqlite3请关注我第一篇博文 sqlite3 交叉编译-CSDN博客 sqlite3的命令的简单使用&#xff08;增删改查&#xff0c;创建/删除表&#xff09;请关注我的上一篇博文 sqlite3嵌入式使用以及C/C代码开发-CSDN博客 一、新建文件夹 此文件夹用于放置工程&#xff0c;比如…

Qt实现TFTP Server和 TFTP Client(三)

3.2 Client Client包括下面3个类&#xff1a; ClientSockeTFtpClientTFtpClientWidget 3.2.1 ClientSocke ClientSocke从BaseUdp派生实现write接口. 3.2.1.1 ClientSocke定义 #include "baseudp.h"class QUdpSocket; class ClientSocket : public BaseUdp { pu…

【C++】每日一题 45 跳跃游戏

给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - 1] 的最…

SQLite中的原子提交(四)

返回&#xff1a;SQLite—系列文章目录 上一篇:SQLite数据库成为内存中数据库&#xff08;三&#xff09; 下一篇&#xff1a;SQLite使用的临时文件&#xff08;二&#xff09; 1. 引言 SQLite等事务数据库的一个重要特性 是“原子提交”。 原子提交意味着所有数据库都在…

深度学习十大算法之图神经网络(GNN)

一、图神经网络的基础 图的基本概念 图是数学中的一个基本概念&#xff0c;用于表示事物间复杂的关系。在图论中&#xff0c;图通常被定义为一组节点&#xff08;或称为顶点&#xff09;以及连接这些节点的边。每个边可以有方向&#xff0c;称为有向边&#xff0c;或者没有方向…

网络原理讲解

目标 网络发展史 独立模式 独立模式&#xff1a;计算机之间相互独立&#xff1b; 网络互连 随着时代的发展&#xff0c;越来越需要计算机之间互相通信&#xff0c;共享软件和数据&#xff0c;即以多个计算机协同工作来完成 业务&#xff0c;就有了网络互连。 网络互连&a…

学习笔记:MYSQL数据库基础知识

MYSQL数据库基础知识学习笔记 MYSQL基础学习数据库相关概念现主流数据库排名数据模型SQL分类SQL数据库基础操作 2024/3/27 学习资料&#xff1a;黑马程序员:MYSQL MYSQL基础学习 数据库和数据库管理系统(DBMS) 数据库: 是存储数据的集合&#xff0c;包括表、视图、索引等对象…

存内计算:释放潜能的黑科技

什么是存内计算&#xff1f; 存内计算技术是一种新型的计算架构&#xff0c;它将存储器和计算单元融合在一起&#xff0c;以实现高效的数据处理。存内计算技术的优势在于能够消除数据搬运的延迟和功耗&#xff0c;从而提高计算效率和能效比。目前&#xff0c;存内计算技术正处…

React Native获取及监听网络状态

在React Native中&#xff0c;要获取和监听网络状态&#xff0c;你可以使用react-native-netinfo库&#xff08;以前是核心库的一部分&#xff0c;但在React Native 0.60之后被移出并作为一个独立的库提供&#xff09;。以下是使用这个库来获取和监听网络状态的基本步骤&#x…