概述当vue-cli创建了一个vue-demo后，我们使用npm run serve就可以启动项目了。通过package.json中的serve命令我们可以看到，实际是启动了vue-cli-service serve这个命令。这个命令实际上是启动了一段node脚本，那这个脚本引用了哪些包呢？让我们来一探究竟。semver概述：这个包是用来做版本号规范处理的，可以校验一个输入的版本号是否符合规范，以及某个包是否满足某个版本。实例:检测本机node版本是否符合vue-cli需求的node版本。if (!semver.satisfies(process.version, requiredVersion)) { error( You are using Node ${process.version}, but vue-cli-service + requires Node ${requiredVersion}.\nPlease upgrade your Node version. ) process.exit(1)}npm 链接：https://www.npmjs.com/package…minimist概述：这个包是用来处理命令行的参数输入的。实例：检测命令行参数中是否有如下几个参数const args = require(‘minimist’)(rawArgv, { boolean: [ // build ‘modern’, ‘report’, ‘report-json’, ‘watch’, // serve ‘open’, ‘copy’, ‘https’, // inspect ‘verbose’ ]})npm链接：https://www.npmjs.com/package…debug概述： 一个轻量级的调试工具，根据参数返回一个打印错误的函数。看起来是可以让不同的错误输出更清晰，颜色很美。实例: 为不同的错误创建不同的错误输出函数const logger = debug(‘vue:env’); //调用该函数会输出以vue:env开头的字符串。//…此处省略好多业务代码debug(‘vue:project-config’)(this.projectOptions) // 输出vue:project-config开头的字符串。npm链接：https://www.npmjs.com/package…chalk概述：可以以不同的样式输出字符串到终端实例：打印不一段字符串，其中关键字加粗if (fileConfig) { if (pkgConfig) { warn( "vue" field in package.json ignored + due to presence of ${chalk.bold('vue.config.js')}. ) warn( You should migrate it into ${chalk.bold('vue.config.js')} + and remove it from package.json. ) } resolved = fileConfig resolvedFrom = ‘vue.config.js’}npm链接：https://www.npmjs.com/package…joi概述：一个js类型&字段验证的库。类似schemas的概念。实例：vue-cli中为了确保配置对象的正确性，定义了一个蓝本，去校验配置的正确性（主要是校验用户配置，例如vue.config.js中的输入）const schema = createSchema(joi => joi.object({ baseUrl: joi.string().allow(’’), publicPath: joi.string().allow(’’), outputDir: joi.string(), assetsDir: joi.string().allow(’’), indexPath: joi.string(), filenameHashing: joi.boolean(), runtimeCompiler: joi.boolean(), transpileDependencies: joi.array(), productionSourceMap: joi.boolean(), parallel: joi.boolean(), devServer: joi.object(), pages: joi.object().pattern( /\w+/, joi.alternatives().try([ joi.string(), joi.object().keys({ entry: joi.string().required() }).unknown(true) ]) ), crossorigin: joi.string().valid([’’, ‘anonymous’, ‘use-credentials’]), integrity: joi.boolean(), // css css: joi.object({ modules: joi.boolean(), extract: joi.alternatives().try(joi.boolean(), joi.object()), sourceMap: joi.boolean(), loaderOptions: joi.object({ css: joi.object(), sass: joi.object(), less: joi.object(), stylus: joi.object(), postcss: joi.object() }) }), // webpack chainWebpack: joi.func(), configureWebpack: joi.alternatives().try( joi.object(), joi.func() ), // known runtime options for built-in plugins lintOnSave: joi.any().valid([true, false, ’error’]), pwa: joi.object(), // 3rd party plugin options pluginOptions: joi.object()}))npm链接：https://www.npmjs.com/package…lodash.defaultsDeep概述：lodash这个包提供的一个函数，有点类似Object.assign()这个函数，可以用来默认参数填充。实例：vue中，合并用户配置(vue.config.js)与默认配置。// lodash官方案例：.defaultsDeep({ ‘a’: { ‘b’: 2 } }, { ‘a’: { ‘b’: 1, ‘c’: 3 } });// => { ‘a’: { ‘b’: 2, ‘c’: 3 } }// vue-cli中的应用this.projectOptions = defaultsDeep(userOptions, defaults());// 这里贴上vue-cli的默认配置exports.defaults = () => ({ // project deployment base publicPath: ‘/’, // where to output built files outputDir: ‘dist’, // where to put static assets (js/css/img/font/…) assetsDir: ‘’, // filename for index.html (relative to outputDir) indexPath: ‘index.html’, // whether filename will contain hash part filenameHashing: true, // boolean, use full build? runtimeCompiler: false, // deps to transpile transpileDependencies: [/* string or regex */], // sourceMap for production build? productionSourceMap: !process.env.VUE_CLI_TEST, // use thread-loader for babel & TS in production build // enabled by default if the machine has more than 1 cores parallel: hasMultipleCores(), // multi-page config pages: undefined, // <script type=“module” crossorigin=“use-credentials”> // #1656, #1867, #2025 crossorigin: undefined, // subresource integrity integrity: false, css: { // extract: true, // modules: false, // localIdentName: ‘[name][local]_[hash:base64:5]’, // sourceMap: false, // loaderOptions: {} }, // whether to use eslint-loader lintOnSave: true, devServer: { /* open: process.platform === ‘darwin’, host: ‘0.0.0.0’, port: 8080, https: false, hotOnly: false, proxy: null, // string | Object before: app => {} */ }})