首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

使用VSCode搭建UniApp + TS + Vue3 + Vite项目

编程知识
2024年09月10日 21:36

uniapp是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、以及各种小程序。深受广大前端开发者的喜爱。uniapp官方也提供了自己的IDE工具HBuilderX,可以快速开发uniapp项目。但是很多前端的同学已经比较习惯使用VSCode去开发项目,为了开发uniapp项目再去切换开发工具,而且对新的开发工具也要有一定的适应过程,大多数前端的同学肯定是不愿意的。下面我们就看看用VSCode如何搭建uniapp项目。

安装node和pnpm

node的安装我就不多说了,去官网下载,直接安装就可以了。node安装好以后,我们再来安装pnpm。咦?node安装完不是自带npm吗?这个pnpm又是啥?这里简单介绍一下npmpnpm的区别,不做重点。使用 npm 时,依赖每次被不同的项目使用,都会重复安装一次。 而在使用pnpm时,依赖会被存储在一个公共的区域,不同的项目在引入相同的依赖时,会从公共区域去引入,节省了空间。

pnpm我们直接全局安装就可以了,执行以下的命令:

npm install -g pnpm

安装好以后,我们在命令行执行pnpm -v,能够看到版本号就说明安装成功了。

创建uniapp项目

由于我们要使用VSCode去开发项目,而且项目要使用Vue3TypeScript,所以我们要使用命令行去创建uniapp项目。先进入我们存放VSCode的项目目录,我的项目目录是D:\VSProjects,进入后,执行命令如下:

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

项目名称写你自己真实的项目名称就可以了,我的项目叫做my-vue3-uniapp。这个命令会把官方提供的使用了TypeScriptViteuniapp项目模板下载下来,然后我们就可以去开发uniapp项目了。

我们使用VSCode打开项目,项目的目录如下:

我们可以看到src目录里的文件都是uniapp项目的文件,包括页面、样式、静态文件等,src目录外是整个项目的文件,如:vite.config.tstsconfig.json等。然后我们打开终端,使用pnpm命令安装一下依赖,执行命令如下:

pnpm i

执行完成后,我们熟悉的node_modules目录出现在了项目中,如图:

然后我们运行项目,执行命令如下:

pnpm run dev:mp-weixin

上面的命令会把我们的代码编译成微信小程序代码,如图:

编译完成后,我们的项目中出现了dist目录,这个目录就是编译后的输出目录。然后我们打开微信小程序开发工具,目录选择/dist/dev/mp-weixin,如图:

AppID写我们自己的小程序的AppID,点击确定,

看到这个画面,说明我们的uniapp项目搭建成功了,而且可以通过微信小程序开发工具去预览。我们可以通过VSCode在页面上添加些文字,看看微信小程序开发工具的画面是否有改变。这里就不给大家演示了。

添加uni-ui扩展组件

在我们开发项目时,会用到各种组件,仅仅使用uniapp的内置组件是远远不够的,我们还需安装官方提供的扩展组件uni-ui,怎么安装呢?我们同样使用pnpm命令去安装,在具体安装uni-ui扩展组件之前,我们先需要安装sasssass-loader

安装sass

 pnpm i sass -D

安装sass-loader

pnpm i sass-loader@v8.x

由于现在的node版本都是大于16的,所以,我们根据uniapp官方的建议,安装v8.x的版本。

最后我们安装uni-ui,如下:

pnpm i @dcloudio/uni-ui

uni-ui安装完成后,我们再配置easycomeasycom的好处是,可以自动引入uni-ui组件,无需我们手动import,这对于我们开发项目来说非常的方便,我们打开src目录下的 pages.json 并添加 easycom 节点:

// pages.json
{
	"easycom": {
		"autoscan": true,
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
		}
	},
	
	// 其他内容
	pages:[
		// ...
	]
}

这样uni-ui扩展组件就添加到我们的项目中了。

Json文件的注释

我们在添加easycom的时候,发现pages.json文件中的注释是有错误提示的,我们想让Json文件中可以有注释,至少pages.jsonmanifest.json两个文件这种可以有注释,这个我们需要在VSCode中配置一下,打开文件->首选项->设置,如图:

然后我们在文本编辑器中找到文件,再在Associations中添加项,如下:

然后我们回到pages.jsonmanifest.json这两个文件看一下,注释就不报错了。

VSCode插件安装

到现在为止,我们的uniapp项目已经搭建起来了,而且已经可以正常运行了,两个比较重要的json文件中,注释文字也不报错了。但这离我们正常开发还差很多,我们在使用uniapp组件的时候,没有提示,这使得我们编写程序很不方便,我们可以安装几个uniapp插件解决这些问题。我们在VSCode的扩展商店中搜索一下uniapp,这里需要安装3个插件:

  • uniapp小程序扩展
  • uni-create-view
  • uni-helper

安装完之后,我们在编写页面时,会有提示:

在新建页面时,会有uniapp相关的选项:

这些对于我们实际开发是非常由帮助的。

安装uniapp的types

我们可以看到vue文件中,uniapp的组件并没有变绿,说明ts是没有生效的,我们先把uniapp的类型文件安装一下,如下:

pnpm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types

我们在使用pnpm安装时,会报错,我们根据uni-helper的官方文档中的提示,将 shamefully-hoisttrue。这个需要我们找到家目录下的.npmrc文件,如图:

然后在文件中增加:

registry=http://registry.npm.taobao.org
shamefully-hoist=true

然后,我们再执行pnpm命令安装类型文件。安装完成后,在项目根目录下,打开tsconfig.json文件,在types中增加我们安装的类型:

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    ……
    "types": [
      "@dcloudio/types",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ]
  }
	……
}

添加完成后,我们发现compilerOptions是有报错的,鼠标悬停上去发现:

