Analysis of the directory structure after building the project with Vue-cli (picture and text)

The content of this article is about the analysis of the directory structure after the Vue-cli project is built. It has a good reference value and I hope it can help friends in need.

1. Preface

Vue does not limit your code structure. However, it stipulates some rules that need to be followed:
1. Application-level status should be concentrated into a single store object.
2. Submitting a mutation is the only way to change the state, and this process is synchronous.
3. All asynchronous logic should be encapsulated into actions.

2. The project file directory is displayed as follows

3. Project file analysis

3.1 build file

build: The folder stores some configurations of webpack. Webpack is a project compilation, running, and packaging tool for front-end websites.
build.js: It is what we need to run after we complete the project. We can package our project files into static files and store them in the dist folder in the project root directory (there is no such file in the directory now) folder, which will be automatically generated when building).
check-versions.js: Mainly checks whether the versions of some dependent tools are applicable, such as nodejs and npm. If the version is too low, it will prompt.
logo.png: stores the vuelogo image.
utils.js: Provides tool functions, including generating loaders for processing various style languages ​​and tool functions for obtaining resource file storage paths.
vue-loader.conf.js: Introduced utils.js, which should be a file used to switch between development mode and production mode, so that loaders can be parsed in different modes.
webpack.base.conf.js: This configuration file is a wepack-related configuration file for the vue development environment. It is mainly used to handle the configuration of various files.
webpack.dev.conf.js: Based on webpack.base.conf, the configuration under the development environment is added and improved.
webpack.prod.conf.js: The webpack configuration used during construction comes from webpack.prod.conf.js, which is also further improved based on webpack.base.conf.

The file example is as follows:

3.2 config file

config: The file contains webpack environment configuration files.
index.js: Describes the configuration in both development and build environments.
dev.env.js, prod.env.js, test.env.js: These three files simply set environment variables.

An example file is as follows:

3.3 node_moules file

node_moules: The project dependency modules loaded by npm are stored here. Dependencies that need to be added in the future are also placed here.

The file example is as follows:

3.4 src file

src: Place components and entry files.
assets: A directory that mainly stores some static image resources.
components: Various components needed for development are stored here. Each component is connected together to form a complete project.
router: Stores the project routing file.
App.vue: It is the main component of the project and the outlet for all components and routes of the project. It will then be rendered and displayed in index.html in the root directory of the project. We can write some here Suitable for global css styles.
main.js: Entry file, which introduces the vue module, app.vue component and routing router. Some things we need to use globally can also be defined in it.

An example file looks like this:

3.5 static files

static: It stores the static files of the project. It is used to store some external js and css files that need to be used. When they need to be used, they are imported from here into the file.

The file example is as follows:

3.5 test file

test: Initial test directory.
unit: unit test, you can write unit tests for each component and place them under the test/unit/specs directory. It is recommended that the directory structure of the unit test case be consistent with the test file (relative to src ), each test case file name ends with .spec.js. When npm run unit is executed, all spec.js files will be traversed, and the test report will be output in the test/unit/coverage directory.
e2e: e2e or end-to-end or UI testing is a testing method. It is used to test whether the process of an application from beginning to end is as expected during design. Same.

An example file is as follows:

3.6 Other files

.babelrc : ES6 syntax compilation configuration.
.editorconfig: Code writing specifications.
.eslintignore: Create a file in the root directory of the project to tell ESLint to ignore specific files and directories. This file is a plain text file.
.eslintrc.js: eslint configuration file. eslint is a tool used to manage and detect js code style. It can be used with editors, such as vscode’s eslint plug-in. When there is code that does not match the content of the configuration file, an error or warning will be reported.
.gitignore: Ignored files.
.postcssrc.js: Compatibility option (if postcss has been installed, a lot of loader configuration is required, and the ".postcssrc.js" file will be generated in the project root directory).
index.html: Project file entry.
package.json: dependency configuration file for projects and tools.
README.md: Project description.

The file example is as follows:

Related recommendations:

Vue The initial construction process of the project (pictures and text)

The above is the detailed content of Analysis of the directory structure after building the project with Vue-cli (picture and text). For more information, please follow other related articles on the PHP Chinese website!