uni-app component - application is simple and fast online

Introduction: uni-app is a framework for developing all front-end applications using Vue.js. Developers write a set of codes that can be published to iOS, Android, Web (responsive), and various small programs (WeChat/Alipay/Baidu/ Toutiao / Feishu / QQ / Kuaishou / Dingding / Taobao), Quick Apps and other platforms.

uni-app details

1. Introduction

uni-app is a framework for developing all front-end applications using Vue.js(opens new window) . Developers write a set of codes that can be published to iOS, Android, Web (responsive), and various small programs (WeChat/Alipay). /Baidu/Toutiao/Feishu/QQ/Kaishou/Dingding/Taobao), Quick Apps and other platforms.

The bottom layer of uni-app integrates native technology, that is, the h5+ engine, which can call the native api of mobile phones, so uniapp can develop apps with close to native performance, which is the part of the js engine; it is a dual engine, and the rendering is an independent engine. This rendering engine is further divided into nvue rendering and webview rendering. nvue is actually an integrated weex. Those who know webview should know that its core is webkit.

Second, the difference between uni-app and vue:

• Uni-app can implement a set of code to run at multiple ends by packaging, but vue cannot.
• uni-app has automatic frame preloading, which loads pages faster, vue doesn't.
• Uniapp uses the label of the applet, and Vue uses the label of the web side.
• uni does not support vue-router and uses its own routing.

Three, uni-app advantages:

• uni-app is a set of open source frameworks that can be applied to multiple terminals. A set of codes can generate ios, Android, H5, WeChat applet, Alipay applet, Baidu applet, etc. at the same time.
• uni-app is more friendly to front-end developers, and the learning cost is relatively low. First of all, uni-app is based on vue.js. Secondly, the packaged components are the same as those of the WeChat applet.
• uni-app uses HBX for development, and HBX can be said to be relatively complete in support of vue syntax.

The following sections teach you to build your own app from scratch using the Vue CLI and the cloud development platform, respectively.

Vue-CLI to quickly build a project

1. Build a local development environment

• Vue CLI 4.x requires Node.js 8.9 or higher (v10+ recommended). You can manage multiple versions of Node on the same machine using n, nvm or nvm-windows. To learn how to install Node.js, see nodejs.org . If you're not sure what version of Node.js is running on your system, run node -v in a terminal window.

• npm package manager Because we usually use the scaffolding provided by Hexo to build the project structure, we need to download and install the npm package. This guide uses the npm client command line interface, which is installed by default in Node.js. To check if you have the npm client installed, run npm -v in a terminal window.

• You can use the Vue CLI to create projects, generate application and library code, and perform various continuous development tasks such as testing, packaging, and deployment.

To install new packages, use one of the following commands:

npm install -g @vue/cli@4

2. Create uni-app

• Use the official version (corresponding to the latest official version of HBuilderX)

vue create -p dcloudio/uni-preset-vue my-project

• Use the alpha version (corresponding to the latest alpha version of HBuilderX)

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

• Use Vue3/Vite version

1. Create a project developed with javascript (if the command line fails to create, please visit gitee(opens new window) directly to download the template)

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

2. Create a project developed with typescript (if the command line fails to create, please visit gitee(opens new window) directly to download the template)

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

At this point, you will be prompted to select a project template (the Vue3/Vite version will not prompt, currently only the default template can be created). It is recommended to select the hello uni-app project template for the first experience, as shown below:

3. Start the application server

Go to the workspace directory and start the application.

cd my-project

yarn serve

The hexo server command will build the application, start the development server, listen to source files, and rebuild the application when those files change,

Also open a browser and visit http://localhost:8080/ .

You will find the application is running in the browser.

References: https://uniapp.dcloud.io/

One-click deployment of uni-app on cloud platform

