>개발 도구 >VSCode >vscode가 uni-app을 사용할 수 있나요?

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

青灯夜游
青灯夜游원래의
2021-09-29 17:14:5313435검색

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

vscode가 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가 uni-app을 사용할 수 있나요?

在vscode中打开项目

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

安装vue语法提示插件vetur

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

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

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

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

安装组件语法提示

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

npm i @dcloudio/uni-helper-json

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

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

导入 HBuilderX 自带的代码块

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

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

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

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

运行项目

npm run dev:%PLATFORM%

发布项目

npm run build:%PLATFORM%

%PLATFORM%

vscode가 uni-app을 사용할 수 있나요?vscode에서 프로젝트 열기vue 구문 프롬프트 플러그인 설치 veturvscode가 uni-app을 사용할 수 있나요?컴포넌트 구문 팁 설치컴포넌트 구문 힌트는 다른 프레임워크에서는 거의 제공할 수 없는 uni-app의 하이라이트입니다.
npm init -y
HBuilderX 가져오기 내장 코드 블록vscode가 uni-app을 사용할 수 있나요?프로젝트 실행
npm i @types/uni-app @types/html5plus -D
rrreee
vscode가 uni-app을 사용할 수 있나요?
CLI 프로젝트는 다음과 함께 제공됩니다. 기본적으로 uni-app 구문 프롬프트 및 5+App 구문 프롬프트 vscode가 uni-app을 사용할 수 있나요?
vscode가 uni-app을 사용할 수 있나요? vscode가 uni-app을 사용할 수 있나요?
github에서 uni-app 코드 블록을 다운로드하고 프로젝트 디렉토리의 .vscode 디렉토리는 HBuilderX와 동일한 코드 블록을 가질 수 있습니다.
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 编辑器打开。

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

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

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

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

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

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

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

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

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.