Vue/cli3 will build a project through vue ui in the future ## Title
Starting from vue3, it provides a web visual operation interface for quick configuration and building of vue projects. Now the latest one seems to be vue4.5.6. Next is my experience of creating vue projects using vue ui.
1. Under the drive letter folder of the project to be created, cmd and vue ui
are currently under which drive letter are you performing cmd and then vue ui, then the drive letter can no longer be modified on the web page (the black window will prompt you to change The version of node has risen to 8 or higher. Now node seems to have version 14)
You can see your current drive letter in the lower left corner. Mine is the F drive, and you need to pay attention to a button, the one on the left of the drive letter display. The home button, he can switch to the interface below, sometimes you can't find where to create the project interface after looking for a long time in the interface, click on it and you can find a miracle.
2. Let's go back to creating the project:
click on create, the address of the created project can be modified in the above several places
I unchecked the git, because I flipped the car there, because I don’t know much about git, if you also roll over, you can check mine: https://blog.csdn.net/qq_40165432/article/ Details/108697413
contains my solution to the overturned car.
Click Next:
Here you can select the project preset you want to create. Initially there will be 4 options by default, custom, default, remote, and default vue3 preset configuration, which means you can manually select the project preset you want to perform You can also choose the preset you set before or the preset program provided to you by the system. If you want to delete your previous preset:
Delete this file, next time you come in, your own presets are gone. If you know more ways to delete your own presets, please leave a message below, or if I am wrong, please leave a message. Let’s review, verify and discuss .
I don’t apply my previous presets here, but use manual: the
right is my understanding of the options on the left, in fact, there is another one at the end, and I don’t know what to do, click on the check box. In the next step, because I chose to modify the vue project version in the previous one, there will be the first one below; the second one is about the independent choice of #conformity, not here, configure mode: "history" in the router js file You can also remove #conformity. For specific use, go to Baidu with [mode:"history"]. Refer to the second picture below for the selection of the latter two. I am not clear about the specific difference. If you understand, you can leave a message below
, vue Choose 3.x for the version, and
click to create the project as needed :
here is the preset problem mentioned before, here you can enter your preset configuration name, or you can directly click the middle "create project without saving preset"
Then the interface turns in a circle, it
may take a few minutes to create the project , and there will be a system prompt afterwards.
At the same time, if you fail to create here, look at the console, it may report that a ".zh/index.js" module does not exist, then delete the preset configuration file mentioned above, and install you in the global vue related Delete, because I currently don’t download much content globally through node, just cnpm/yarn and so on, so I deleted all the content under my node_global folder, and then downloaded it again, because I only have a few Global, so it’s not troublesome,
and then do cmd and vue ui to create the project
After the creation is complete: it will default to this interface. If you want to create a project, click the home icon in the lower left corner. If you want to see your project at this time, you want
to see the following picture under the project : from left to right after completion
After the startup is successful,
click Ang to start the app
. If you run to the above interface, ok, you are done. Finally, click the pause button if you don't need it, or it will take up your network port.
Finally, if you have any comments or suggestions about the deficiencies in my steps, please leave a message in the comments, which will make it more convenient and reasonable for follow-up people, and deepen the understanding and use of this tool.