View----view-cli

---

view-cli

1. view-cli

vue-cli (commonly known as: vue scaffolding) is a tool officially provided by vue to quickly generate vue engineering projects.

Features:

① Out of the box
② Based on webpack
③ Feature-rich and easy to extend
④ Support for creating vue2 and vue3 projects

The home page of the Chinese official website of vue-cli:

2. Install vue-cli

vue-cli is a tool developed based on Node.js, so you need to use npm to install it as a globally available tool.

Install vue-cli globally

npm i -g @vue/cli

Check the version of vue-cli and verify that vue-cli is successfully installed

vue --version

2.1 Solve the problem that Windows PowerShell does not recognize vue commands

Windows PowerShell:
shift + right mouse button to open

By default, executing the vue --version command in PowerShell prompts the following error message: The

solution is as follows:

① Run PowerShell as an administrator
② Execute the set-ExecutionPolicy RemoteSignedcommand
③ Enter the character Y and press Enter

3. Create a project

vue-cli provides two ways to create projects:

1. Create a vue project based on the command line

   vue create 项目名称
   

2. Create a vue project based on the visualization panel

   vue ui
   

4. Create a vue project based on vue ui

Step 1: Run the vue ui command under the terminal to automatically open the visualization panel of the created project in the browser

Step 2: Fill in the project name on the details page

Step 3: Select the manual configuration item on the preset page

You can choose a previously configured or reconfigured

Step 4: Check the functions to be installed on the function page

Choose as needed

Step 5: Check the vue version and required preprocessor on the configuration page

vue history mode (routing)

Step 6: Save all the configurations just now as presets (templates), so that you can directly reuse the previous configurations when you create a project next time

You can choose according to your needs.

The essence of vue ui:

After the user's configuration information is collected through the visual panel, the project is automatically initialized in the background based on the command line.

After the project is created, it will automatically enter the project dashboard

5. Create a vue project based on the command line

Step 1: Run the vue create demo2 command under the terminal to create a vue project based on the interactive command line

Step 2: Select Features to Install

Step 3: Use the up and down arrows to select the vue version, and use the enter key to confirm the selection

Whether the route uses the historical mode (only the selected route needs to be selected, and it is selected according to the needs)

Step 4: Use the up and down arrows to select the css preprocessor to use and confirm the selection with the enter key

Step 5: Use the up and down arrows to select how to store the plugin's configuration information and confirm the selection with the Enter key

Step 6: Whether to save the configuration just now as a preset

Start creating a project and automatically install dependencies

Project is created

run the project

cd demo2
npm run serve

Copy URL to open