Students who have been exposed to Vue should know that it is very convenient to develop a Vue project with vue-cli, which can help you quickly build a strong Vue.js project.Today, instead of talking about what vue-cli is, let's talk about what the project structure is built with vue-cli and analyze some of the files.For reference, here is a small project I wrote earlier that was built using the vue-cli webpack template with the project address: https://github.com/hieeyh/tong2-family.
Project structure
.
|-- build // Code for project building (webpack)
| |-- build.js // Production environment build code
| |-- check-version.js // Check node, npm, etc.
| |-- dev-client.js // Thermal overload correlation
| |-- dev-server.js // Build a local server
| |-- utils.js // Build Tools Related
| |-- webpack.base.conf.js // webpack Basic Configuration
| |-- webpack.dev.conf.js // webpack development environment configuration
| |-- webpack.prod.conf.js // webpack production environment configuration
|-- config // Project Development Environment Configuration
| |-- dev.env.js // Development environment variables
| |-- index.js // Some configuration variables for the project
| |-- prod.env.js // Production environment variables
| |-- test.env.js // Test environment variables
|-- src // Source Directory
| |-- components // vue public components
| |-- store // vuex state management
| |-- App.vue // Page Entry File
| |-- main.js // Program Entry File, Load Various Common Components
|-- static // Static files, such as some pictures, json data, etc.
| |-- data // Data from group chat analysis for data visualization
|-- .babelrc // ES6 Syntax Compilation Configuration
|-- .editorconfig // Define Code Format
|-- .gitignore // File format to ignore for git upload
|-- README.md // Project Description
|-- favicon.ico
|-- index.html // Entry Page
|-- package.json // Project Basic Information
.package.json
The package.json file is a file in the project root directory that defines the various modules required for the project development and some project configuration information (such as project name, version, description, author, and so on).
scripts field
There is a scripts field in the package.json file.
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js"
}In a development environment, running npm run dev from the command line is equivalent to executing a node build/dev-server.js.So the script field is an abbreviation used to specify npm-related commands.
dependencies and devDependencies fields
The dependencies field specifies the modules on which the project runs, and the devDependencies field specifies the modules on which the project is developed.Running the npm install command from the command line automatically installs the modules in the dependencies and devDependencies fields.(
Package.json also has many configuration related items to learn more about package.json: https://docs.npmjs.com/files/package.json
webpack configuration related
As mentioned above, npm run dev on the command line is equivalent to executing a node build/dev-server.js, dev-server.js is the first file to run when you build in a development environment.There is already an analysis article on the vue-cli#2.0 webpack configuration at the Nugget that explains in detail the meaning of each line of code in the webpack-related configuration file. I'll just add a few.Link here (be sure to read by yourself, and you will get a lot of results): https://gold.xitu.io/post/584e48b2ac502e006c74a120.
dev-server.js
...
...
// http-proxy implements forwarding all requests to the back-end real API address for complete separation of front-end and back-end development
// You can configure the proxyTable you want to configure in config/index.js
var proxyMiddleware = require('http-proxy-middleware')
...
...
// Hot Load To use webpack-dev-middleware for hot loading when there is no webpack-dev-server
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// When the html-webpack-plugin template changes to force page reload
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})webpack.base.conf.js
...
...
module.export = {
// Compile Entry File
entry: {},
// Compile Output Path
output: {},
// Some solution configurations
resolve: {},
resolveLoader: {},
module: {
// Various types of file loader configurations
loaders: {
...
...
// Transcoding js files with babel
{
test: /\.js$/,
loader: 'babel',
include: projectRoot,
// Which files do not need transcoding
exclude: /node_modules/
},
...
...
}
},
// vue file some related configurations
vue: {}
} check-version.js
This file is primarily used to detect whether the node and npm versions in the current environment are consistent with what we need.
// Load Semantic Version Test Library
var semver = require('semver')
// Customize the input style of console logs
var chalk = require('chalk')
// Introduce package.json file
var packageConfig = require('../package.json')
var exec = function (cmd) {
return require('child_process')
.execSync(cmd).toString().trim()
}
// Define an array of node and npm version requirements
var versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
},
{
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
}
]
module.exports = function () {
var warnings = []
// Determine successively whether the version meets the requirements
for (var i = 0; i < versionRequirements.length; i++) {
var mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
...
}It takes a lot of effort to fully understand the webpack. I feel I'm just in the door. To get a better understanding of the webpack, I need to go to the official website to read the instructions.
.babelrc
The configuration file for the Babel interpreter, stored in the root directory.Babel is a transcoder that is needed in your project to convert ES6 code to ES5 code.Here is a relevant article written by Mr. Ruan Yifeng for reference: Introduction to Babel
// Set Transcoding Rules
"presets": ["es2015", "stage-2"],
// Transcoding Plugins
"plugins": ["transform-runtime"],
"comments": false .editorconfig
This file defines the coding specifications of the project, the behavior of the editor will be consistent with that defined in the.editorconfig file, and its priority will be higher than that set by the editor itself, which is useful and necessary when developing a project in collaboration with multiple people.
root = true
[*] // Apply the following rules to all files
charset = utf-8 // utf-8 for encoding rules
indent_style = space // Space for Indentation
indent_size = 2 // Indent 2 spaces
end_of_line = lf // Line Break Format
insert_final_newline = true // Whether to insert an empty line at the end of the file
trim_trailing_whitespace = true // Whether to delete spaces at the end of a lineSee the official configuration documentation for more information http://editorconfig.org/
It's not long to get in touch with vue, and a lot of things are not very clear. Any questions in this article are welcome to point out.