Home > Web Front-end > uni-app > body text

How to run uniapp with command

PHPz
Release: 2023-04-20 14:06:23
Original
3973 people have browsed it

With the continuous development of mobile Internet, Hybrid applications are attracting more and more attention. Against this background, various new development frameworks have emerged. As a new hybrid development framework, Uniapp naturally attracts the attention of developers. Uniapp provides a way to quickly develop cross-platform applications, allowing developers to write code once and publish applications on multiple platforms, including iOS, Android, H5, etc. If you are not familiar with Uniapp yet, you can refer to the official website documentation first. This article will introduce how to run Uniapp using commands.

Uniapp CLI

Uniapp CLI is the command line tool for Uniapp. It provides a series of commands for building, running and debugging Uniapp applications. Through the Uniapp CLI, developers can develop and test applications locally and then package them for release to different platforms.

Install Uniapp CLI

Using Uniapp CLI requires installation first. Uniapp CLI supports global installation and local installation. Normally, we recommend using the Uniapp CLI through a global installation so that we can develop in any project folder.

The global installation command is as follows:

npm install -g @vue/cli
Copy after login

The local installation command is as follows:

npm install @vue/cli --save-dev
Copy after login

It should be noted that before using Uniapp CLI, make sure that the Node.js environment has been installed.

Create a project through Uniapp CLI

After installing Uniapp CLI, we can use it to create a new Uniapp project. Use the following command:

vue create -p dcloudio/uni-preset-vue my-project
Copy after login

Here, we are using a preset option, which is uni-preset-vue. This refers to Uniapp’s official preset Vue template. By using this preset option, we can quickly create a Vue-based Uniapp project.

After entering this command, some configuration options will appear. Select the corresponding options to create a new Uniapp project.

Run the Uniapp project

After creating the new Uniapp project, we can run the project through the Uniapp CLI. Use the following command:

npm run dev:%PLATFORM%
Copy after login

where %PLATFORM% refers to the corresponding target platform. This can be any of the following:

  • mp-weixin: WeChat applet
  • mp-alipay: Alipay applet
  • mp-baidu: Baidu Mini Program
  • mp-toutiao: Toutiao Mini Program
  • h5: Web page operation

For example, to run the project on the WeChat applet, you can execute the following command:

npm run dev:mp-weixin
Copy after login

This command will start the development server and then open the corresponding address in the browser . The development server monitors file changes and recompiles the application and refreshes the browser page.

Package and publish the Uniapp project

After running the Uniapp project, we can package and publish the application. Use the following command:

npm run build:%PLATFORM%
Copy after login

Same as the run project command, where %PLATFORM% refers to the target platform. Likewise, we must set the platform parameters to compile and push the application. For example, to create a production version of a WeChat applet, you can first package it with the following command:

npm run build:mp-weixin
Copy after login

This command will package the application into a production version of the WeChat applet and add the generated code and resource files Save to destination folder. We can upload the folder to the WeChat Mini Program Developer Platform to publish the application.

Summary

With the Uniapp CLI, we can use commands to run and build Uniapp applications. Through the above introduction, I hope readers can understand the basic usage of Uniapp CLI and be able to successfully use this tool to develop, test and publish Uniapp applications.

The above is the detailed content of How to run uniapp with command. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template