0
点赞
收藏
分享

微信扫一扫

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

亿奇学 2021-09-28 阅读 44

插件

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


安装插件

  • 我们可以通过命令安装
    • vue add [插件名] ,例如vue add eslint即可安装,这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint,然后从 npm 安装它,调用它的生成器
  • 还可以传递参数例如:vue add eslint --config airbnb --lintOn save
  • 如果一个插件已经被安装,你可以使用 vue invoke 命令跳过安装过程,只调用它的生成器。这个命令会接受和 vue add 相同的参数。

例如,如果你有一个 .config/package.json 文件:

{
  "vuePlugins": {
    "resolveFrom": ".config"
  }
}
  • 如果本地想引用一个插件,我们需要在packjson.json中加入vuePlugins.service如下代码
{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}
  • 如果添加UI插件
{
  "vuePlugins": {
    "ui": ["my-ui.js"]
  }
}

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

如图:


例如我们安装一个element-ui


插件和依赖的区别?

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

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

Preset

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


  • 如何自定义呢?

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


举报

相关推荐

0 条评论