Complete project structure and interpretation of front-end development

This is a relatively complete framework for a front-end project. The following will continue to update ~~~~, if you have any questions, please advise.

File Directory Meaning

-node_modules		# Project dependencies
-public 			# Store public static resources, generally can put a third party static
-src
  |__api           	# Interface address of the system
  |__assets        	Static resources, images, fonts, styles
  |__components		# Encapsulated public component
           |__base  # Basic common component
  |__libs           # Common tool functions, project development when the urls configuration
  |__mock           # Mock data and methods used in development
  |__router        	# Route configuration
  |__store        	# vuex warehouse
  |__types        	# Place type restricted files
  |__views			# Page view component
       |__common    # Project common components such as error-vue, login.vue
       |__home      # Project Home page
  |__env            # Generic environment variable, which is loaded in all modes
  |__env.development    # Development environment variables that are loaded in YARN Server mode overwrite the generic variable with the same name in env
  |__env.demonstration  # Test environment variables that are loaded in YARN build: DEM mode overwrite env generic variables of the same name
  |__env.demonstration  # Production environment variables that are loaded in Yarn build:pro mode overwrite env generic variables of the same name
Copy the code

The difference between public and assets

1. Files in the public folder will be placed intact in the dist folder. 2. Files in the assets directory are merged into one file and then compressed. It is used to store js, CSS, etc., such as some global SCSS style file, global tool class JS file, etc.

Configuration File Meaning

Browserslistrc: browser compatibility profile. Editorconfig: editor format profile. Env: Development: The development environment variable, which is loaded in yarn Server mode, overtakes the universal.env.demonstration with the same name in env: Test environment variables that are loaded in yarn build: DEM mode overwrite env with the same name as gener.env. Production: Production environment variables that are loaded in Yarn build:pro mode overwrite env’s generic variable of the same name. Eslintignore: Eslintrc.js: Stylelintr. json: configuration file in the CSS format babel.config.js: example of an prettier configuration file where stylelintr. js: example of an prettier configuration file where stylelintr. json: configuration file where stylel.config.js: example of an prettier configuration file where stylelintr. js: example of an prettier configuration file where stylelintr. json: configuration file where stylel.config.js: example of an prettier configuration file where stylelintr. Tsconfig. json: current project ts configuration file tslint.json: TS formatting check configuration file vue.config.js: Package. json: package management files, and startup scripts