How to quickly build a uni-app project? Two construction methods are shared

How to quickly build a uni-app project? The following article will introduce you to two methods of building a uni-app project from scratch. I hope it will be helpful to you!

uni-app is a front-end framework that uses Vue.js to develop cross-platform applications. Developers write a set of codes that can be compiled to iOS, Android, H5, small programs and other platforms.

Method 1: Use HBuilderX to quickly develop and run

Step 1: Prepare the HbuilderX tool

The uni-app official website has relevant introductions. You need to download the app development version of the HbuilderX tool.

Step 2: Create a new uni-app project and select the empty project.

The folder structure in the default template project of uni-app is as follows:

• pages---Used to store the page file path;
• static---Referenced static resource directory, such as pictures, videos and other files;
• App.vue --- Application configuration, used to configure global styles and monitoring files;
• main.js---- Vue initialization entry file;
• mainfest.json----Configure application name, Appid, logo, version and other packaging information files;
• pages.json---- Configure page routing, navigation bar, tab and other page information files.

Step 3: Run the project.

Click the [Run] option in the toolbar and select a different running environment in the drop-down box. You can refer to the official website for steps.

Because the latest project is on the WeChat side, here we will introduce the relevant matters related to the operation of the WeChat side.

Run in the WeChat Developer Tools: Enter the hello-uniapp project, click Run on the toolbar -> Run to the mini program simulator -> WeChat Developer Tools, you can run it in the WeChat Developer Tools Experience uni-app.

Note: If it is the first time to use it, you need to configure the relevant path of the mini program ide before it can run successfully. In HbuilderX, you need to go to Tools->Configuration->Run Configuration, find the mini program running configuration, and copy the WeChat developer tool path into it.

Method 2: Use scaffolding to quickly build and develop

• Global Installation: npm i -g @vue/cli (you can skip this step if you have installed it before ->2): Because uni-app is based on vue3.0 or above, you need to update vue to the appropriate version;

• Create project: vue create -p dcloudio/uni-preset-vue my-project (the name of the project you created)

Follow the prompts and enter directly;

• to start (WeChat Mini Program): npm run dev:mp-weixin

• WeChat Mini Program Developer Tools Import projects: Mini program projects need to be imported manually.

Recommended: "uniapp tutorial"

The above is the detailed content of How to quickly build a uni-app project? Two construction methods are shared. For more information, please follow other related articles on the PHP Chinese website!