Form writing habits together ！ This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 22 God , Click to see the event details .

1. Introduce

Today I'll show you how to use it VUE CLI Graphical interface to create and manage projects , Easily create... Without commands vue project , You can also easily manage multiple projects .

2. Install and use

2.1 install vue cli

Execute the installation command , Wait for installation to complete , If it's already installed , Skippable .

npm install -g @vue/cli
 Copy code 

After executing the installation command , You can view the version number information through the command .

vue --version
 Copy code 

If you have installed , Need to upgrade vue cli Words , You can execute the following command to upgrade , You can check the version information to confirm whether the upgrade is successful .

npm update -g @vue/cli
 Copy code 

2.2 Run graphical interface

In the project management storage directory , Execute the following command , Start the graphical interface . Access based on graphical address .

vue ui
 Copy code 

2.3 establish vue project

Click on establish , And select the management directory of the project （ The default will be execution vue ui Directory of ）, Click on Create a new project here .

Enter the folder where the project is stored , That is, the name of the project . You can select the corresponding Package manager Tools . Set other parameters , Click on next step

Select the preset plug-in and configuration required for this project , You can choose vue3 The default configuration （ If you choose manual Will choose their own functions and configurations ）. Click on Create project Create a project , The dependent installation will be loaded automatically , Just a moment .

Project successfully created , The project management page opens .

2.4 Import vue project

To import a project, simply say , Suppose you have already created vue project , You just need to Import In the options , Choose your project folder , Just import .

2.5 management vue project

Installing a plug-in , It can be installed quickly or Add the plug-in Search for installation .

Installation dependency , Search for dependencies that need to be installed , Such as tailwindcss Installation .

Configuration definition , For visualization vue.config.js Configuration modification of .

Task run , Start project , Compile and package projects . Click on start-up app Will be able to access the project address

2.6 Project manager

You can also in the project manager , Direct quick start of the project , Just click on that Little dots .

Multiple projects are useful , And you can also Open in editor , The project will be opened in the development tool （ The premise is that the development tool needs to run and start ）.

When multiple projects are running at the same time , Multiple port addresses will be automatically generated for access .

3. summary

Many times, when you switch between multiple projects, run commands , When opening multiple command Windows .VUE UI Can help you get out of the command line , Make it convenient for you to manage the project . Just one interface , Manage all vue project , Um. , It seems that it's not bad , Let's go into the pit and try . Thank you for watching , Look forward to your praise , thank you ~