Vue3 Project Creation

In the previous chapter, Vue3 Installation, we created a project using the vue init command. In this chapter, we will focus on creating a project with the vue create command and opening the graphical installation interface using the vue ui command.

vue create Command

The syntax for the vue create command to create a project is as follows:

vue create [options] <app-name>

This command creates a new project supported by vue-cli-service.

Options can include:

--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 npm client when installing dependencies.

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

--g, --git [message]: Force/skip git initialization, with an optional initial commit message.

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

--f, --force: Overwrite the target directory if it already exists.

--c, --clone: Use git clone to fetch remote preset options.

--x, --proxy: Use the specified proxy to create the project.

--b, --bare: Omit the beginner guidance information from the default components when creating the project.

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

Next, we will create the tutorialpro-vue3-app project:

vue create tutorialpro-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

Pressing Enter will start the installation, and you will need to wait a moment for it to complete.

After installation, navigate to the project directory:

cd tutorialpro-vue3-app

Start the application:

npm run serve

Then open http://localhost:8080/ to view the application interface.

vue ui Command

In addition to creating a project with the vue create command, we can also use a visual creation tool to create a project.

Run the command:

$ vue ui
🚀  Starting GUI...
🌤️  Ready on http://localhost:8000
...

Executing the above command will open a project management interface in the browser.

We can click on the "Create" option to create a project, select "Create a new project here" at the bottom, and choose the path at the top of the page.

Configure with the default settings:

Next, wait for the installation to complete. The management interface after installation will look like this: