This is the 28th day of my participation in the August Text Challenge.More challenges in August

Introduction to VUE – Chapter 3

The previous chapters covered development environments and common plug-ins for development tools. Vue init webpack projectName = vue init webpack projectName

1. Directory parsing

The project level directory structure is shown below

Detailed project files and analysis are shown below

Folders/files	file	describe
build		Project build (Webpack) related code
	build.js	The production environment builds code
	check-version.js	Check the node and NPM versions
	utils.js	Build tool dependency
	vue-loader.conf.js	Webpack Loader configuration
	webpack.base.conf.js	Basic WebPack configuration
	webpack.dev.conf.js	Webpack development environment configuration, architecture local server
	webpack.prod.conf.js	Webpack production environment configuration
config		Project development environment configuration
	dev.env.js	Development environment variables
	index.js	Project Variable Configuration
	prod.env.js	Configure production environment variables
node_modules	NPM loads project-dependent modules
src	Source directory
	assets	Place images, such as logos, etc
	components	Vue common components
	router	Vue routing management
	App.js	Project entry file
	main.js	Program entry file to load various common components
static		Static files, such as images, fonts, etc.
.babelrc		ES6 syntax editor
.editorconfig		Define the code format
.gitignore		Git upload file format to ignore
.postcsssrc		Postcss configuration file
README.md		Note file, which describes the matters needing attention in the project
index.html		Home page entry page (you can add some information or statistical code, etc.)
package.json		Basic project information, package project dependencies, etc.

---

This is the vuE-CLI scaffolding automatically generated project structure, understanding the functional purpose of each file and folder can help us better and faster development. Because standardized infrastructure generation may not meet the actual development needs of individual projects, we often extend the initial projects structurally. More detailed code content is required, as shown in the following file:

1.packge.json

The configuration file of the project, define the basic information of the project and the required dependency library, etc

The Scrips section defines the shortcut instructions for the NPM to execute. .

For example, dev => NPM run dev

webpack-dev-server –inline –progress –config build/webpack.dev.conf.js

2.webpack.base.conf.js

Is a common configuration file for development, test, and production environments.

3.config/index.js

Environment profile

4.utils.js

Tool file

5.babelrc

Babel configuration file

5.editorconfig

Coding specification file

6.src/main.js

Main.js is the entry file for the entire project

7.src/App.vue

Project root component

Inside the

The

The

8.src/router/index.js

A routing component that configures the module page corresponding to the path accessed by the project.

---

This is the vue-CLI generated file parsing. Good knowledge of project architecture, document utility, facilitate quick understanding and development.

If one wishes for the best, one wishes for the best every day.Copy the code