深入剖析vue-cli脚手架

  • 一、vue-cli介绍
    • 1.该系统的组件
      • 1）CLI
      • 2）CLI 服务
      • 3）CLI 插件
  • 二、vue-cli安装
  • 三、vue-cli基础
    • 1.快速原型开发
      • 1）vue serve
      • 2）vue build
    • 2.创建项目
      • 1）vue create
      • 2）使用图形化界面
    • 3.插件和 Preset
      • 1）插件
      • 2）Preset
    • 4.vue-cli服务
      • 1）使用命令
      • 2）vue-cli-service serve
      • 3）vue-cli-service build
      • 4）vue-cli-service inspect
      • 5）.查看所有的可用命令
      • 6）.缓存和并行处理

一、vue-cli介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

  • 通过 @vue/cli 实现的交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service)，该依赖：
    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

1.该系统的组件

Vue CLI 有几个独立的部分——如果你看到了我们的源代码，你会发现这个仓库里同时管理了多个单独发布的包

1）CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。我们会在接下来的指南中逐章节深入介绍。

2）CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。
CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。它包含了：

  • 加载其它 CLI 插件的核心服务；
  • 一个针对绝大部分应用优化过的内部的 webpack 配置；
  • 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

如果你熟悉 create-react-app 的话，@vue/cli-service 实际上大致等价于 react-scripts，尽管功能集合不一样。

3）CLI 插件

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。

插件可以作为项目创建过程的一部分，或在后期加入到项目中。它们也可以被归成一组可复用的 preset。我们会在插件和 preset 章节进行深入讨论。

二、vue-cli安装

使用npm install -g @vue/cli安装之后，如需升级项目中的 Vue CLI 相关模块（以 @vue/cli-plugin- 或 vue-cli-plugin- 开头），请在项目目录下运行 vue upgrade

三、vue-cli基础

1.快速原型开发

你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：

npm install -g @vue/cli-service-global

1）vue serve

Usage: serve [options] [entry]//在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器

vue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件：

vue serve MyComponent.vue

2）vue build

Usage: build [options] [entry]//在生产环境模式下零配置构建一个 .js 或 .vue 文件

你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署：

vue build MyComponent.vue

vue build 也提供了将组件构建成为一个库或一个 Web Components 组件的能力。

2.创建项目

1）vue create

使用vue create *****命令来创建一个新项目：

vue create hello-world


你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

~/.vuerc
.
被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。
.
在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。


vue create 命令有一些可选项，你可以通过运行以下命令进行探索：

vue create --help
用法：create [options] <app-name>创建一个由 `vue-cli-service` 提供支持的新项目选项：-p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项-d, --default                   忽略提示符并使用默认预设选项-i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项-m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端-r, --registry <url>            在安装依赖时使用指定的 npm registry-g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息-n, --no-git                    跳过 git 初始化-f, --force                     覆写目标目录可能存在的配置-c, --clone                     使用 git clone 获取远程预设选项-x, --proxy                     使用指定的代理创建项目-b, --bare                      创建项目时省略默认组件中的新手指导信息-h, --help                      输出使用帮助信息

2）使用图形化界面

也可以使用vue ui命令以图形化界面创建和管理项目，上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
不过作为程序员，多数情况我们仍会使用命令面板操作创建流程。

3.插件和 Preset

1）插件

Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。

你可以通过 vue ui 命令使用 GUI 安装和管理插件。

  1. 在现有的项目中安装插件

每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件。当你使用 vue create 来创建一个新项目的时候，有些插件会根据你选择的特性被预安装好。如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add *** 命令：

vue add 的设计意图是为了安装和调用 Vue CLI 插件。这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包，你仍然需要选用包管理器。

我们推荐在运行 vue add 之前将项目的最新状态提交，因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件。

vue add @vue/eslint

这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint，然后从 npm 安装它，调用它的生成器。

//这个和vue add eslint的用法等价
vue add @vue/cli-plugin-eslint

如果不带 @vue 前缀，该命令会换作解析一个 unscoped 的包。例如以下命令会安装第三方插件 vue-cli-plugin-apollo

# 安装并调用 vue-cli-plugin-apollo
vue add apollo

你也可以基于一个指定的 scope 使用第三方插件。例如如果一个插件名为 @foo/vue-cli-plugin-bar，你可以这样添加它：

vue add @foo/bar

你可以向被安装的插件传递生成器选项 (这样做会跳过命令提示)：

vue add eslint --config airbnb --lintOn save

如果一个插件已经被安装，你可以使用 vue invoke 命令跳过安装过程，只调用它的生成器。这个命令会接受和 vue add 相同的参数。

注：如果出于一些原因你的 插件 列在了该项目之外的其它 package.json 文件里，你可以在自己项目的 package.json 里设置 vuePlugins.resolveFrom 选项指向包含其它 package.json 的文件夹。例如，如果你有一个 .config/package.json 文件：

{"vuePlugins": {"resolveFrom": ".config"}
}
  1. 项目本地的插件

如果你需要在项目里直接访问插件 API 而不需要创建一个完整的插件，你可以在 package.json 文件中使用 vuePlugins.service 选项：

{"vuePlugins": {"service": ["my-commands.js"]}
}

每个文件都需要暴露一个函数，接受插件 API 作为第一个参数。
你也可以通过 vuePlugins.ui 选项添加像 UI 插件一样工作的文件：

{"vuePlugins": {"ui": ["my-ui.js"]}
}

2）Preset

一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。

在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。

这里有一个 preset 的示例：

{"useConfigFiles": true,"cssPreprocessor": "sass","plugins": {"@vue/cli-plugin-babel": {},"@vue/cli-plugin-eslint": {"config": "airbnb","lintOn": ["save", "commit"]},"@vue/cli-plugin-router": {},"@vue/cli-plugin-vuex": {}}
}

Preset 的数据会被插件生成器用来生成相应的项目文件。除了上述这些字段，你也可以为集成工具添加配置：

{"useConfigFiles": true,"plugins": {...},"configs": {"vue": {...},"postcss": {...},"eslintConfig": {...},"jest": {...}}
}

这些额外的配置将会根据 useConfigFiles 的值被合并到 package.json 或相应的配置文件中。例如，当 “useConfigFiles”: true 的时候，configs 的值将会被合并到 vue.config.js 中。

  1. Preset 插件的版本管理

你可以显式地指定用到的插件的版本：

