Tutorial on vue scaffold vue-cli, vue scaffold vue-cli

Tutorial on vue scaffold vue-cli, vue scaffold vue-cli

Vue-cli Template

1. The scaffolding project templates of vue-cli include webpack-simple and webpack.
2. The difference between the two is that webpack-simple does not include Eslint checks and other functions.

Project Structure of vue-cli

. | -- Build // webpack code | -- build. js // production environment build code | -- check-version.js // check node, npm and other versions | -- dev-client.js // Hot load | -- dev-server.js // build a local server | -- utils. js // build tool | -- webpack. base. conf. js // basic webpack 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 variable | -- index. js // some configuration variables of the Project | -- prod. env. js // production environment variable | -- test. env. js // test environment variable | -- src // source code directory | -- components // vue public component | -- store // vuex status management | -- App. vue // page entry file | -- main. js // program entry file, loading various public components | -- static // static files, such as some images, json data | -- data // data obtained from group chat Analysis for data visualization | --. babelrc // ES6 syntax compilation Configuration | --. editorconfig // define the code format | --. gitignore // the file format to be ignored during git upload | -- README. md // project description | -- favicon. ico | -- index.html // entry page | -- package. json // basic project information

Package. json File

The package. json file is a file in the root directory of the project. It defines various modules required for the project development and some project configuration information (such as the Project name, version, description, and author ).

Custom npm commands

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 on the command line is equivalent to executing node build/dev-server.js. Therefore, the script field is used to specify the abbreviation of npm-related commands.

Dependencies field and devDependencies Field

1. The dependencies field specifies the module on which the project depends.
2. The devDependencies field specifies the module (project environment dependency) that the project depends on during development)
3. Run the npm install command in the command line to automatically install the modules in the dependencies and devDependencies fields.
   

Webpack configurations

For more information, see the webpack blog.

Dev-server.js

...... // Http-proxy can forward all request proxies to the real API address of the backend, so as to completely separate the frontend and backend development. // in config/index. in js, you can configure var proxyMiddleware = require ('HTTP-proxy-middleware ') for proxyTable ')...... // use webpack-dev-middleware to perform hot loading when no webpack-dev-server is available for hot loading var hotMiddleware = require ('webpack-hot-middleware ') (compiler) // when the html-webpack-plugin template is changed, the page is forced to 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 the entry file entry :{}, // compile the output path output :{}, // some solutions to configure resolve :{}, resolveLoader :{}, module: {// configure loaders for different types of file loaders :{...... // use babel to transcode the js file {test :/\. js $/, loader: 'babel ', include: projectRoot, // which files do not need to be transcoded exclude:/node_modules /},......}}, // vue file configuration vue :{}}

Check-version.js

This file is mainly used to check whether the node and npm versions in the current environment are consistent with what we need.

// Load the semantic version Test Library var semver = require ('secret') // 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 ()} // array that defines node and npm version requirements var versionRequirements = [{name: 'node', currentVersion: semver. clean (process. version), versionRequirement: packageConfig. engines. nod E}, {name: 'npm ', currentVersion: exec ('npm -- version'), versionRequirement: packageConfig. engines. npm}] module. exports = function () {var warnings = [] // judge whether the version meets the requirements in sequence 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 ))}}...}

. Babelrc

The configuration file of the Babel interpreter is stored in the root directory. Babel is a Transcoder and needs to be used in the project to convert ES6 code into ES5 code.

// Set the transcoding rule "presets": ["es2015", "stage-2"], // some transcoding plug-ins "plugins": ["transform-runtime"], "comments": false

. Editorconfig

This file defines the code specification of the project. The editor will act in concert. the editorconfig file is consistent and has a higher priority than the editor settings. This is useful and necessary for collaborative development projects.

Root = true [*] // apply the following rules to all files charset = UTF-8 // encoding rules with utf-8indent_style = space // indent with space indent_size = 2 // Number of indentations is 2 spaces end_of_line = lf // linefeed format insert_final_newline = true // whether to insert a blank line trim_trailing_whitespace = true at the end of the file // whether to delete spaces at the end of the line

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.