YouTip

UniApp is a framework for developing all front-end applications using Vue.js. Developers write one set of code that can be published to iOS, Android, Web (responsive), and various mini-programs (WeChat/Alipay/Baidu/Toutiao/Feishu/QQ/Kuaishou/DingTalk/Taobao), quick apps, and multiple other platforms. uni-app supports quickly creating projects through two methods: visual interface and vue-cli command line. * * * ## HBuilderX Development Tool Installation and Configuration `HBuilderX`, where H stands for the first letter of HTML, Builder means constructor, and X is the next generation version of HBuilder. We also abbreviate it as `HX`. `HX` is a combination version that is **as light as an editor and as powerful as an IDE**. HBuilderX has built-in related environments, ready to use out of the box, without needing to configure nodejs. **Download and Installation:** 1. Visit the official website: [https://www.dcloud.io/hbuilderx.html](https://www.dcloud.io/hbuilderx.html) 2. Select the version suitable for your operating system (Windows/macOS/Linux) !(#) After downloading and installing, we can set our preferred theme: !(#) ### Creating UniApp Click File -> New -> Project in the toolbar (shortcut Ctrl+N): !(#) Select the uni-app type, enter the project name, select a template, and click Create to successfully create the project. !(#) The templates that come with uni-app include: default empty project template, Hello uni-app official components and API examples, and another important template is the uni ui project template. For daily development, it is recommended to use this template, which already has a large number of commonly used components built-in. ### Running uni-app Browser run: Enter the project, click Run in the toolbar -> Run to Browser -> Select Browser, choose Chrome, or other browsers, to experience the web version of uni-app. !(#) Run App to phone or emulator: Connect the phone using a USB port with sufficient voltage, enable USB debugging in settings, allow the computer device to debug the phone on the phone, enter the project, click Run in the toolbar -> Run App to Phone or Emulator, to experience uni-app on that device. !(#) Run in WeChat Developer Tools: Enter the project, click Run in the toolbar -> Run to Mini Program Simulator -> WeChat Developer Tools, to experience uni-app in WeChat Developer Tools. !(#) **Note:** If this is the first time using it, you need to configure the relevant paths of the mini program IDE first to run successfully. As shown below, you need to enter the installation path of WeChat Developer Tools in the input box. !(#) **Note:** WeChat Developer Tools needs to enable the service port in WeChat Tools Settings -> Security. Run in Alipay Mini Program Developer Tools: Enter the project, click Run in the toolbar -> Run to Mini Program Simulator -> Alipay Mini Program Developer Tools, to experience uni-app in Alipay Mini Program Developer Tools. !(#) Run in Baidu, Douyin, QQ, Quick App (divided into Alliance and Huawei), Kuaishou, Feishu, 360, JD, and other mini program development tools: The content is the same as above, not repeated. **Note:** * If this is the first time using it, you need to configure the relevant paths of the development tools. Click Run in the toolbar -> Run to Mini Program Simulator -> Run Settings, to configure the paths of the corresponding mini program developer tools. * WeChat Mini Program tools need to configure allowed permissions, otherwise HBuilder cannot call the command line of WeChat Mini Program development tools * Alipay/Baidu/Douyin/360 Mini Program tools do not support directly specifying the project to start and run. Therefore, after the development tool starts, please open the project path prompted in the HBuilderX console in the corresponding mini program developer tools. * If automatically starting the mini program development tool fails, please manually start the mini program development tool and open the project path prompted in the HBuilderX console. The shortcut key for running is Ctrl+R. HBuilderX also provides a quick run menu, where you can quickly select the device to run by pressing numbers: !(#) * * * ## Vue cli Command Creation In addition to the HBuilderX visual interface, you can also create uni-app projects through vue-cli. ### Creating uni-app #### Creating vue3 project Create a project developed with javascript: npx degit dcloudio/uni-preset-vue#vite my-vue3-project npx degit dcloudio/uni-preset-vue#vite-alpha my-vue3-project Create a project developed with typescript npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project #### Creating vue2 project Need to install vue-cli globally npm install -g @vue/cli Use the official version (corresponds to the latest official version of HBuilderX) vue create -p dcloudio/uni-preset-vue my-project Use the alpha version (corresponds to the latest alpha version of HBuilderX) vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project At this point, it will prompt you to select a project template (using Vue3/Vite version will not prompt, currently only supports creating default template). For the first experience, it is recommended to select the hello uni-app project template, as shown below: !(#) * * * More content reference: * [https://zh.uniapp.dcloud.io/quickstart-hx.html](https://zh.uniapp.dcloud.io/quickstart-hx.html) * [https://zh.uniapp.dcloud.io/quickstart-cli.html](https://zh.uniapp.dcloud.io/quickstart-cli.html)