vscode가 uni-app을 사용할 수 있나요?

vscode는 다음과 같은 특정 방법인 uni-app을 사용할 수 있습니다. 1. vue 구문 프롬프트 플러그인 vetur를 설치합니다. 2. "npm i @dcloudio/uni-helper-json" 명령을 실행하여 구성 요소 구문 프롬프트를 설치합니다. . HBuilderX를 다운로드하고 가져옵니다. uni-app 코드로 충분합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, Visual Studio Code 버전 1.45.1.0, DELL G3 컴퓨터.

uni-app은 vue 구문을 사용하여 작은 프로그램, 앱 및 H5를 개발하는 프레임워크입니다. 공식적으로 권장되는 개발 도구는 좋은 개발 경험을 제공하는 HBuilderX입니다.

그러나 HBuilderX에는 Linux 버전이 없고 많은 프런트 엔드가 이전에 vscode에 익숙했기 때문에 편집기 변경을 원하지 않습니다. uni-app을 개발하기 위해 vscode를 직접 사용하는 경험은 그리 좋지 않습니다.

사실 uni-app과 vscode도 잘 어울릴 수 있어요. 다음으로는 vscode에서 uni-app의 올바른 여는 자세를 보여드리겠습니다.

CLI 프로젝트

전역적으로 vue-cli 3.x 설치(이미 설치한 경우 이 단계 건너뛰기)

npm install -g @vue/cli

CLI를 통해 uni-app 프로젝트 만들기

vue create -p dcloudio/uni-preset-vue my-project

이제 다음을 선택하라는 메시지가 표시됩니다. 프로젝트 템플릿, 처음 경험하는 경우 아래와 같이 hello uni-app 프로젝트 템플릿을 선택하는 것이 좋습니다. hello uni-app 项目模板，如下所示：

在vscode中打开项目

安装vue语法提示插件vetur

CLI 工程默认带了uni-app语法提示和5+App语法提示

安装组件语法提示

组件语法提示是uni-app的亮点，其他框架很少能提供。

npm i @dcloudio/uni-helper-json

导入 HBuilderX 自带的代码块

从 github 下载 uni-app 代码块，放到项目目录下的 .vscode 目录即可拥有和 HBuilderX 一样的代码块。

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM%

vscode에서 프로젝트 열기vue 구문 프롬프트 플러그인 설치 vetur< img src="https://img.php.cn/ upload/image/992/113/845/1632906313589880.png" title="1632906313589880.png" alt="vscode가 uni-app을 사용할 수 있나요?"/>컴포넌트 구문 팁 설치컴포넌트 구문 힌트는 다른 프레임워크에서는 거의 제공할 수 없는 uni-app의 하이라이트입니다.

npm init -y

HBuilderX 가져오기 내장 코드 블록프로젝트 실행

npm i @types/uni-app @types/html5plus -D

rrreee

CLI 프로젝트는 다음과 함께 제공됩니다. 기본적으로 uni-app 구문 프롬프트 및 5+App 구문 프롬프트
	github에서 uni-app 코드 블록을 다운로드하고 프로젝트 디렉토리의 .vscode 디렉토리는 HBuilderX와 동일한 코드 블록을 가질 수 있습니다.
< img src="https://img.php.cn/upload/image/257/712/547/163290636112771vscode가 uni-app을 사용할 수 있나요?" title="163290636112771vscode가 uni-app을 사용할 수 있나요?" alt="vscode가 uni-app을 사용할 수 있나요?"/>
Publish 프로젝트	%PLATFORM% 가능한 값은 다음과 같습니다.

🎜value🎜🎜Platform🎜🎜🎜🎜🎜🎜h5🎜🎜H5🎜🎜🎜🎜mp- 알리페이🎜 🎜 Alipay 미니 프로그램🎜 🎜🎜🎜mp-baidu🎜🎜Baidu 애플릿🎜🎜🎜🎜mp-weixin🎜🎜WeChat 애플릿🎜🎜🎜🎜mp-toutiao🎜🎜Toutiao 애플릿🎜🎜 🎜🎜mp-qq🎜🎜 qq 애플릿🎜🎜 🎜 🎜

CLI 方式参考文档

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装

初始化npm（如已初始化跳过此步骤）

npm init -y

安装 uni-app 语法提示

npm i @types/uni-app @types/html5plus -D

另外，uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

关于uni-app插件市场的插件，vscode一样可以使用。

• 如果这些插件有npm使用方式（如uni-ui），可以用npm
• 如果作者没提供npm方式，那么下载zip包解压也是可以用的

【相关推荐：《uniapp教程》、《vscode教程》】

위 내용은 vscode가 uni-app을 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!