Mainly the development environment and framework related to vue2.
Personal selection plan
Combined with its own knowledge system (vue2, webstorm), and based on the understanding of the relevant framework, the following solutions were selected:
Development environment: HBuilder X + Webstorm
Framework: Uni-app (NVue) + Vue2
uniapp + hbuilderx developed by webstorm for app applet packaging
-
Create uni-app project using vue2 CLI
Vue2 environment, node.js, cli scaffolding must be available, so I won’t go into details here.
The template name is fixed and must be entered: dcloudio/uni-preset-vue
Create a new directory, and the window terminal executes the following statement
vue create -p dcloudio/uni-preset-vue my-project
(if there is an existing project, directly npm install after cd)
Here I have chosen: default template, vue2 used by the default template,
If selected: Hello uni-app template. used vue3
The creation of the uniapp vue project is complete.
In this way, the uni-app project created through the terminal, the node_module directory on webstorm is the same as the regular web project, and can be directly debugged and run on webstorm during the entire development period:
Run the project on the webstorm terminal, only the web effect on the mobile phone:
npm run dev:h5
Note:
If you want to see the effect of the WeChat applet or the android app, then you need to run it with HBuiler. The project created in the above way can also run normally in HBuiler. Next, we will introduce the combination of HBuilder to compile, run and package.
HBuilderX environment configuration
HBuilerX installation
Download and install from the official website. After the installation is complete, enter Dcloud to register an account: DCloud - HBuilder, HBuilderX, uni-app, uniapp, 5+, 5plus, mui, wap2app, stream application, HTML5, small program development, cross-platform App, multi-terminal Framework uni-app multi-terminal development, develop once and generate App, applet, H5 at the same time 
https://dcloud.io/
Mobile phone number authentication is required before running packaging - authentication page:
Import the official Demo project source code/or the project created above:
- Import the above command to create the project
Guide to the official hello-uniapp DEMO project
Download the source code:
https://github.com/dcloudio/hello-uniappSometimes GitHub can't open, backup
hello-uniapp: Uniapp official demo
The uniapp project is packaged into an android APK
After the project import is complete, package the native APP apk installation package in HBuilerX: Build=>Mobile App Cloud packaging.
The current project is packaged for the first time, and no AppID is configured. Click Modify manifest.json to configure an appropriate AppID generated by DClound's own account. Click while logged in: Reacquire is automatically generated. Then save and return to the packaging interface
solve:
Annotate the Read_contacts permission
Install to phone:
After the packaging is complete, open the APK directory, right-click and choose to install on the real phone.
The uniapp project is packaged and run as a WeChat applet
First: download and install the WeChat developer tool , and then this developer tool needs to register a developer account on other websites, otherwise the program will not run.
Open HBuilerX to create uniapp with scaffolding or use the official hello uniapp project,
If it is the first time to run the WeChat applet, here HBuilder needs to configure the developer tools installation directory exe. Only in this way can the corresponding WeChat applet interface be opened automatically.
The opening is successful, and the WeChat applet developer tool interface is as follows:
The uniapp project is packaged and run as a PC web page
This is the easiest, as long as there is a browser, it is OK
Open run complete.
HBuilderX and WebStorm cooperate to develop uni_app
I am used to webstorm,
Based on webstorm+hbuilderX two compilers combined to develop uni-app program
Use the above operation scheme (scaffolding to create Webstorm development + HBuilder packaging):
Create a uniapp project with cmd command scaffolding, and then run html5 debugging and development on webstrom.
However, only HBuilder can be used for packaging into applets and Android APP (apk).
The latest version of Hbuilder X creates uni-app projects:
[Using the Vite method to create] the package.json file cannot be generated, and the node_modules library will not be automatically installed. For this reason, the uni-app created by [Hbuilder X] cannot be compiled normally in webstorm!
In order to support the development and compilation of webstorm+hbuilderX at the same time, please use vue-cli3 scaffolding to create a Vue3 initial project, then copy the [package.json] file to uni-app, and execute [npm install] at this time webstorm can develop uni-app normally
Note: Although webstorm cannot compile and run the uni-app project normally, webstorm is much more convenient for the [Ctrl+B] jump path, and the second is to define ESlint rules in [package.json], which is much more convenient !
This program runs and is packaged in:
HBuilder X
expand
Distinguish between PC and mobile technologies:
PC端 ： For VUE+ element
Mobile terminal: Uni-app applet + Vant weapp component
uni-app
uni-app is a new generation of cross-terminal framework produced by DCloud. It can be said to be one of the frameworks with the largest number of cross-terminals. Currently, it supports publishing to: App (Android/iOS), H5, applets (WeChat applets/Alipay applets) /Baidu Mini Program/Byte Beat Mini Program), there are currently similar frameworks on the market: Taro (produced by JD.com), Megalo (produced by NetEase).
To put it bluntly, the nvue of uni-app is the set of weex. The uni-app app has a built-in native rendering engine based on weex SDK improvement, which provides and realizes the native rendering capability of the app.
Most of the things supported by weex are supported in nvue, so we will not describe the related components and api calls of weex in detail here, but only describe some minor problems encountered in the actual development process.
The noise
It is the abbreviation of native vue, which is a rendering method of uni-app.
Nvue uses the native rendering of weex method. The css writing method of nvue is limited. The nvue page can only use flex layout and does not support other layout methods. If you do not develop APP, you do not need to use nvue; Weex rendering: Weex uses the popular A framework for developing high-performance native applications with a web development experience.
The vue file is rendered by webview. Webview is a webkit-based engine that can parse DOM elements and display HTML page controls. Its principle of displaying pages is the same as that of browsers, so it can be regarded as a browser.
Introduction to weex
Weex is a set of easy-to-use cross-platform development solutions that can build high-performance, scalable native applications with web development experience. In order to achieve this, Weex cooperates with Vue, uses Vue as the upper framework, and implements it in accordance with W3C standards Unified JSEngine and DOM API, so that you can even use other frameworks to drive Weex to create native applications with three terminals consistent.
The difference between nvue and vue:
Nvue is the abbreviation of native vue, which is a rendering method of uni-app.
Nvue uses the native rendering of the weex method. The css writing method of nvue is limited. The nvue page can only use flex layout and does not support other layout methods. If you do not develop an APP, you do not need to apply nvue. Weex Rendering: Weex is a framework for developing high-performance native applications using the popular web development experience.
Vue files are rendered with webview. Webview is a webkit-based engine that can parse DOM elements and display HTML page controls. Its principle of displaying pages is the same as that of browsers, so it can be regarded as a browser.
MintUI
Mint UI is a mobile UI component library produced by the front-end team of Ele.me.
Based on Vue 2.0, it is another excellent open source UI component library after the desktop UI component library Element UI. It contains rich CSS and JS components, which can quickly build pages with a unified style and improve development efficiency.
Like Bootstrap, the native HTML tags are encapsulated and beautified, allowing us to focus on business logic rather than UI interface.
Mint UI component library features
- The UI design style is neutral, and it can adapt to many product projects without changing the style
- lightweight. Relying on the efficient componentization scheme of Vue.js, Mint UI is lightweight. Even if all components are introduced, the compressed file size is only about 30kb (gzip)
- Excellent performance. Various dynamic effects are processed by CSS3 to avoid unnecessary redrawing and rearrangement of the browser, so as to obtain a smooth and smooth experience
- Load components on demand. Support only loading declared components and their style files, small and medium projects can greatly reduce the packaging volume
- Official documentation: mint-ui documentation
Vant
Youzan’s front-end development team launched a VUe-based mobile UI framework. Like Bootstrap, it encapsulates and beautifies the native HTML tags, allowing us to focus on business logic rather than UI interfaces. (Usually used for e-commerce interface production)
Official documentation: Vant 2 - Mobile UI Components built on Vue