精华内容
下载资源
问答
  • create 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-clivue-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…】。

    展开全文
  • #!/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 &amp;quot;...vue-cli-service serve&amp;quot;, &amp;quot;build&amp;quot;: &amp;quot;vue-cli-service build&amp;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

    更多内容见

    https://cli.vuejs.org/

    展开全文
  • vue启动一个项目的时候,需要执行npm run serve,其中这个serve的内容就是vue-cli-service serve。可见,项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东(主要...
  • 1、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启动一个项目的时候,需要执行npm run serve,其中这个serve的内容就是vue-cli-service serve。可见,项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东(主要...
  • module.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插件配合vue-cli 3.x/4.x搭建electron项目。 在我的电脑上运行npm run... vue-cli-service electron:serve INFO Starting development
  • "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) => {
  • 这里,我说的是使用webpack+vue-cli+vue-resource中跨域问题, 在config文件下面有index.js文件里有一个叫proxyTable的配置参数 proxyTable: { '/restful':{ target:'http://xxxxx/member/service/'...
  • vue-cli-service 机制

    千次阅读 2020-02-27 14:50:39
    vue-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:24
    CLI服务 在package.json使用默认预设的项目... "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } 您可以使用npm或Yarn调用这些脚本: npm run serve # OR yarn serve 如果您有npx...
  • 其他网址 https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve
  • "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" } serve配置 --open 服务器启动时打开浏览器 --copy 将URL复制到服务器启动时的剪贴板 (直接...
  • 提到 vue-cli,官方文档对其的介绍如下: A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具。 说白了,vue-cli 其实就是一个基于webpack构建,可以让用户快速初始化一个项目...
  • $ 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:42
    1 删除eslintrc.js 2 项目隐藏文件夹.git hooks中 删除所有带pre-commit字段的文件 3 package.json中 删除所有带lint字段的行,删除node_modules,重新npm install

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,608
精华内容 643
关键字:

cliservicevue

vue 订阅