vue-cli template
- vue-cli's scaffolding project templates include webpack-simple and webpack
- The difference between the two is that webpack-simple does not include Eslint checking and other functions.
Project Structure of vue-cli
. |-- build // Project construction (webpack) related code| |-- // Production environment construction code| |-- // Check node, npm and other versions| |-- // Hot reload related| |-- // Build a local server| |-- // Build tool related| |-- // webpack basic configuration| |-- // webpack development environment configuration| |-- // webpack production environment configuration|-- config // Project development environment configuration| |-- // Development environment variables| |-- // Some configuration variables of the project| |-- // Production environment variables| |-- // Test environment variables|-- src // Source code directory| |-- components // vue public components| |-- store // vuex status management| |-- // Page entry file| |-- // Program entry file, loading various public components|-- static // Static files, such as some pictures, json data, etc.| |-- data // The data obtained from group chat analysis is used for data visualization|-- .babelrc // ES6 syntax compilation configuration|-- .editorconfig // Define the code format|-- .gitignore // File formats that need to be ignored when uploading git|-- // Project description|-- |-- // Entrance page|-- // Basic project information
document
A file is a file in the root directory of the project, which defines various modules required for the development of the project and some project configuration information (such as project name, version, description, author, etc.).
Custom npm related commands
There is a scripts field in the file.
"scripts": {
"dev": "node build/",
"build": "node build/"
}
In the development environment, running npm run dev on the command line is equivalent to executing node build/. Therefore, the script field is used to specify the abbreviation of npm-related commands.
Dependencies fields and devDependencies fields
- Dependencies field specifies the module on which the project depends when it runs
- The devDependencies field specifies the modules to which the project is dependent (project environment dependency) is dependent on when developing the project (project environment dependency)
- Running the npm install command on the command line will automatically install the modules in the dependencies and devDependencies fields.
webpack configuration related
Details are available in webpack related blogs
...
...
// http-proxy can forward all requests to the real API address of the backend, so as to achieve complete separation of front-end development// You can configure proxyTable in config/var proxyMiddleware = require('http-proxy-middleware')
...
...
// Use webpack-dev-middleware to perform hot loading when there is no webpack-dev-servervar hotMiddleware = require('webpack-hot-middleware')(compiler)
// When the html-webpack-plugin template changes, it is forced to reload the page('compilation', function (compilation) {
('html-webpack-plugin-after-emit', function (data, cb) {
({ action: 'reload' })
cb()
})
})
...
...
= {
// Compile the entry file entry: {},
// Compile output path output: {},
// Some solution configurations resolve: {},
resolveLoader: {},
module: {
// Various types of file loader configurations loaders: {
...
...
// JS file is transcoded with babel {
test: /\.js$/,
loader: 'babel',
include: projectRoot,
// Which files do not need to be transcoded exclude: /node_modules/
},
...
...
}
},
// Some related configurations of vue files vue: {}
}
This file is mainly used to detect whether the node and npm versions in the current environment are consistent with what we need.
// Load the semantic version test libraryvar semver = require('semver')
// Customize the input style of console logsvar chalk = require('chalk')
//Introduce filesvar packageConfig = require('../')
var exec = function (cmd) {
return require('child_process')
.execSync(cmd).toString().trim()
}
// Define an array composed of node and npm version requirementsvar versionRequirements = [
{
name: 'node',
currentVersion: (),
versionRequirement:
},
{
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement:
}
]
= function () {
var warnings = []
// Determine whether the version meets the requirements in turnfor (var i = 0; i < ; i++) {
var mod = versionRequirements[i]
if (!(, )) {
( + ': ' +
() + ' should be ' +
()
)
}
}
...
}
.babelrc
The configuration file of the Babel interpreter is stored in the root directory. Babel is a transcoder, which needs to be used in the project to convert ES6 code to ES5 code
// Set transcoding rules"presets": ["es2015", "stage-2"], // Some plug-ins for transcoding"plugins": ["transform-runtime"], "comments": false
.editorconfig
This file defines the encoding specifications of the project, the editor behaves consistently with those defined in the .editorconfig file, and has higher priority than the editor's own settings, which is very useful and necessary when multi-person co-developing projects.
root = true [*] // Apply the following rules to all filescharset = utf-8 // Use utf-8 for encoding rulesindent_style = space // Indent with spacesindent_size = 2 // The number of indentation is 2 spacesend_of_line = lf // Line break formatinsert_final_newline = true // Whether to insert an empty line at the end of the filetrim_trailing_whitespace = true // Whether to delete the space at the end of the line
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.