Online initialization using npm ways to quickly build a single-page application engineering, commonly known vue-cli scaffolding.
vue init after webpack can wander the ocean in the code.
God said: "because accidentally looked at you in the crowd, to no longer lonely miss your face, I decided to check it out clawed your coat."
God said: "front-end development of very esoteric study if you want to give you, I find it all over the world are on there?!!"
So, familiar with the code directory structure it!
Micro-operation
Code Package
npm run build
The root folder
| Folder name | use | Explanation |
|---|---|---|
| build | Project build configuration directory | Tag on line package configuration, such as packaging path, content |
| config | Application Configuration | Port, the domain configuration, as localhost: 8080; production or test mode selection |
| dist | The default packing path | index.html, css and js compressed file storage location, arranged in config / index.js in |
| node_modules | Expansion Pack | axios, shock, router, element-ui 等 |
| src | Application source code | Picture resources, vue template package, the application of import documents, front-end routing request |
| static | Static resources | Static resource, accessed directly from the root site |
| test | automated test | When the iterative version, self-test to write test cases |
The root file
| file name | use | Explanation |
|---|---|---|
| index.html | Debug mode application portal | Default localhost: page 8080 visit, just a debug entry |
| package-lock.json | Expansion Pack version of the required engineering locked | Each expansion pack lock when engineered version information (links, SHA1, etc.) |
| package.json | Extended version of the statute and the list of packages | Project list contains the name and version number of each expansion pack |
| README.md | Readme | Let be a simple self-introduction project |
| .babelrc | Basic Configuration | Browser plug-ins and other pre-conditions |
| .editorconfig | Configuration Editor | Character encoding, indentation, the indentation width |
| .eslintignore | eslint ignored Directory Configuration | eslint does not check grammar rules configuration directory |
| .eslintrc.js | eslint Basic Configuration | Plug-in configuration, rules and style |
| .gitignore | git version directory configuration management ignored | git does not check the version of the code under the configuration directory update |
| .postcssrc.js | CSS conversion configuration | Resolve browser compatibility issues evil |
Directory Structure FIG guide
A directory structure of FIG attachment guide
reference
Vue project directory structure attached notes the difference between assets and static directory
End
For the first time on here, a file catalog descriptions are the result of internal exploration.
Just beginning to learn vue, incorrect place welcome message corrections.