Vue CLI is a complete system for rapid development based on vue.js called scaffolding tools.

Using the Vue CLI has the following advantages:

  • Unify the architectural style of the project
  • Initialize the configuration of project dependencies
  • Provides single-file components

Like Webpack, the Vue CLI operates using the command line.

Official documents are not easy to read, so let’s simplify!

The installation

Ensure that node is installed before installation. If node is not installed, refer to Node installation.

Then use the command line to install the commands, which in our case is VS Code terminal input command operation,

#The installationNPM install - g @ vue/cli#If installation error'Unrecognized markup exists in source text', quotation marks are requiredNPM install - g '@ vue/cliCopy the code

Since it is a global installation, you only need to install it once and then use it directly.

Check the version

vue --version
#Upgraded versionNPM update - g @ vue/cliCopy the code

Project structures,

Create a project:

vue create project-demo
Copy the code

Choose the Preset:

Manually, up and down, and press the space bar to select the plug-in function you want.

When you’re done, press Enter, followed by a list of Settings for your chosen plug-in,

The last step above is to save the current Settings. My name is demo-preset1, and the default location is the. Vuerc file in the current system user folder, such as C:\Users\Administrator\.vuerc.

After the setup is complete, a series of automatic installation, and after a long wait, the project is created:

Operating Projects:

#Enter the project directory
cd project-demo
#run
npm run serve
Copy the code

Press Ctrl and click on the link to access the project

Directories and Files

Single-file components can store their functions in a file with a.vue extension in the Components folder.

Packaging and deployment

packaging

Packaging is compiling a Vue CLI project into a browser-aware file.

From the VS Code terminal window, press Ctrl + C to exit the project, enter the command line command,

npm run build
Copy the code

The packaging is complete, and the dist directory is generated.

The deployment of

Deployment refers to deploying the Vue project Dist directory to the server.

Install static file server:

NPM install - g serveCopy the code

Deploy using the serve command in dist

cd dist

serve
Copy the code

The deployment is successful. Hold down Ctrl and click on the link to package the item after it is accessed: