精华内容
下载资源
问答
  • vue启动一个项目的时候,需要执行npm run serve,其中这个serve的内容就是vue-cli-service serve。可见,项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东(主要...
  • 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 - 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-cli,官方文档对其的介绍如下: A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具。 说白了,vue-cli 其实就是一个基于webpack构建,可以让用户快速初始化一个项目...

    前言

    vue-cli 3学习之vue-cli-service插件开发(注册自定义命令)

    提到 vue-cli,官方文档对其的介绍如下:

    A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具。

    说白了,vue-cli 其实就是一个基于webpack构建,可以让用户快速初始化一个项目的工具。

    基本原理: vue-cli并非从无到有地凭空生成一个项目,而是通过下载/拉取(通过download-git-repo工具)已有的工程到本地,完成生成项目的工作。

    • 注意安装vue-cli 3前,如若已安装旧版本vue-cli,需先卸载旧版本vue-cli,再重新安装vue-cli 3
    • node版本要求: 安装 Node.js8.9 或更高版本

    这次我分享的主要主要内容是 vue-cli 3,当然不是全面的介绍,只是将我这次运营系统工作流改造中遇到比较深刻的点进行一番简单介绍

    而对于根据我个人对vue-cli 3的认识,我将需掌握的内容概括为四个部分:Vue.config.jsVue-cli-service插件UI

    概括:

    下面这张图是我对vue-cli 3 知识点进行了一个简单的概括

    比较常接触到vue一些基本的命令,比如说:

    • vue create: 快速初始化一个项目
    • vue serve:为某个原型(如:单独一个vue文件)快速启动一个服务(要求全局安装@vue/cli-service-global
    • vue ui: 通过图形化界面创建或管理界面

    接下来谈一谈 Vue.config.js

    我觉得对于一个普通的项目的工作流构建来说,配置vue.config.js足够了

    而里面比较特别和常用的主要是以下这些:除了 publicPathoutputDirfilenameHashingpages 等这些常用字段外,我觉得还需要提一下的是 configureWebpack 字段和 chainWebpack 字段

    我对这两个字段的理解是

    • configureWebpack 是让用户字段写一个配置对象,其内部再通过webpack-merge将原有对象和用户配置的对象进行合并
    • chainWebpack 是通过利用webpack-chain提供的链式调用方法去直接修改原有的配置对象
      在这里插入图片描述

    对于 vue-cli 3来说,它还存在一个比较特别的模块,就是它提供了自定义插件的功能

    插件

    说到vue-cli 3 的插件,其实可以将其分为两种情况:

    1. 一种是vue-cli插件,这种情况一般是对外的,主要是开发一些npm包,并将其发布到npm上;

    2. 另一种就是service 插件, 也就是我这次工作流改造中用到的主要内容,其主要包括內建命令和配置模块,而这两部分的内容都是在调用vue-cli-service命令时才会触发;因此,使用到service插件的用户,需要安装一下vue-cli-service

    • Cli插件(GeneratorPrompts):为@vue/cli项目添加额外特性的 npm 包
    • service插件(內建命令和配置模块):会在一个Service实例被创建时自动加载——比如每次vue-cli-service命令在项目中被调用时。
    Vue-cli-service
    1. 內建命令

    该功能的实现主要是调用了api.registerCommand这个方法向vue-cli-service内部注入额外的命令,vue-cli 3提供的vue-cli-service servevue-cli-service build等命令的实现也是利用了这个方法。

    1. 配置模块

    该功能的实现则是利用的api.chainWebpackapi.configureWebpack方法对webpack配置进行修改。

    1. 注:稍后我会在文章的下面给出一个自定义命令的 demo
    // 可以通过下面这个命令查看所有命令,从而确认自定义的命令是否创建成功
    npx vue-cli-service help
    

    在这里插入图片描述

    然后接下来看一看具体实操例子

    需求场景

    1. 支持watchbuild命令,并满足以下功能
    2. 同时支持--key命令读取.json文件中的key来进行构建,并支持多个key
    3. 同时支持.json配置文件,可以指定entry路径和output路径

    需求示例:

    # watch 监听某个入口的文件变动并编译
    $ node ./scripts/Bundler.js watch --key=[your_key]
    
    # build 打包编译某个入口的文件(生产模式)
    $ node ./scripts/Bundler.js build --key=[your_key]
    

    这对第三点,假设项目根目录下有 Views.json 文件,形如:

    {
      "basePath": "resources/assets/js/views",
      "destBasePath": "public/js/res",
      "entry": {
        "page": { // 入口的唯一命名,打包和开发时要用到的 key 值
          "name": "page", // 入口文件的文件名(例如 queryDetail.js)
          "srcPath": "job/template/page", // JS 入口源文件所在的文件夹的根目录
          "output": "page" // 输出文件的名称
          "description": "页面功能描述", // 页面功能描述,不启任何作用
        }
      }
    }
    

    然而我为什么没有直接使用vue-cli-service提供的servebuild命令呢?

    原因如下:
    对于watchbuild命令,其实他们除了要求具备vue-cli-service提供的servebuild命令效果外,还得让用户通过--key传入打包入口,而vue-cli-service提供的这些命令是其内部写好了的,我们无法对其内部进行修改,所以为了实现这个需求,我们需要进行自定义命令。

    解决方式:

    要实现 watchbuild 功能,其实在 vue-cli 3vue-cli-service 有提供了相对应的 api 给用户进行调用,也就是注册自定义的命令,实际上就是向 vue-cli-service 注入额外的命令。

    注册命令的第一种方式 ---- 使用 vue-cli-service 插件

    以注册watch命令为例,做一个小demo

    demo github 地址

    1. 新建一个项目
    // 首先进行 vue-cli 安装
    npm i -g @vue/cli
    // 查看是否安装成功,看到版本号就是安装成功了
    vue -V
    // 新建一个项目
    vue create 项目名
    
    1. 针对已有项目使用 vue-cli-service

    安装vue-cli-service

     // 进行 vue-cli-service 安装
     npm i -D @vue/cli-service
    
    1. package.json中的vuePlugins对象中的service字段引入相应的js文件(用于注册watch 命令的文件, 假设该文件名为:vue-cli-plugin-watch.js,并放在根目录)
     // package.json 中
     // 注册命令的 js 文件名为 vue-cli-plugin-watch.js
     {
       "scripts": {
        "watch": "vue-cli-service watch"
       },
       "vuePlugins": {
          "service": [
            "./vue-cli-plugin-watch"
          ]
       }
     }
    
    1. vue-cli-plugin-watch.js 代码如下
    module.exports = (api, projectOptions) => {
      api.registerCommand('watch', {
      	description: 'watch plugin for vue cli 3',
      	usage: 'vue-cli-service watch',
      	options: {
    
        }
      }, (args) => {
        console.log('watch 命令注册成功')
      })
    }
    
    1. 在终端输入npm run watch,看到终端输出“watch命令注册成功”后,恭喜watch命令基本注册完成啦。

    可以通过运行npx vue-cli-service help查看vue-cli-service下面的所有命令,可以看到新增加了一个watch命令
    在这里插入图片描述

    1. 补充:另外,对于一个插件的使用,我们可以选择性的让用户进行一些设置;通过让用户在vue.config.js中的pluginOptions向插件进行传参数

    在项目根目录创建vue.config.js文件

    // vue.config.js相关代码
    module.exports = {
      pluginOptions: {
        watch: {
          // vue-cli-plugin-watch 插件可以作为 `projectOptions.pluginOptions.watch` 访问这些选项,其他插件也可以拿到
          param: '传参数给內建插件'
        }
      }
    }
    

    修改vue-cli-plugin-watch.js 代码如下

    module.exports = (api, projectOptions) => {
      api.registerCommand('watch', {
      	description: 'watch plugin for vue cli 3',
      	usage: 'vue-cli-service watch',
      	options: {}
      }, (args) => {
        // 输出传入的参数
        console.log('watch 命令注册成功')
        // projectOptions 拿到的是 vue.config.js 文件暴露出来的配置
        console.log(projectOptions.pluginOptions.watch.param)
        // 通过终端传进来的参数
        const key = args.key ? args.key : process.env.npm_config_key
        console.log(`--key = ${key}`)
      })
    }
    

    运行npm run watch命令,可见终端输出了‘传参数给內建插件’,即通过vue-config.js传参成功
    运行npm run watch命令,可见终端输出了‘传参数给內建插件’,即传参成功

    其实再去看看build命令的实现源码,其实和上面watch的实现是差不多的

    Vue-cli-service build 命令源码
    在这里插入图片描述
    注册命令后,就可以通过调用 api.resolveWebpackConfig() 取回解析好的 webpack 配置。每次调用都会新生成一个 webpack 配置用来在需要时进一步修改。

    module.exports = api => {
      api.registerCommand('my-build', args => {
        const configA = api.resolveWebpackConfig()
        const configB = api.resolveWebpackConfig()
    
        // 针对不同的目的修改 `configA` 和 `configB`...
      })
    }
    

    也可以通过调用 api.resolveChainableWebpackConfig() 获得一个新生成的链式配置

    api.registerCommand('my-build', args => {
      const configA = api.resolveChainableWebpackConfig()
      const configB = api.resolveChainableWebpackConfig()
    
      // 针对不同的目的链式修改 `configA` 和 `configB`...
    
      const finalConfigA = configA.toConfig()
      const finalConfigB = configB.toConfig()
    })
    

    再看回operation的项目需求,要求实现watchbuild,watch实现还好说,但是考虑到直接使用vue-cli-service的内建命令模块实现build会将其原有的命令进行覆盖,这种操作不太理想,所以改用了另外一种实现方式:使用 commander 实现注册命令。

    注册命令的第二方式 ---- Commander

    • 定制自己的命令watch

    demo github源码地址

    主要实现代码如下:
    在这里插入图片描述
    demo具体步骤:

    1. 初始化一个项目
    2. 在根目录下创建一个script文件夹,在该文件夹目录下新建一个用于实现注册命令的js文件,我在这创建的文件名为commandar-watch.js
    // 安装 Commander
    npm install Commander -D
    
    // commandar-watch 具体实现代码
    // 注:可同时注册多个命令
    
    const program = require('commander')
    
    program.version('0.1.0')
      .option('-k, --key [type]', 'key to build')
    
    program
      .command('watch')
      .description('run the given remote command')
      .action(function(){
        console.log('watch 命令注册成功')
    
        /**
         * 用户传进来的 key 值
         * yarn 运行命令时,可通过 program.key 获取到用户传进来的 key 值
         * npm 运行命令时,需通过 process.env.npm_config_key 获取到用户传进来的 key 值
         */
        const key = program.key ? program.key : process.env.npm_config_key
        console.log(key)
    })
    
    program.parse(process.argv)
    
    1. package.json文件中scriptswatch中,使用node执行commandar-watch.jswatch命令
    {
    "scripts": {
        "watch": "node ./script/commandar-watch.js watch",
      },
    }
    
    1. 在终端执行npm run watch命令,看到终端输出‘watch 命令注册成功’后,恭喜watch命令注册成功啦。当然,你也可以传入--key的值,如:npm run watch --key=用户传的key值,可见到终端输出‘用户传的key值’,证明已经获取到用户传的参数啦。

    再谈谈项目中 build 和 watch 的不同点

    其实这两个命令主要用到的配置还是Vue-cli 3提供的基本配置,在再次基础上针对不同页面特别设置一些配置,比如说针对某些页面需要进行css提取,还有不同页面设置不同的entryoutput等等。而着这两个命令的主要区别就是Watch 字段、不同mode;对于是否压缩打包,我通过设置不同的环境模式从而设置文件是否需要打包(webpack 4提供了这个功能);至于是否需要监听文件的改变功能的实现,我借鉴了vue-cli-service build命令的--watch实现方式。

    vue-cli-service build --watch ,核心代码 是获取webpack 配置,并将配置对象的watch字段的值设置为true。在这里插入图片描述

    注: vue-cli-service中的build命令--watch的实现源码地址

    Public 文件夹

    主要用来放置一些无需经过webpack处理的静态资源或模板等等。其目录下的内容会被直接拷贝到构建输出目录下
    关于存在原因:index.html模板,动态引入图片,引入不兼容模块

    实现源码
    在这里插入图片描述

    推荐使用 inspect

    审查 vue-cli 项目的 webpack 配置,可以很方便将查看使用 vue-cli 3配置后,其具体的 webpack配置
    在这里插入图片描述

    结语

    针对这次分享的内容,虽然说我侧重分享了插件部分的内容,但是并不意味着vue-cli 3 内容只有这些,只是我这次开发中遇到比较多的模块就是service插件这一块,所以就特别提了一下,它还有其他的内容比如说ui那一块等等;

    体会:
    在开发过程中,当遇到,对api不熟悉,造成无法很好的运用好某些api的情况时,其实可以考虑去研究研究一下源码,会发现事情变得简单,其实在vue-cli 的官网里面也有提到配合源码去学习api,这才能真正灵活的使用对应的功能等等。
    在这个项目里面,我就是在一边学习一边实现需求。还有,考虑问题要全方面的想,多测试一些页面。比如说npmyarn在终端中的传参方式不一样,导致代码中获取的key值方式也不一样这个问题,就是得多测试才会发现。还有要多请教一些前辈,你会发现有时候经验对于开发方式和开发效率来说,真的很重要。

    参考文章:

    拓展文章:

    展开全文
  • 本篇文章我们将会从认识vue-cli , 安装vue-cli, 使用vue-cli创建项目三个方向学会使用VUE CLI 来创建一个vue项目 认识VUE CLI 简单的理解vue cli 就是一个快速构建项目的工具。存在于整个vue生态系统的工具模块,是...

    使用Vue CLI创建项目的步骤!

    本篇文章我们将会从认识vue-cli , 安装vue-cli, 使用vue-cli创建项目三个方向学会使用VUE CLI 来创建一个vue项目

    认识VUE CLI

    简单的理解vue cli 就是一个快速构建项目的工具。存在于整个vue生态系统的工具模块,是一个基于 Vue.js 进行快速开发的完整系统,该系统有几个独立的部分,CLI, CLI服务,CLI插件
    1.CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目,或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

    2.CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包,局部安装在每个 @vue/cli 创 建的项目中。CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了:加载其它 CLI 插件的核心服务;一个针对绝大部分应用优化过的内部的 webpack 配置;项目内部的 vue-cli-service 命令,提供 serve、build 和 inspect 命令

    3.CLI 插件是向你的 Vue 项目提供可选功能的 npm 包,例如 Babel/TypeScript 转译、ESLint 集成、单 元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头,非常容易使用。当你在项目内部运行 vue-cli-service 命令时,它会自动解析并加载 package.json 中列出的所有 CLI 插件。

    安装VUE CLI

    1.安装命令
    在这里插入图片描述
    2.检查安装是否成功
    插入图片描述
    看到vue-cli的版本信息安装就成功了!就可以愉快的进入项目搭建环节了

    使用VUECLI创建项目

    1.确定好创建项目的位置,

    我喜欢直接创建在桌面,如下图直接点击桌面在地址栏输入cmd回车就激活了黑窗口了(如果你喜欢把项目保存在其他的地方也可采用同样的方式,当然你也可以在桌面创建好项目后在拖到你想要的文件夹下)
    在这里插入图片描述

    2.激活黑窗口后使用 vue create 项目名 这个命令创建项目 我的项目名是 sanmu

    在这里插入图片描述

    3.回车后会让你选择创建模式 自定义创建和默认创建

    Manually select features – 这一句可以理解为自定义创建可以更具需要手动选择配置
    default (babel, eslint) – 这一句可以理解为默认创建只有babel 和 eslint 两项配置
    自动选则的是默认创建,但是我们很多时候需要自定义创建,你可以点击键盘的向下箭头在点击空格选择第二个自定义创建
    在这里插入图片描述

    4.自定义更具需要选择配置

    各项配置说明:

    • Babel:es6 转 es5
    • TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括:
    • Progressive Web App (PWA) Support是Google推出的平时我也没使用过感兴趣的小伙伴可以百度一下
    • Router:路由。在脚手架工具中,它会自动在本项目中使用路由,创建好基本的路由配置(不再需要手动去安装vue-router)。`
    • Vuex;是vue的状态化管理模式,如果项目大可以选择vuex来管理数据
    • CSS Pre-processors:CSS 预处理器,后续会提示你选择 less、sass、stylus 等
    • Linter / Formatter:代码格式校验,ESLint 代码格式校验。后续会再次让你具体选择eslint的标准。
    • Unit Testing 单元测试
    • E2E Testing 测试
      在这里插入图片描述
      选择好你需要的配置就直接回车!(使用方向箭和空格选择你需要的配置)
    5.路由模式选择

    是否使用 history 路由模式,这里输入 n ,不使用history模式,而是用hash模式。
    在这里插入图片描述

    6.选择css预处理的

    根据自己的需要选择css预处理的方式,我选择less
    在这里插入图片描述

    7.选择代码风格校验工具

    在这里插入图片描述
    回车选择后建议把下面两项检验都选择

    • Lint on save:在保存文件时会检查eslint错误。

    • Lint and fix on commit:每当执行 git commit 提交的时候,会自动修正eslint错误。
      在这里插入图片描述

    8.相关配置文件保存位置的选择

    在这里插入图片描述
    abel、ESLint 等工具会有一些额外的配置文件,这里的意思是问你将这些工具相关的配置文件写到哪里:

    • In dedicated config files:分别保存到单独的配置文件
    • In package.json:保存到 package.json 文件中
      这里建议选择第 1 个,保存到单独的配置文件,这样方便我们做自定义配置。
    9.最后一项是否保存当前配置

    ? Save this as a preset for future projects? (y/N) N
    这里里是问你是否需要将刚才选择的一系列配置保存起来,然后它可以帮你记住上面的一系列选择,以便下次直接重用。
    请根据自己需要输入 y 或者 n。
    在这里插入图片描述

    10.配置向导结束 开始装包构建项目

    开始装包构建项目啦,稍等片刻就好
    在这里插入图片描述

    11 项目创建成功

    在这里插入图片描述
    看到这样的页面就说名你的项目创建成功了 cd到项目文件下在npm run serve 启动项目就好了

    12 启动项目成功

    在这里插入图片描述
    项目启动成功后会在我们本地开启一个服务端口 把第一个复制到浏览器中就可以看到初始化的项目了

    13 在浏览器中浏览项目

    在这里插入图片描述
    创建成功后直接把项目文件夹托到编译器中查看项目的文件结构

    展开全文
  • 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-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、@vue/cli-service、插件和 Preset 文章目录Vue CLI 官方文档(一)@vue/cli、@vue/cli-service、插件和 Preset1. 介绍该系统的组件CLICLI 服务CLI 插件2. 安装升级项目依赖3. 基础-...
  • 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...
  • 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学习笔记】vue-cli-service的使用

    千次阅读 2020-09-05 10:47:37
    vue-cli项目中,会安装给一个名为vue-cli-service的命令。 vue-cli-servie serve vue-cli-service serve 会启动一个开发服务器(基于webpack-dev-server)并且附带了开箱即用的模块热重载(Hot-Module-...
  • 使用vue脚手架创建的项目 1.在项目根目录创建launch.json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, ...
  • 文章目录cli-vue3中引入f2uniapp - vue3引入F2cli-vue2中引入f2cli-vue3(以及vue2) Echarts引入 cli-vue3中引入f2 main全局配置 import * as F2 from '@antv/f2' const app = createApp(App); app.config....
  • vue启动报错’vue-cli-service serve’ 我百度了很多’vue-cli-service serve’报错解决, 最后发现我忽略了一句很重要的’ Cannot find module ‘vue-loader-v16/package.json’ 解决’Cannot find module ‘vue-...
  • vue启动一个项目的时候,需要执行npm run serve,其中这个serve的内容就是vue-cli-service serve。可见,项目的启动关键是这个vue-cli-service与它的参数serve。接下来我们一起看看service中主要写了什么东东(主要...
  • 文章目录一、安装最新vue-cli二、创建项目三、运行项目四、总结 提示:以下是本篇文章正文内容,仅供参考 一、安装最新vue-cli 官方网址:https://cli.vuejs.org/ 关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @...
  • vue-cli原始码分析 写在前面 其实最开始不是特意意来研究vue-cli的原始码,只是想了解下node的命令,如果想要了解node命令的话,那么绕不开写的 。...@ vue / cli-service 整体介绍 内置插件 请作者喝杯咖啡 :hot_be
  • 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....
  • vue打包测试环境时,改为调用测试的接口路径。 https://www.cnblogs.com/xzqyun/p/12739613.html
  • 安装 node 官网 node -v 安装 @vue/cli npm install -g @vue/cli ...create a new project powered by vue-cli-service add [options] [pluginOptions] install a plugin and invoke its generator in an already
  • 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
  • vue-cli 3.x整合cesuim超详细攻略及解释
  • vue-clivue脚手架)超详细教程

    万次阅读 2018-07-18 20:10:37
    都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐...
  • 基本概念 vue-cli:A simple CLI for scaffolding Vue.js ...官网:https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-build 文件结构 一个比较典型的用webpack管理的vue项目应该有如下文...
  • 基于vue-cli-service模块来进行环境的配置 当执行 vue-cli-service [参数] 会执行打包文件,根据参数的不同会去读取指定的文件,传入不同的环境变量 默认的环境变量配置文件 .env 全局默认配置文件,无论什么环境...
  • 主要介绍了vue-cli脚手架-bulid下的配置文件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue-cli4.5搭建vue3、ts项目

    千次阅读 2020-11-29 13:13:56
    Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。 安装新版本 npm install -g @...
  • 撸文档,Vue-CLI4、Vue-CLI3 与Vue-CLI2 之间的区别:使用后Vue-CLI4总体上与Vue-CLI3区别不大,Vue-CLI4与Vue-CLI2最直接的区别: 1、安装: Vue-CLI2: npm install -g vue-cli 或 cnpm install -g vue-cli V
  • vue-cli-service build 环境设置

    万次阅读 多人点赞 2018-12-26 14:09:53
    原文链接:vue-cli-service build 环境设置 使用vue-cli3打包项目,通过配置不同的指令给项目设置不一样的配置。 npm run serve时会把process.env.NODE_ENV设置为‘development’; npm run build 时会把process.env...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,555
精华内容 5,022
关键字:

cliservicevue

vue 订阅