> 개발 도구 > VSCode > VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

青灯夜游
풀어 주다: 2022-05-13 20:13:02
앞으로
16971명이 탐색했습니다.

VSCode에서 uni-app을 개발하는 방법은 무엇인가요? 다음 기사에서는 VSCode에서 uni-app을 개발하는 방법에 대한 튜토리얼을 공유할 것입니다. 이것은 아마도 가장 훌륭하고 자세한 튜토리얼일 것입니다. 와서 살펴보세요!

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

VSCode를 사용하여 uni-app을 작성하겠습니다. Hbuilder X와 달리 VSCode를 사용하면 스캐폴딩을 통해 프로젝트를 생성할 수 있는 이유가 무엇인가요? 어쩌면 나는 아직 Hbuilder에 익숙하지 않을 수도 있습니다. 여기서는 자세히 설명하지 않겠습니다. [추천 학습: "vscode 입문 튜토리얼uni-app,不同于Hbuilder X,用VSCode是通过脚手架来创建项目,为什么我要用VSCode写呢?可能还是不太习惯Hbuilder X等等原因,还有就是不想换开发工具,觉得开发前端一个VSCode就够了,也不用去比较两者谁好谁坏,自己喜欢哪个用哪个,这里就不过多赘述了。【推荐学习:《vscode入门教程》】

自己也用VSCode做了几个uni-app项目了,主要是写小程序,总体体验下来还是非常不错的。

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

简述一下这个教程能给VSCode开发 uni-app带来的体验

  • 增强pages.jsonmanifest.json开发体验(语法提示、颜色块、写注释)
  • 一键创建页面、组件、分包
  • 完善的API,组件,uni.scss语法提示
  • 条件编译注释高亮

可以说,VSCode开发uni-app的槽点基本上都解决了,有很多地方我觉得体验还更好。

文章比较长,写的也比较详细,小白也能看懂。

初始化项目

我们使用 vue2 创建工程作为示例,uni-app中Vue2版的组件库和插件也比较多,稳定、问题少,可以先参考下官方文档:工程化

既然是使用vue脚手架,那肯定要全局安装@vue/cli,已安装的可以跳过。

注意:Vue2创建的项目,脚手架版本要用@4的版本,用@5的版本运行项目会报错,这里推荐 @4.5.15

1

npm install -g @vue/cli

로그인 후 복사

创建项目,后面是你的项目名字。

1

vue create -p dcloudio/uni-preset-vue uni_vue2_cli

로그인 후 복사

这里我们选择默认模板

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

在VSCode打开这个项目,可以看看整个项目项目结构,src下项目结构跟HbuilderX创建的根目录基本一样,说明两种项目转换还是比较方便的。

提示:既然是Vue2项目,有scss文件,那肯定要装vetursass这两个插件吧,不会有人还没有装吧。

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

tsconfig.json报错问题

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

创建tsconfig.json配置文件时,VSCode会自动检测当前项目当中是否有ts文件,若没有则报错,提示用户需要创建一个ts文件后,再去使用typescript。其实即使报红,但运行项目是没有问题的,但有强迫症的人肯定受不了,不可能一直看着报错吧。

解决方案很简单,就是在项目根目录下,随便建一个ts文件,不用写任何东西,然后在tsconfig.json配置 files 这个就好了。

我们在项目根目录下新建一个puppet.ts,puppet:傀儡的意思,哈哈,这里名字可以自己随便起。

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

tsconfig.json

1

2

3

4

5

6

{

  "compilerOptions": {

    "types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"]

  },

  "files": ["puppet.ts"]

}

로그인 후 복사

增强pages.json和manifest.json开发体验

json文件写注释

我们打开pages.jsonmanifest.json,发现会报红,这是因为在json中是不能写注释的,而在jsonc是可以写注释的。

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

解决方案:我们把pages.jsonmanifest.json这两个文件关联到jsonc中,然后就以写注释了。在设置中打开settings.json"]

VSCode도 사용합니다 주로 작은 프로그램을 작성하는 여러 uni-app 프로젝트를 수행했는데 전반적인 경험이 매우 좋습니다. VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)

VSCode에서 uni-app을 개발하는 방법은 무엇입니까? (튜토리얼 공유)🎜🎜< Strong> 이 튜토리얼이 VSCode 개발 uni-app🎜
관련 라벨:
원천:juejin.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