Vue3 creates a project


Release date:2024-03-06 Update date:2024-03-08 Editor:admin View counts:156

Label:

Vue3 creates a project

In the previous chapter of Vue3 installation, we used the Vue init command to create a project. In this chapter, we mainly introduce the Vue create command to create a project and the use of the Vue ui command to open a graphical installation interface.

Vue create command

The syntax format for creating a project with the Vue create command is as follows:

vue create [options] <app-name>

Create a file created by the vue-cli-service new projects to support:

The options option can be:

  • -p, --preset <presetName> :Ignore prompts and use saved or remote preset options

  • -d, --default :Ignore prompts and use default preset options

  • -i, --inlinePreset <json> :Ignore prompts and use inline JSON string preset options

  • -m, --packageManager <command> :Use the specified when installing dependencies npm Client

  • -r, --registry <url> :Use the specified when installing dependencies npm registry

  • -g, --git [message] :Force / skip git initialization and optionally specify initialization submission information

  • -n, --no-git :Skip git initialization

  • -f, --force :Overwrite the possible configuration of the target directory

  • -c, --clone: Use git clone to obtain remote preset options

  • -x, --proxy :Create a project using the specified agent

  • -b, --bare :Omit the novice guidance information in the default component when creating a project

  • -h, --help :Output usage help information

Next, we create runoob-vue3-app project:

vue create runoob-vue3-app

Executing the above command will bring up the installation options interface:

Vue CLI v4.4.6
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

Press the enter key to enter the installation and wait for a moment to complete the installation.

After the installation is complete, we enter the project directory:

cd runoob-vue3-app2

Launch application:

npm run serve

Then open http://localhost:8080/, and you can see the application interface:

Image0

Vue ui command

In addition to using the Vue create command to create projects, we can also use visual creation tools to create projects.

Run the command:

$ vue ui
&#x1f680;  Starting GUI...
&#x1f320;  Ready on http://localhost:8000
...

Execute the above command and a project management interface pops up in the browser:

Image1

We can click the “create” option to create a project, select “create Project here” at the bottom, and select a path at the top of the page:

Image2

Then enter our project name, select the package management tool as npm, and click Next:

../../_images/33B0E553-7AD4-4A5A-AF5C-20305C0F5793.jpeg

You can choose the configuration by default:

Image4

Then wait for the installation to be completed, and the administrative interface for the installation is as follows:

Image5

Powered by TorCMS (https://github.com/bukun/TorCMS).