> 웹 프론트엔드 > uni-app > 명령으로 uniapp을 실행하는 방법

명령으로 uniapp을 실행하는 방법

PHPz
풀어 주다: 2023-04-20 14:06:23
원래의
4017명이 탐색했습니다.

모바일 인터넷의 지속적인 발전과 함께 하이브리드 애플리케이션이 점점 더 주목받고 있습니다. 이러한 배경에서 다양한 새로운 개발 프레임워크가 등장했습니다. 새로운 하이브리드 개발 프레임워크로서 Uniapp은 자연스럽게 개발자들의 관심을 끌고 있습니다. Uniapp은 크로스 플랫폼 애플리케이션을 빠르게 개발할 수 있는 방법을 제공하므로 개발자는 한 번 코드를 작성하고 iOS, Android, H5 등을 포함한 여러 플랫폼에 애플리케이션을 게시할 수 있습니다. 아직 유니앱에 대해 잘 모르신다면 공식 홈페이지 문서를 먼저 참고하시면 됩니다. 이 기사에서는 명령어를 사용하여 Uniapp을 실행하는 방법을 소개합니다.

Uniapp CLI

Uniapp CLI는 Uniapp의 명령줄 도구입니다. Uniapp 애플리케이션을 빌드, 실행 및 디버깅하기 위한 일련의 명령을 제공합니다. Uniapp CLI를 통해 개발자는 애플리케이션을 로컬에서 개발 및 테스트한 다음 다른 플랫폼에 출시하기 위해 패키징할 수 있습니다.

Uniapp CLI 설치

Uniapp CLI를 사용하려면 먼저 설치가 필요합니다. Uniapp CLI는 글로벌 설치와 로컬 설치를 지원합니다. 일반적으로 어떤 프로젝트 폴더에서도 개발이 가능하도록 전역 설치를 통해 Uniapp CLI를 사용하는 것을 권장합니다.

전역 설치 명령은 다음과 같습니다.

npm install -g @vue/cli
로그인 후 복사

로컬 설치 명령은 다음과 같습니다.

npm install @vue/cli --save-dev
로그인 후 복사

Uniapp CLI를 사용하기 전에 Node.js 환경이 설치되어 있는지 확인해야 합니다.

Uniapp CLI를 통해 프로젝트 생성

Uniapp CLI를 설치한 후 이를 사용하여 새로운 Uniapp 프로젝트를 생성할 수 있습니다. 다음 명령을 사용하세요:

vue create -p dcloudio/uni-preset-vue my-project
로그인 후 복사

여기에서는 uni-preset-vue라는 사전 설정 옵션을 사용하고 있습니다. 이는 Uniapp의 공식 사전 설정 Vue 템플릿을 나타냅니다. 이 사전 설정 옵션을 사용하면 Vue 기반 Uniapp 프로젝트를 빠르게 만들 수 있습니다. uni-preset-vue。这是指 Uniapp 官方预设的 Vue 模板。通过使用该预设选项,我们可以快速创建一个基于 Vue 的 Uniapp 项目。

在输入该命令后,会出现一些配置选项,选择对应好的选项即可建立新的 Uniapp 项目。

运行 Uniapp 项目

建立好新的 Uniapp 项目后,我们就可以通过 Uniapp CLI 运行该项目了。使用以下命令:

npm run dev:%PLATFORM%
로그인 후 복사

其中 %PLATFORM% 指的是对应的目标平台。这可以是以下任意一个:

  • mp-weixin: 微信小程序
  • mp-alipay: 支付宝小程序
  • mp-baidu: 百度小程序
  • mp-toutiao: 头条小程序
  • h5: 网页运行

例如,要在微信小程序上运行该项目,可执行以下命令:

npm run dev:mp-weixin
로그인 후 복사

该命令会启动开发服务器,然后在浏览器中打开对应地址。开发服务器会监视文件变化,并重新编译应用程序及刷新浏览器页面。

打包发布 Uniapp 项目

运行完 Uniapp 项目后,我们就可以打包并发布该应用了。使用以下命令:

npm run build:%PLATFORM%
로그인 후 복사

和运行项目命令一样,这里 %PLATFORM%

이 명령을 입력하면 일부 구성 옵션이 표시되며 해당 옵션을 선택하여 새 Uniapp 프로젝트를 만듭니다.

Uniapp 프로젝트 실행

새로운 Uniapp 프로젝트를 생성한 후 Uniapp CLI를 통해 프로젝트를 실행할 수 있습니다. 다음 명령을 사용하세요.

npm run build:mp-weixin
로그인 후 복사
여기서 %PLATFORM%는 해당 대상 플랫폼을 나타냅니다. 다음 중 하나일 수 있습니다. 🎜
  • mp-weixin: WeChat 애플릿
  • mp-alipay: Alipay 애플릿li>
  • mp-baidu: Baidu 애플릿
  • mp-toutiao: Toutiao 애플릿
  • h5: 웹 페이지 작업
🎜예를 들어 WeChat 애플릿에서 프로젝트를 실행하려면 다음 명령을 실행할 수 있습니다. 🎜rrreee🎜이 명령은 개발 서버를 시작한 후 다음을 실행합니다. 브라우저에서 프로젝트 해당 주소를 엽니다. 개발 서버는 파일 변경 사항을 모니터링하고 애플리케이션을 다시 컴파일하며 브라우저 페이지를 새로 고칩니다. 🎜🎜Uniapp 프로젝트 패키징 및 게시🎜🎜Uniapp 프로젝트를 실행한 후 애플리케이션을 패키징하고 게시할 수 있습니다. 다음 명령을 사용하세요: 🎜rrreee🎜 프로젝트 실행 명령과 동일합니다. 여기서 %PLATFORM%는 대상 플랫폼을 나타냅니다. 마찬가지로 애플리케이션을 컴파일하고 푸시하려면 플랫폼 매개변수를 설정해야 합니다. 예를 들어 WeChat 애플릿의 프로덕션 버전을 생성하려면 먼저 다음 명령을 사용하여 패키지할 수 있습니다. 🎜rrreee🎜이 명령은 애플리케이션을 WeChat 애플릿의 프로덕션 버전으로 패키징하고 생성된 코드와 리소스 파일을 대상 파일이 고정되었습니다. 이 폴더를 WeChat Mini 프로그램 개발자 플랫폼에 업로드하여 애플리케이션을 게시할 수 있습니다. 🎜🎜요약🎜🎜Uniapp CLI를 사용하면 명령을 사용하여 Uniapp 애플리케이션을 실행하고 빌드할 수 있습니다. 위의 소개를 통해 독자들이 Uniapp CLI의 기본 사용법을 이해하고 이 도구를 성공적으로 사용하여 Uniapp 애플리케이션을 개발, 테스트 및 게시할 수 있기를 바랍니다. 🎜

위 내용은 명령으로 uniapp을 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