-
vue-cli脚手架 vue和vue-cli-service命令详解
2020-03-16 21:01:58create vue create 后面有很多参数: 源码如下: program .command('create <... .description('create a new project powered by vue-cli-service') .option('-p, --preset <presetName>', 'Skip ...create
vue create 后面有很多参数:
源码如下:
program .command('create <app-name>') .description('create a new project powered by vue-cli-service') .option('-p, --preset <presetName>', 'Skip prompts and use saved or remote preset') .option('-d, --default', 'Skip prompts and use default preset') .option('-i, --inlinePreset <json>', 'Skip prompts and use inline JSON string as preset') .option('-m, --packageManager <command>', 'Use specified npm client when installing dependencies') .option('-r, --registry <url>', 'Use specified npm registry when installing dependencies (only for npm)') .option('-g, --git [message]', 'Force git initialization with initial commit message') .option('-n, --no-git', 'Skip git initialization') .option('-f, --force', 'Overwrite target directory if it exists') .option('--merge', 'Merge target directory if it exists') .option('-c, --clone', 'Use git clone when fetching remote preset') .option('-x, --proxy', 'Use specified proxy when creating project') .option('-b, --bare', 'Scaffold project without beginner instructions') .option('--skipGetStarted', 'Skip displaying "Get started" instructions') .action((name, cmd) => { const options = cleanArgs(cmd) if (minimist(process.argv.slice(3))._.length > 1) { console.log(chalk.yellow('\n Info: You provided more than one argument. The first one will be used as the app\'s name, the rest are ignored.')) } // --git makes commander to default git to true if (process.argv.includes('-g') || process.argv.includes('--git')) { options.forceGit = true } require('../lib/create')(name, options) })
从上面的代码可以很清楚的看出vue create后面跟的参数
vue create执行过程
vue create ===>
create.js ===>
Creator.js ===>
如果有preset加载preset ===>
OS模块创建系统临时文件夹(os 模块提供了一些基本的系统操作函数)===>
有远程preset,使用download-git-repo下载仓库 ===>
从临时文件夹获取内容写入到实际文件夹(通过fs模块操作)
vue-cli-service
vue-cli-service就像create-react-app的react-scripts, 将项目打包,启动等命令集成到了该命令中,在源码中对应的包是packages/vue/cli-service
如图:
入口文件会指向Service.js
const Service = require('../lib/Service') const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd()) const rawArgv = process.argv.slice(2) const args = require('minimist')(rawArgv, { boolean: [ // build 'modern', 'report', 'report-json', 'inline-vue', 'watch', // serve 'open', 'copy', 'https', // inspect 'verbose' ] }) const command = args._[0] service.run(command, args, rawArgv).catch(err => { error(err) process.exit(1) })
Serveice.js
执行constructor()实例化===>
this.pkg = this.resolvePkg(pkg) ===>
this.plugins = this.resolvePlugins(plugins, useBuiltIn)===>
实例 service.run()
resolvePkg(pkg)
通过resolvePkg(pkg)解析package.json, pkg当前命令执行所在的目录
返回值是package.json的路径
resolvePlugins
1,加载commands下的命令文件,并格式化为
[ { id:'built-in:文件路径', apply: '命令文件' } ]
2,若dependencies和devDependencies中存在plugins,一并加入到当前plugins数组
判断是否有插件的规则:
id满足下面的正则表达式
/^(@vue\/|vue-|@[\w-]+(\.)?[\w-]+\/vue-)cli-plugin-/
id在this.pkg.optionalDependencies中
3,加载本地的plugins
判断是否存在:this.pkg.vuePlugins && this.pkg.vuePlugins.service
格式:
[ { id: `local:${file}`, apply: loadModule(`./${file}`, this.pkgContext) } ]
run
在run中根据vue-cli-service参数 获取到对应的命令文件,执行该命令文件的函数
分析serve.js执行过程
webpack配置,通过chainWebpack引入
webpack配置文件
run方法
这里面有一个难点,就是registerCommand在哪里定义,通过分析源码可以得到,在PluginApi中中定义了方法registerCommand()方法,如图:
下面代码中的this.service指向Service实例
到这里执行命令前的逻辑基本完毕,接下来就是执行了。
-
vue-cli的vue-cli-service命令的默认环境
2020-08-22 21:16:40在运行或者打包Vue项目时,我们常用的命令是:npm run build,npm run serve等样式。其中build和serve是在vue项目的package.json中进行定义,是一个脚本。例如: ... "build": "vue-cli-service build",在运行或者打包Vue项目时,我们常用的命令是:npm run build,npm run serve等样式。其中build和serve是在vue项目的package.json中进行定义,是一个脚本。例如:
{ "name": "test02", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
在上面的脚本定义中,server、build等是可以按照自己的方式进行命名的,例如myserver、mybuild,对应的运行命令就是:
npm run mybuild
npm run myserve
上面的命令本质上是下面的命令,都可以在命令行方式下运行:
vue-cli-service serve
vue-cli-service build
运行截图如下:
下面讲一下vue-cli-service serve和vue-cli-service build的默认环境,因为曾经遇到出现一个问题:项目中有一个环境参数文件.env.development。在WebStorm中运行npm run serve,前后端是通的。但是当运行npm run build打包部署到Apache Server中后,前后端是不通的。检查后发现原因是上面两个命令默认的环境是不一样的,看下面两个运行截图就知道了:
第一个脚本默认对应的是development环境,第二个脚本默认对应的是production环境(没有对应的环境设置文件也不影响,有对应的环境设置文件就用文件里面设置的参数)。如果不注意这点,就会出现部署后运行情况和没有部署运行情况不一致的情况,其背后的原因就是默认环境。如何修改每个脚本对应的环境?非常简单,直接在package.json文件中修改。
将这个图与第二个图进行比较,环境参数已经发生改变。环境设置文件的命名规范是:.env.xxx,XXX在上图中为development,一般有意义或者惯例的名字即可,右边–mode后面的参数名字需要与左边文件的XXX完全相同(可能有多个环境设置文件)。某个脚本运行后,将会出现XXX的名字,例如上图的【 Building for development…】。
-
vue-cli 3.0 vue-cli-service.js解读
2019-04-26 17:51:25#!/usr/bin/env node const semver = require('semver...const { error } = require('@vue/cli-shared-utils') const requiredVersion = require('../package.json').engines.node if (!semver.satisfies(process....#!/usr/bin/env node const semver = require('semver') const { error } = require('@vue/cli-shared-utils') const requiredVersion = require('../package.json').engines.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) } const Service = require('../lib/Service') const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd()) // 传入当前项目的所在路径 /Users/zyn/WebRoot/Demo/uiit-test const rawArgv = process.argv.slice(2) // [ 'serve' ] [ 'serve', '--port', '3000' ] // minimist 命令行参数解析器 const args = require('minimist')(rawArgv, { boolean: [ // build 'modern', 'report', 'report-json', 'watch', // serve 'open', 'copy', 'https', // inspect 'verbose' ] }) // vue-cli-service serve --port 3000 args 包含 {port: 3000} const command = args._[0] // serve service.run(command, args, rawArgv).catch(err => { error(err) process.exit(1) })
-
Vue - Vue Cli 3.0 之 vue-cli-service
2018-06-26 10:37:14样例 新建项目后,package.json 下的 script &quot;...vue-cli-service serve&quot;, &quot;build&quot;: &quot;vue-cli-service build&quot;,样例
新建项目后,
package.json
下的script
"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e", }
vue-cli-service serve
options
参数如下Usage: vue-cli-service serve [options] Options: --open open browser on server start --copy copy url to clipboard on server start --mode specify env mode (default: development) --host specify host (default: 0.0.0.0) --port specify port (default: 8080) --https use https (default: false)
vue-cli-service build
options
参数如下Usage: vue-cli-service build [options] [entry|pattern] Options: --mode specify env mode (default: production) --dest specify output directory (default: dist) --modern build app targeting modern browsers with auto fallback --target app | lib | wc | wc-async (default: app) --name name for lib or web-component mode (default: "name" in package.json or entry filename) --no-clean do not remove the dist directory before building the project --report generate report.html to help analyze bundle content --report-json generate report.json to help analyze bundle content --watch watch for changes
更多内容见
-
vue-cli系列之vue-cli-service整体架构浅析
2020-12-07 11:32:18vue启动一个项目的时候,需要执行npm run serve,其中这个serve的内容就是vue-cli-service serve。可见,项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东(主要... -
vue-cli创建vue项目基本流程
2021-03-03 21:05:451、vue-cli基本介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整...CLI 服务:@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上(提供 如:serve、build 和 inspect 命令) CLI 插 -
Service Status - Monitor the current status & see incident reports for the website & registry Project Status - See the health of all our maintained OSS projects in one view Events Calendar -...
-
关于vue-cli 中执行的 vue-cli-service
2020-04-21 17:17:20最近又整回vue去了,不说了,还是脚手架先整吧。..."scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, 这里执行的是vue-cli... -
vue-cli系列之vue-cli-service整体架构浅析。
2019-01-13 07:47:42vue启动一个项目的时候,需要执行npm run serve,其中这个serve的内容就是vue-cli-service serve。可见,项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东(主要... -
vue-cli3 vue.config.js基本配置
2019-07-23 09:21:48module.exports = { // 用法和 webpack 本身的 output.publicPath 一致,但是 Vue CLI 在一些其他地方也需要用到这个值, // 所以请始终使用 publicPath 而不要直接... // 当运行 vue-cli-service build 时生成... -
vue-cli3 vue.config.js配置
2019-02-25 11:35:48// vue.config.js module.exports = { // 选项… ... // 当使用 pages 选项构建多...// 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关... -
vue-cli使用vue-cli-plugin-electron-builder插件,运行时不启动electron程序?
2020-05-23 00:12:00记录一个关于vue-cli的小小小小坑儿 前段时间使用vue-cli-plugin-electron-builder插件配合vue-cli 3.x/4.x搭建electron项目。 在我的电脑上运行npm run... vue-cli-service electron:serve INFO Starting development -
vue-cli3 vue.config.js 配置entry 引入mock..js
2020-06-17 14:16:13"serve": "cross-env NODE_ENV=development vue-cli-service serve", "build": "cross-env NODE_ENV=production vue-cli-service build", } vue.cofig.js configureWebpack: (config) => { -
使用proxyTable 解决webpack+vue-cli+vue-resource中跨域问题
2017-07-12 08:36:00这里,我说的是使用webpack+vue-cli+vue-resource中跨域问题, 在config文件下面有index.js文件里有一个叫proxyTable的配置参数 proxyTable: { '/restful':{ target:'http://xxxxx/member/service/'... -
vue-cli-service 机制
2020-02-27 14:50:39vue-cli-service 机制 使用了近一年的vue-cli, 一直都不知道npm run dev 之后发生了些什么???随手记录下学习笔记 入口 从package.json里面可以看到npm run dev其实就是vue-cli-service serve vue-cli3.0 安装... -
vue-cli 3.0脚手架cli-service配置
2019-07-17 17:27:24CLI服务 在package.json使用默认预设的项目... "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } 您可以使用npm或Yarn调用这些脚本: npm run serve # OR yarn serve 如果您有npx... -
Vue工具系列--vue-cli-service
2021-01-22 00:18:30其他网址 https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve -
vue-cli 3.0 脚手架cli-service配置说明
2021-01-04 16:16:57"serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" } serve配置 --open 服务器启动时打开浏览器 --copy 将URL复制到服务器启动时的剪贴板 (直接... -
vue-cli 3学习之vue-cli-service插件开发(注册自定义命令)
2019-02-25 19:55:05提到 vue-cli,官方文档对其的介绍如下: A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具。 说白了,vue-cli 其实就是一个基于webpack构建,可以让用户快速初始化一个项目... -
$ vue-cli-service serve ‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
2021-03-11 16:56:21$ vue-cli-service serve ‘vue-cli-service’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 error Command failed with exit code 1. info Visit ... -
vue-cli3取消eslint vue-cli-service lint
2019-12-17 11:13:421 删除eslintrc.js 2 项目隐藏文件夹.git hooks中 删除所有带pre-commit字段的文件 3 package.json中 删除所有带lint字段的行,删除node_modules,重新npm install