Teach you how to use Vue-cli to create a Vue project process

1. Check the current Vue version

Enter the following command to check the currently installed Vue-cli version:

If it prompts that vue is not an internal command, please enter

npm install -g @vue/cli

Note: V must be capitalized when checking the vue-cli version

2. Create a project using the command line

Let's create a folder first, D:\project\vue-demo vue-demo is the folder we created, enter the root directory, and run cmd

1. Enter the create command

vue create my-demo

As shown below:

After entering the command, press Enter directly, and some will prompt as shown below

Saying your connection to the default pnpm registry seems to be slow.

Use https://registry.npmmirror.com to install quickly? We can also choose Y

After entering Y, the following picture will appear

, and then you will be asked to choose whether to use the default (default) to choose to install vue3 or vue2, and choose according to your own needs. I will install vue3 by default here, or manually (Manually).

1. We first choose the default installation as follows:

Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies: (Use arrow keys)

> Use PNPM
  Use NPM

Pick the package manager to use when installing dependencies
Select the package manager to use when installing dependencies

Let's install pnpm, so I won't explain the difference between pnpm and npm here. If you don't know how to do it, you can go to Baidu to check it.

2. We first choose manual installation as follows:

Note: Use the up and down arrow keys on the keyboard to select up and down, the space bar is to select or cancel, and a is to select all

First, let me explain what each option means.

1. TypeScript: Supports coding in TypeScript.
2. Progressive Web App (PWA) Support: PWA support.
3. Router: supports vue-router.
4. Vuex: Supports Vuex state management.
5. CSS Pre-processors: Support CSS pre-processors.
6. Linter/Formatter: Supports code style checking and formatting.
7. Unit Testing: Supports unit testing.
8. E2E Testing: supports E2E testing.

Choose the option we want to install according to the needs of our project.

After choosing, press Enter directly to enter the selection interface:

Choose a version of Vue.js that you want to start the project with

Here I choose 3.x
and then press Enter directly to enter the routing configuration selection interface

Note: Y means to use the history mode, N means to use the hash mode (that is, the URL address contains

After selecting, continue to press Enter, and then select CSS preprocessor, here select Less mode:

continue to press enter, select the standard configuration as code inspection

Continue to press enter, check the style check when you choose to save:

continue to press enter, select the routing method (y or n select y) and select In package.json

to continue to press Enter, and finally ask if you want to save this configuration as a preset for future projects, you can choose yes, we can press Enter by default, and

finally see the following picture It means that our configuration was created successfully:

3. Both modes are created, we start the service

pnpm run serve

Start successfully as shown in the figure below

Enter http://localhost:8080/ in the browser and the following page appears, indicating that our project has started successfully

So far, a vue project has been created through command line selection and command operations.