报错提示两个选项将要废弃,我们要把这个错误提示去掉,可以在文件中增加"ignoreDeprecations": "5.0",

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
   ……
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

这样compilerOptions就不报错了。然后我们打开vue文件,发现uniapp的标签都变绿了,但是会有报错,这个VSCode的插件之间有冲突造成的,我们可以配置如下解决,参考官方文档:

{
  ……
  "vueCompilerOptions": {
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
  },
  ……
}

然后重启VSCode。最后我们发现vue文件的uniapp标签变绿了,而且没有报错:

最后tsconfig.json的整体内容如下:

{
  "extends": "@vue/tsconfig/tsconfig.json",
  "compilerOptions": {
    "ignoreDeprecations": "5.0",
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom"],
    "types": [
      "@dcloudio/types",
      "@uni-helper/uni-app-types",
      "@uni-helper/uni-ui-types"
    ]
  },
  "vueCompilerOptions": {
    "plugins": ["@uni-helper/uni-app-types/volar-plugin"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

最后

到这里,我们的uniapp项目就搭建完成了,而且是使用我们非常熟悉的VSCode,项目中还是用了Vue3TypescriptVite,该装的插件也已经装上了,鼠标悬停会给我们组件的提示,大大提高了我们的开发效率。OK了,去开发我们的项目应用吧~~~

From:https://www.cnblogs.com/boboooo/p/18407383
本文地址: http://www.shuzixingkong.net/article/1899
0评论
提交 加载更多评论
其他文章 论文阅读翻译之Deep reinforcement learning from human preferences
论文阅读翻译之Deep reinforcement learning from human preferences 关于 首次发表日期:2024-09-11 论文原文链接:https://arxiv.org/abs/1706.03741 论文arxiv首次提交日期:12 Jun 2017 使用KIM
论文阅读翻译之Deep reinforcement learning from human preferences
Redis、Nginx、SQLite、Elasticsearch等开源软件成功的原因及它们对IT技术人员的启示
引言 这些年在自研产品,对于如何做好产品进行了一些思考。随着开源软件的蓬勃发展,许多开源项目已经成为IT行业的核心组成部分。像Redis、Nginx、SQLite、Elasticsearch这些知名的开源软件,已经成为了开发者的首选工具。这些开源软件不仅在技术性能上取得了重大突破,还在社区建设、生态
Redis 入门 - C#|.NET Core客户端库六种选择
介绍了6款.NET系Redis客户端库:ServiceStack.Redis、StackExchange.Redis、CSRedisCore、FreeRedis、NewLife.Redis、BeetleX.Redis,各具特色,如商业支持、高性能、高并发、低延迟等,适合不同场景和需求。
Redis 入门 - C#|.NET Core客户端库六种选择 Redis 入门 - C#|.NET Core客户端库六种选择 Redis 入门 - C#|.NET Core客户端库六种选择
设计模式之状态模式(三分钟学会一个设计模式)
状态模式(State Pattern)的定义是这样的:类的行为是基于它的状态改变的。注意这里的状态不是狭义的指对象维护了一个“状态”字段,我们传入了不同的枚举值,对象整体的表现行为(对外方法)就改变了。而是指内部的(任意)字段如果发生了变化,那么它的状态就变了,那么它对外的表现形式就变了。它是面向对
设计模式之状态模式(三分钟学会一个设计模式)
FALCON:打破界限,粗粒度标签的无监督细粒度类别推断,已开源| ICML'24
在许多实际应用中,相对于反映类别之间微妙差异的细粒度标签,我们更容易获取粗粒度标签。然而,现有方法无法利用粗标签以无监督的方式推断细粒度标签。为了填补这个空白,论文提出了FALCON,一种从粗粒度标记数据中无需细粒度级别的监督就能发现细粒度类别的方法。FALCON同时推断未知的细粒度类别和粗粒度类别
FALCON:打破界限,粗粒度标签的无监督细粒度类别推断,已开源| ICML'24 FALCON:打破界限,粗粒度标签的无监督细粒度类别推断,已开源| ICML'24 FALCON:打破界限,粗粒度标签的无监督细粒度类别推断,已开源| ICML'24
ServiceMesh 1:大火的云原生微服务网格,究竟好在哪里?
1 关于云原生 云原生计算基金会(Cloud Native Computing Foundation, CNCF)的官方描述是: 云原生是一类技术的统称,通过云原生技术,我们可以构建出更易于弹性扩展、极具分布式优势的应用程序。这些应用可以被运行在不同的环境当中,比如说 私有云、公有云、混合云、还有多
ServiceMesh 1:大火的云原生微服务网格,究竟好在哪里? ServiceMesh 1:大火的云原生微服务网格,究竟好在哪里? ServiceMesh 1:大火的云原生微服务网格,究竟好在哪里?
补: Rest 风格请求处理的的内容补充(1)
补: Rest 风格请求处理的的内容补充(1) Rest风格请求:注意事项和细节 客户端是PostMan 可以直接发送Put,delete等方式请求,可不设置Filter 如果哟啊SpringBoot支持页面表达的 Rest 功能,则需要注意如下细节: Rest 风格请求核心 Filter: Hid
补: Rest 风格请求处理的的内容补充(1) 补: Rest 风格请求处理的的内容补充(1) 补: Rest 风格请求处理的的内容补充(1)
常回家看看之house_of_kiwi
house of kiwi 前言:house_of_kiwi 一般是通过触发__malloc_assert来刷新IO流,最后可以劫持程序流或者通过和setcontext来打配合来进行栈迁移来得到flag。 我们看看触发的源码 #if IS_IN (libc) #ifndef NDEBUG # def
常回家看看之house_of_kiwi 常回家看看之house_of_kiwi 常回家看看之house_of_kiwi