current position:Home>Easily manage projects using Vue UI graphical interface

Easily manage projects using Vue UI graphical interface

2022-04-29 20:27:46Hand picked cotton

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 

0.png

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 

1.png

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 .

2.png

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

3.png

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 .

4.png

Project successfully created , The project management page opens .

5.png

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 .

6.png

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

7.png

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

8.png

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

9.png

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 ).

10.png

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

11.png

12.png

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 ~

copyright notice
author[Hand picked cotton],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204292027419399.html

Random recommended