As a uni-app developer, the cloud development platform provides you with a one-stop, all-cloud development platform, allowing you to open a browser to complete development, debugging, and launch. At the same time, the bottom layer of the cloud development platform calls Alibaba Cloud The Group's serverless products can realize low-threshold development, deployment, and debugging, reduce development costs, and allow the uni-app framework to be quickly deployed with one click!

1. Create an environment

To deploy uni-app with one click, the following accounts and services are required:

• Github account ( https://github.com/ ),
• Alibaba Cloud account, and use the Alibaba Cloud account to log in to the cloud development platform ( https://workbench.aliyun.com/ ). To ensure the best user experience, please use the Chrome browser. Activate the OSS service.
• Users who have not activated Alibaba Cloud OSS can click the link ( https://workbench.aliyun.com/product/open?code=oss ) to activate the OSS service. OSS is free to activate, and there is a certain free quota. After the quota is exceeded, you will pay according to the amount.

2. Create a uni-app application

• Create front-end applications. Open the quick start https://workbench.aliyun.com/app , find uni-app and click the "Create App" button.

• Cloud resource access authorization. If you have not used the cloud development platform before, the option of cloud resource authorization management will appear. Pull down until the words agree to authorization appear. Click "Agree to Authorize" and the authorization is successful. Click to enter "Next".

• Bind Github account. After the authorization is completed, select the source repository as Github, follow the prompts to click to bind, bind the GitHub account, log in and click Authorize Aliyunworkben to allow the cloud development platform to build and publish your GitHub code as an accessible website.

• Select the forked "uni-app" repository. Select the code repository in the first step, the main branch, and click Next. Trunk branches generally refer to branches such as master or main of the code.

Fill in the basic information to complete the creation. Fill in the basic information and click "Finish". After success, enter the application details and deployment interface.

3. Deployment in daily environment

• One-click application deployment. On the application details page, click the "Deploy" button in the daily environment to perform one-click deployment. After the deployment status becomes green and deployed, you can click to visit the deployment website to view the effect.

• Visit the uni-app website . The test domain name of the daily environment is also accessible. Click the button to access the deployed website and a pop-up will appear. Click the immediate access on the pop-up to access the deployed site. After the deployment is complete, you can continue local coding and push the code to the corresponding code repository in the "Basic Information" of the application.

One-click cloud access for multi-terminal applications!

In today's environment where new situations can come at any time, being yourself is building a pine tree that will not fall in the midst of unease. As developers face new codes and applications every day, maintaining the state and ability to learn at any time can also give you more stability. The original intention of Alibaba Cloud Cloud Development Platform is to provide every developer with a free and convenient cloud R&D work platform. Through two modes of learning and practical exercises, from entry to mastery, you can quickly get started with serverless and cloud development technologies. Features such as 0 threshold full cloud development, online collaboration anytime, anywhere, industry-leading serverless architecture, and one-piece initialization of industry applications also accompany you and me through every practice.

The three major sectors of cloud native application, host application deployment, and front-end application deployment are provided for developers to find the most suitable artifact for themselves, making development work more efficient with less effort. Among them, it meets the needs of low-threshold application development of developers such as IoT voice skills, small programs, and H5 applications; it also supports the scenario of code compilation and deployment to the ECS host server, helping users manage the ability of traditional host applications; enabling front-end and back-end applications to be more efficient. Synergy. The platform will continue to grow together with developers to help developers develop better, faster and at lower cost, and multi-terminal applications can be migrated to the cloud more quickly.

Copyright statement: The content of this article is contributed by Alibaba Cloud's real-name registered users. The copyright belongs to the original author. The Alibaba Cloud developer community does not own the copyright and does not assume the corresponding legal responsibility. For specific rules, please refer to the "Alibaba Cloud Developer Community User Service Agreement" and "Alibaba Cloud Developer Community Intellectual Property Protection Guidelines". If you find any content suspected of plagiarism in this community, fill out the infringement complaint form to report it. Once verified, this community will delete the allegedly infringing content immediately.