vue 快速入门 系列 —— vue-cli 上 (4)

通过这个示例我们也就明白,vue 提供的这个插件比 npm 这种方式更友好,比如有范文

vue add vuex > vue add vuex � Installing @vue/cli-plugin-vuex... ...

安装 axios 对应的包是 vue-cli-plugin-axios,以 vue-cli-plugin- 开头,属于第三方插件

而 vuex 对应的包是 @vue/cli-plugin-vuex,以 @vue/cli-plugin- 开头。

使用 GUI 安装和管理插件

我们通过 vue ui 命令使用 GUI 安装和管理插件。由于前面我们已经全局安装,所以在任意目录下运行即可:

> vue ui � Starting GUI... � Ready on :8001

浏览器自动打开页面,并来到Vue 项目管理器系统,导入项目(例如 vue-hello-world),你会可以看见如下几个菜单:

插件,会显示已安装的插件,以及通过添加插件就可以查找插件,在查找插件的页面,我们知道:

没有 jquery 对应的插件

有 axios 对应的插件,将鼠标移到添加插件的图标上会显示:这个插件带有一个生成器,可以在项目中修改或增加文件

依赖,能清晰的知道运行依赖有哪些(例如 vue),开发依赖有哪些(例如 eslint)

配置,里面有配置 Vue 项目、代码质量和纠错等

任务,包括项目中 package.json 中 scripts 对应的任务(serve、build、lint等)。还有 inspect,能检查 webpack 配置,比如查看项目对应开发环境和生成环境的 webpack 配置。

Preset

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

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

笔者预设如下:

> cat ~/.vuerc { "useTaobaoRegistry": false, "latestVersion": "4.5.13", "lastChecked": 1622962273301, "presets": { "presetNameA": { "useConfigFiles": true, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-typescript": { "classComponent": true, "useTsWithBabel": true }, "@vue/cli-plugin-pwa": {}, "@vue/cli-plugin-router": { "historyMode": false }, "@vue/cli-plugin-vuex": {}, "@vue/cli-plugin-eslint": { "config": "standard", "lintOn": [ "save" ] }, "@vue/cli-plugin-unit-mocha": {}, "@vue/cli-plugin-e2e-cypress": {} }, "vueVersion": "2", "cssPreprocessor": "less" } } }

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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzyzjd.html