{"plugins": {"@vue/cli-plugin-eslint": {"version": "^3.0.0",// ... 该插件的其它选项}}
}

注意对于官方插件来说这不是必须的——当被忽略时，CLI 会自动使用 registry 中最新的版本。不过我们推荐为 preset 列出的所有第三方插件提供显式的版本范围。

  1. 允许插件的命令提示

每个插件在项目创建的过程中都可以注入它自己的命令提示，不过当你使用了一个 preset，这些命令提示就会被跳过，因为 Vue CLI 假设所有的插件选项都已经在 preset 中声明过了。

在有些情况下你可能希望 preset 只声明需要的插件，同时让用户通过插件注入的命令提示来保留一些灵活性。

对于这种场景你可以在插件选项中指定 "prompts": true 来允许注入命令提示：

{"plugins": {"@vue/cli-plugin-eslint": {// 让用户选取他们自己的 ESLint config，就是会显示提示信息"prompts": true}}
}
  1. 远程Preset

你可以通过发布 git repo 将一个 preset 分享给其他开发者。这个 repo 应该包含以下文件：

  • preset.json: 包含 preset 数据的主要文件（必需）。
  • generator.js: 一个可以注入或是修改项目中文件的 Generator。
  • prompts.js: 一个可以通过命令行对话为 generator 收集选项的 prompts 文件。

发布 repo 后，你就可以在创建项目的时候通过 --preset 选项使用这个远程的 preset 了：

# 从 GitHub repo 使用 preset
vue create --preset username/repo my-project
  1. 加载文件系统中的Preset

当开发一个远程 preset 的时候，你必须不厌其烦的向远程 repo 发出 push 进行反复测试。为了简化这个流程，你也可以直接在本地测试 preset。如果 --preset 选项的值是一个相对或绝对文件路径，或是以 .json 结尾，则 Vue CLI 会加载本地的 preset：

# ./my-preset 应当是一个包含 preset.json 的文件夹
vue create --preset ./my-preset my-project# 或者，直接使用当前工作目录下的 json 文件：
vue create --preset my-preset.json my-project

4.vue-cli服务

1）使用命令

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

这是你使用默认 preset 的项目的 package.json：

{"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"}
}

你可以通过 npm 或 Yarn 调用这些 script：npm run serve
如果你可以使用 npx (最新版的 npm 应该已经自带)，也可以直接这样调用命令：npx vue-cli-service serve

2）vue-cli-service serve

用法：vue-cli-service serve [options] [entry]选项：--open    在服务器启动时打开浏览器--copy    在服务器启动时将 URL 复制到剪切版--mode    指定环境模式 (默认值：development)--host    指定 host (默认值：0.0.0.0)--port    指定 port (默认值：8080)--https   使用 https (默认值：false)

vue-cli-service serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

3）vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]选项：--mode        指定环境模式 (默认值：production)--dest        指定输出目录 (默认值：dist)--modern      面向现代浏览器带自动回退地构建应用--target      app | lib | wc | wc-async (默认值：app)--name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)--no-clean    在构建项目之前不清除目标目录--report      生成 report.html 以帮助分析包内容--report-json 生成 report.json 以帮助分析包内容--watch       监听文件变化

vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。

这里还有一些有用的命令参数：

  • –modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。

  • –target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。

  • –report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

4）vue-cli-service inspect

你可以使用 vue-cli-service inspect 来审查一个 Vue CLI 项目的 webpack config。

用法：vue-cli-service inspect [options] [...paths]选项：--mode    指定环境模式 (默认值：development)

5）.查看所有的可用命令

有些 CLI 插件会向 vue-cli-service 注入额外的命令。例如 @vue/cli-plugin-eslint 会注入 vue-cli-service lint 命令。你可以运行以下命令查看所有注入的命令：npx vue-cli-service help

6）.缓存和并行处理

cache-loader 会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache 中——如果你遇到了编译方面的问题，记得先删掉缓存目录之后再试试看。
thread-loader 会在多核 CPU 的机器上为 Babel/TypeScript 转译开启。

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的文章啦！

Vue学习—深入剖析vue-cli脚手架（一）相关推荐

  1. Vue学习（常用实例、脚手架搭建）-学习笔记

    文章目录 Vue学习(常用实例.脚手架搭建)-学习笔记 实例1 法1 法2 实例2 脚手架搭建 vue-cli2.0 vue-cli4.0 Vue学习(常用实例.脚手架搭建)-学习笔记 附加:阿里巴巴 ...

  2. Vue学习笔记：使用CLI构建Vue项目

    Vue学习笔记:使用CLI构建Vue项目 一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...

  3. Vue学习笔记02——Vue路由

    Vue学习笔记01--Vue开发基础 一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...

  4. Vue学习笔记01——Vue开发基础

    一.Vue实例配置选项 选项 说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...

  5. Vue学习笔记(九) Vue CLI

    1.简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,它包括三个独立的部分: CLI:一个全局安装的 npm 包,提供在终端里使用的命令 CLI 服务:一个局部安装在使用了 @v ...

  6. 阿瑶的vue学习笔记(1)Vue核心

    1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者:尤雨溪 1.1.3. Vue的特点 遵 ...

  7. Vue 学习(十、 Vue Router - 路由插件 和 Vue 的插件原理)

    文章目录 一.Vue Router - 路由插件 1. 安装 Vue Router 2. Vue Router 路由的基本使用 3. 设置 router-link 4. 编程式路由 5. 路由嵌套 6 ...

  8. Vue学习日记之vue实例生命周期

      在vue实例开始创建.运行到销毁的过程,就是vue的生命周期 vue生命周期中发生(存在)的事件(这些事件可以用函数来表示),我们称之为生命周期钩子. 即:生命周期钩子=生命周期函数=生命周期事件 ...

  9. Vue学习记录三 --- vue的项目实战

    一.常规项目配置安装: 1.安装vue-router路由: cmd下在当前项目目录下执行 : npm install vue-router --save-dev 如果因为依赖安装失败,则执行 : np ...

最新文章

  1. 在WinForms中使用ActiveX
  2. Google protobuf解析消息逻辑的版本问题
  3. 大华web对接文档_分分钟了解Web接口测试
  4. 关于fragment backstate的运用
  5. 手写自己的MyBatis框架-V2.0配置文件
  6. 云解析DNS能为你做什么？
  7. 2008wsus创建和管理计算机组,Windows Server 2012 R2 WSUS-6：配置计算机组和客户端目标...
  8. varnish几个工具命令行工作情况
  9. 面向项目（八）—— #if defined 与 #ifdef
  10. cannot help doing用法
  11. AP注册不上线（现网中存在其它厂商的控制器）
  12. 【2022最新Java面试宝典】—— Java集合面试题（52道含答案）
  13. 东北大学22春学期《概率论X》在线平时作业123
  14. Mathpix Snip--图片中识别公式
  15. android微信打不开怎么办,微信打不开怎么回事 微信打不开怎么办
  16. [POI2012] 约会 Rendezvous
  17. 怎么合并mp3音频文件？
  18. php解压有密码的zip,linux下解压有密码的rar压缩包的方法
  19. day 09文件处理
  20. 2.5野兔和山猫的种群动态变化

热门文章

  1. OpenSSL心血漏洞分析
  2. 火狐浏览器更新版本之后总是在当前页面打开新链接覆盖掉原先内容
  3. 【ffmpeg】创建AAC编码器
  4. 计算机基础知识大眼睛,眼睛知识
  5. 基于Flexlive.CQP.Framework的C# 酷Q UDP实现
  6. react修改webpack配置，添加别名
  7. 自己写编程语言-m语言
  8. sublime text3 安装sublimelinter以及sublimelinter-php
  9. Linux之编写shell脚本
  10. 请问：现正在广告上的丰胸产物是不是实的？