「Vuejs」一步步看vue-cli4(基础4插件和 Prese

插件

• vuecli为了方便我们开发以及方便安装包为我们提供了插件的概念，
• Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。当然如果感兴趣的可以看一下官网提供的如何自定义的编写一个插件，这里暂且不赘述

• 之前我们在通过命令行或者vue ui安装的vue依赖其实就是插件，下面我们看一下package.json文件

  
  image.png

我们可以看到，devDependencies中开发环境用到的插件全部都是以@vue/cli-plugin-开头的，那么如何安装一个插件呢？

安装插件

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

• 我们可以通过命令安装
  • vue add [插件名] ，例如vue add eslint即可安装，这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint，然后从 npm 安装它，调用它的生成器

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

• 还可以传递参数例如：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"
  }
}

• 如果本地想引用一个插件，我们需要在packjson.json中加入vuePlugins.service如下代码

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

• 如果添加UI插件

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

总结一下，其实我们安装vuecli提供的插件主要目的其实是vuecli帮助我们做了从npm安装包以及自动帮我们初始化配置了一些参数设置，这样省去了我们手动安装npm所需要的第三方包然后单独去配置第三方包设置相关的繁琐事情。

通过vue ui去查找vue这些提供给我们的插件

如图：

image.png image.png

这里面就可以看到所有的插件，我们可以搜索查找我们想要的插件，单选，就可以再右下角进行安装了

例如我们安装一个element-ui

image.png image.png

安装完以后他会跳转到配置插件的页面，这里就赘述了，每个插件都是不一样的，这里就是大概配置vuecli是否帮我们引入element，初始化配置哪些东西，我们可以根据自己的需要选择，不选择进行安装就好了，后续我们可以自己手动在文件里面配置

image.png image.png

安装完成以后我们就可以在插件里面看到我们安装的element-ui了

插件和依赖的区别？

有人会问了插件和依赖什么区别呢？

• 其实很简单，插件主要是在通过npm安装包的同时，vuecli通过插件帮我们内部配置了一下默认的配置项，我们可以省去默认配置，
• 依赖呢就是我们具体安装的包是什么

Preset

• 有的人一看到英文，大家都有点蒙，Preset是个啥？其实很简单，就是我们安装的时候选择预设，vuecli可以通过自己配置个性化的方式配置自己的预设
  就是下面这里，还记得不~

  
  image.png

• 如何自定义呢？

  • 在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。官方说的是linux下边的home目录哦，windows要去C盘找哦

    
    image.png

来看一看里面的东东

image.png

这里面就是我们之前创建项目中保存的预设，这里面就有啦，我们可以修改这个json文件来修改我们的预设，具体的配置我们就多赘述了，官方文档里面写的很全，想要深入了解的可以看一下

我觉得预设这个东西，主要是创建项目的时候会用到，用到的不是很频繁，我们可以通过他提供远程的预设方式共享给其他开发者，但是我觉得用处并不是很大，不是很重要，真正创建项目的机会也不是很多，在企业里面主要是维护多个项目很久，如果有新的项目要起也是之前有搭建好的模板，下载下来install一下就用了，仅凭个人观点，感兴趣的可以深入研究一下这个哦~