vue-cli

卷菜包
230 阅读2分钟

vue-cli是一个快速开发vue.js完整系统：

提供：

  1. 项目式交互脚手架@vue/cli
  2. 运行时依赖
  • 可通过项目配置文件配置(@vue/cli-service);
  • 建立在webpack之上，有合理的默认设置;
  • 通过扩展插件，更新
  1. 丰富的官方插件集成的集合
  2. 创建和管理完整的图形用户界面

系统组件

CLI

CLI (@vue/cli)是一个完整安装的 npm 包，并在终端中提供“vue”命令。用vue create通过脚手架创建新的项目。也可通过vue ui使用图形用户界面管理项目。

CLI Service

CLI Service (@vue/cli-service)是一个开发依赖，通过@vue/cli(它是一个 npm 包)安装在创建的每个项目中。 CLI Service构建在webpack和webpack-dev-server中, 它包含:

  • 加载其他CLI插件的核心服务;
  • 针对大多数应用程序进行了优化的webpack内部配置；
  • 项目内部的vue-cli-service二进制文件，它附带了基本的serve和 inspect 和build命令。 @vue/cli-service大致相当于react-scripts，尽管功能集不同。

CLI Plugins

CLI插件是为你的Vue-CLI项目提供可选特性的npm包，比如Babel/TypeScript编译、ESLint集成、单元测试和端到端测试。当你在你的项目中运行vue-cli-service二进制文件时，它会自动解析并加载项目package.json中列出的所有CLI插件。
插件可以包含在项目创建过程中，也可以稍后添加到项目中。还可以将它们分组为可重用的预置。

package.json

浏览器兼容性

 browserslist 字段指定了项目的目标浏览器的范围。这个值会被@babel/preset-env和Autoprefixer用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
当你在package.json中添加以下内容时，所有的工具都会自动找到目标浏览器
Browserslist将使用caniuse-lite与Can I use数据查询。
Browserslist将从工具选项查询，Browserslist配置，.browserslistrc配置，Browserslist 部分在 package.Json或环境变量中。\

 "browserslist": [
    "> 1%",   
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]

HTML 和静态资源

index 文件
public/index.html 文件是一个会被html-webpack-plugin处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。)

avatar
文章
阅读
粉丝