Vue Beginner's Guide: Creating the First Vue-cli Scaffolding Program

1. Vue--The first vue-cli program

The development of Vue is based on NodeJS. The actual development uses Vue-cli scaffolding development, vue-router routing, and vuex for state management; for Vue UI, we generally use ElementUI (produced by Ele.me) or ICE (produced by Alibaba) to quickly build front-end projects~~

ElementUI

ICE

1.1 What is vue-cli

A scaffold officially provided by vue-cli, used to quickly generate a vue project template;

The predefined directory structure and basic code are like when we create a Maven project, we can choose to create a skeleton project. This estimated project is the scaffolding, and our development is faster.

Function of the project

• Unified directory structure
• Local debugging
• Hot deployment
• Unit Testing
• Integrated packaging and launch

1.2 Required environment

• Node.js
• Git

Confirm that nodejs is installed successfully:

• Enter node -v in cmd to check whether the version number can be printed correctly!
• Enter npm -v in cmd to check whether the version number can be printed correctly!

npm is a software package management tool

Install vue-cli

npm install1 vue-cli -g
#Test whether the installation is successful#See which templates can be used to create a Vue application. Usually we choose webpack
vue list 

Tip: If the vue list query fails, please add the node_global target to the path environment variable

1.3 The first vue-cli program

1.3.1 Create a Vue project

We just create an empty folder on the computer. I will create a new directory under drive D.

1.3.2 Create a Vue application based on the webpack template

#1. First, you need to enter the corresponding directory cdE:\IDEACode\Vue\vue
#2. Myvue here is the top name, you can name it according to your needs vue init webpack myvue

Just select no all the way;

illustrate:

1.3.3 Initialize and run

cd myvue
npm install
npm run dev

After the command is successfully executed, the following prompt will appear

Open the port in the browser

You can modify the port number and other configuration files in index.js

Summarize

This is the end of this article about the Vue Beginner's Guide to Creating the First vue-cli Program. For more information about the first vue-cli program, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!