VUE-Scaffolding construction, vue-scaffolding

VUE-Scaffolding construction, vue-scaffolding

1. What is vue-cli?

Vue-cli is a scaffold of vue. js and is used to automatically generate a vue. js Project template.

Steps:

2. Installation
-> Global installation
Npm install vue-cli-g
Or
Cnpm install vue-cli-g
-> Check whether the installation is successful.
Vue-V (uppercase V)
3. Use
-> The generated project name is a wsw template.
Vue init webpack wsw
-> Go to the project and install the dependency
Cd wsw
Cnpm install
-> RUN
Npm run dev

4. vue directory structure

Directory resolution

Directory/File	Description
Build	The location where the final released code is stored.
Config	Configuration directory, including the port number. We can use the default one for beginners.
Node_modules	Project dependency module loaded by npm
Src	Here is the directory we want to develop. Basically, everything we want to do is in this directory. It contains several directories and files: Assets: Place images, such as logos. Components: a component file is stored in the directory. App. vue: Project entry file. You can also directly write the component here without using the components directory. Main. js: the core file of the project.
Static	Static resource directories, slices, fonts, and so on.
Test	Initial test directory, which can be deleted
. Xxxx File	These are some configuration files, including syntax configuration and git configuration.
Index.html	You can add meta information or statistical code to the homepage entry file.
Package. json	Project configuration file.
README. md	Project description, in markdown format

Re-open the page http: // localhost: 8080/. Generally, the page is automatically refreshed after modification. The result is as follows: