The difference between uni-app scaffolding cli creation project and HBuilderX creation project

uni-app project creation method

The HBuilderX visual interface can create new projects through the IDE interface.
Using the cmd command line mode, using cli scaffolding, you can vue-cli create uni-app a project by.

Reference: Develop uni-app in WebStorm - use vue2 to realize mobile APP (apk ) + WeChat applet project development plan The engine can parse DOM elements and display the controls of html pages. The principle of displaying pages is the same as that of browsers, so it can be regarded as a browser. 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. Nvue is the abbreviation of native vue, which is a rendering method of uni-app. It is the abbreviation of native vue, which is a rendering method of uni-app. _webstorm runs uniapp https://blog.csdn.net/LlanyW/article/details/128983789

The difference between cli creating projects and HBuilderX visual interface creating projects

The project created by cli is a traditional node project structure. The project code is in the src directory, the compiler is in the project, and the compilation result is in the dist directory.
The project created visually by HBuilderX is a concept of node-free development. The project code is in the project directory, the compiler is in the HBuilderX directory instead of the project, and the compilation result is in the unpackage directory of the project.

Some developers who are used to the cli are uncomfortable when using the HBuilderX visualization mode. Explain their differences and why HBuilderX provides a variety of methods.

# The project created by cli can also be dragged into HBuilderX for editing

First of all, as a general editor, HBuilderX is compatible with traditional cli development. Not only the cli of uni-app, but also the cli of other frameworks can be dragged into HBuilderX.

That is to say, in HBuilderX, you can use the visual interface to create projects, or you can use the cli command line to create projects, which can achieve the purpose of better cooperation with uni-app. For example, pages.json jumps and prompts, manifest visual interface, conditional compilation, css units such as rpx... many optimizations for uni-app can be used.

These are features of HBuilderX and have nothing to do with project structure.

#If you want to develop uni-app with other ide, you can only use cli mode

It's easy to understand. Because other ides do not have a built-in uni-app compiler, other ides can only install the compiler under the project when developing uni-app, which is the project format created by cli.

The cli project can be developed using a variety of ides, but there are differences between the ides:

HBuilderX has made a lot of optimizations for uni-app, and other IDEs can also be used with uni-app, but it has not been optimized for uni-app
Other IDEs do not have the uni-app app and uniCloud running and debugging tools. These tools are in HBuilderX. For developing app and uniCloud, HBuilderX must be used.

#Differences in visualization methods

HBuilderX visually creates, runs, and publishes projects, and the underlying calls are also npm's run, build and other commands. It's just that the compiler is not under the project, but under the directory of HBuilderX.

#Why provide HBuilderX visualization mode

In order to improve ease of use, lower threshold

Many developers are unfamiliar with node and have psychological resistance to the command line. Don't take it for granted that all developers know node. HBuilder has millions of developers, and less than half of them master node.

npm, github network often have problems

When using the cli to create a project, the cli needs to be installed from npm, and the preset project template can be downloaded from github, which is often stuck due to network problems. Visual creation projects do not have this problem.

It is too troublesome to have a set of compilers under each uni-app project

A developer of HBuilderX has many uni-app projects. If each project distributes a set of compilers, there will be many unreasonable things: - Creating projects will be very slow - Occupying disk space (there are several uni-app compilers 10,000 files) - Upgrading is troublesome and there are many compatibility issues. The compiler under the cli project will not be upgraded following the upgrade of HBuilderX, and can only be upgraded by typing the npm command by the developer. When HBuilderX is upgraded, the compilers of some uni-app projects have not been upgraded, and some have been upgraded. Developers are easily confused when reporting errors, and DCloud is also confused when reporting bugs to DCloud. Keeping the ide version, compiler version, and uni-app runtime versions consistent will reduce a lot of problems.

With the compiler built into HBuilderX, developers only need to care about their own business code when creating projects, and the project structure is clean and refreshing.

Every small program also does this. The compiler is in the small program development tool, and a set of compilers will not be brought under the project when creating a project (the small program also needs to compile wxml, etc. into js).

Automatic installation of less, scss, ts and other compilers

If you use the cli project, then less, scss, ts and other compilers need to be installed manually by typing the npm command. Since DCloud officially does not conduct compatibility tests with each version of each precompiler, if you use a lower version of the precompiler, it may not work properly, and you need to check it yourself
If you use HBuilderX to visually create a project, these compilers will be automatically installed on demand, and DCloud has officially tested version compatibility. Developers only need to use these precompilation techniques in your code, and HBuilderX will take care of the rest automatically.

Visualization is more efficient

The node-free development provided by HBuilderX is not only easy to use, but also more efficient.

New Project:Ctrl+N
Run the project:Ctrl+R
Issue items:Ctrl+U

This is much faster than starting a terminal, moving focus to the terminal window, and typing commands.

In uni-app, terminal commands are more and longer than traditional web development, and you have to type the operating platform parameters to choose whether you want to run to the web or app or a small program.

In summary,

If you are used to node, can accept and manage the way of installing a compiler for each project, and understand the above pros and cons, then you can choose cli to create projects.

As for ide, it is definitely more efficient to develop HBuilderX with uni-app.

If you are used to other ides, it doesn't matter if the development of uni-app is inefficient, you can also use other ides. But note that at least when running and debugging the app and uniCloud, HBuilderX must be turned on, just like debugging with the WeChat applet tool.

Inside DCloud, uni-app and HBuilderX are different teams.

For uni-app, it treats all IDEs equally. It is compatible with the node ecology and supports d.ts syntax prompts
For HBuilderX, uni-app is a first-class citizen. HBuilderX has done a lot of optimization for uni-app

#Other considerations

cli The created project, the compiler is installed under the project. And it will not be upgraded with HBuilderX. If you need to upgrade the compiler, you can refer to: Update dependencies to the specified version .
If you want to continue to use clithe created project in HBuilderX, you can drag the project into HBuilderX. Note that if you drag the entire project into HBuilderX, the compiler under the project will be used when compiling. If you drag the src directory into HBuilderX, you will use the compiler under the plugin directory under the HBuilderX installation directory.
cliThe created project has built-in d.ts. Like other regular npm libraries, it can be normally developed in vscode , webstorm and other development tools that support d.ts and has syntax prompts.
Projects created with HBuilderX do not have d.ts, and HBuilderX has a built-in uni-app syntax prompt library. If you need to open the project created by HBuilderX in other editors and supplement d.ts, you can execute it under the project first npm init, and then npm i @dcloudio/types -Dsupplement d.ts.
Projects created by HBuilderX can also use npm, refer to: NPM support
Other development tools such as vscode, in the field of vue or uni-app, are not as efficient as HBuilderX. For details, see: https://ask.dcloud.net.cn/article/35451
When publishing App, you still need to use HBuilderX. Other development tools cannot publish apps, but can publish H5 and various small programs. If you need to develop an App, you can run it in HBuilderX first, and then modify and save the code in other editors. After the code is modified, it will be automatically synchronized to the mobile phone dock.
If you use to clicreate a project, the uni-app compiler in the HBuilderX plug-in list may not be installed
If cli you have any questions about the use, please scan the QR code to join the discussion in the uni-app WeChat exchange group:

reference:

Small program custom component support | uni-app official website