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