Vue生态圈之----Vue CLI3学习整理----安装与基础

介绍

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

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

源代码：Vue-cli

安装

npm install -g @vue/cli
// OR
yarn global add @vue/cli

核心

CLI（@vue/cli）：是一个全局安装的npm包，提供了终端里的 vue 命令。

create [options] <app-name>     // 创建一个由vue-cli-service支持的新项目
add [options] <plugin> [pluginOptions]    // 安装插件并在已创建的项目中调用其生成器
invoke [options] <plugin> [pluginOptions]    // 在已创建的项目中调用插件的生成器
inspect [options] [paths...]    // 使用vue-cli-service检查项目中的webpack配置
serve [options] [entry]    // 在开发模式下提供一个.js或.vue文件，无需配置
build [options] [entry]    // 在生产模式下使用零配置构建一个.js或.vue文件
ui [options]     // 启动并打开vue-cli 图形界面
init [options] <template> <app-name>    // 从远程模板生成项目(遗留API，需要安装@vue/cli-init)
config [options] [value]    // 检查并修改配置
outdated [options]    // (实验)检查过时的vue cli 服务/插件
upgrade [options] [plugin-name]    // (实验)升级vue cli 服务/插件
migrate [options] [plugin-name]    // (实验)为已经安装的cli插件运行migrator
info    //打印有关环境的调试信息

CLI服务（@vue/cli-service）：是一个局部安装的npm包，是一个开发环境依赖包，局部安装在每个 @vue/cli 创建的项目中。

（也就是说：使用了vue create 命令创建了一个项目后，@vue/cli-service也自动局部安装在了项目中）

//构建于 webpack 和 webpack-dev-server 之上，包含：
1、加载其它CLI插件的核心服务
2、优化过的内部的webpack配置
3、项目内部的 vue-cli-service 命令，提供命令

CLI插件（@vue-cli-plugin-[内建插件] 或 vue-cli-plugin-[社区插件]）：提供可选功能的npm包，在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件

//在项目内部运行 vue-cli-service 命令时，自动解析并加载 package.json 中的所有CLI插件
vue add [插件名称]

CLI（@vue/cli）

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

vue serve [options] [entry]
// 会在当前目录自动推导入口文件（入口文件可以是：main.js、index.js、App.vue、app.vue中的一个），也可以自定义入口文件

vue build [options] [entry]
// 生成一个用于部署的生产环境的包

 如果要使用旧版本（vue-cli2）：全局安装一个桥接工具 @vue/cli-init

npm install -g @vue/cli-init

// `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

CLI插件

插件能修改webpack的内部配置，也可以向 vue-cli-service 注入命令

vue add @vue/eslint //会解析为完整的包名 @vue/cli-plugin-eslint
//等价于
vue add @vue/cli-plugin-eslint

如果插件不带 @vue，则会安装第三方插件

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

vue invoke [插件名称] //如果插件已安装，则跳过安装过程，只调用生成器

插件与package.json的设置

{
  "vuePlugins": {
   　　 "resolveFrom": ".config",//加载其它package.json里的插件，如有个文件：.config/package.json
    　　"service":["my-commands.js"],//直接访问插件API,不需要创建完整插件
    　　"ui":["my-ui.js"]//添加像UI插件一样工作的文件
  }
}

CLI Preset

在使用 vue create 创建项目的过程中，保存的preset会放在home目录下的 .vuerc 配置文件中

{
  "useConfigFiles": true,
  "plugins": {
    "@vue/cli-plugin-eslint":{
      　　  "version":"^3.0.0",//插件版本管理
        　　"prompts":true//在项目创建时，插件安装允许注入命令提示
    }
  },

 //可以为集成工具添加配置
  //根据 useConfigFiles 的值，configs的配置会被合并到 package.json或相应的配置文件中
  //如：useConfigFiles值为true时，configs的值会被合并到vue.config.js中
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

使用远程Preset

vue create --preset [远程插件名称] [项目名称]
//如 vue create --preset username/repo my-project

//从私有repo获取，确保使用 --clone
vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

加载本地Preset

// ./my-preset 应当是一个包含 preset.json 的文件夹
vue create --preset ./my-preset my-project

//或者，直接使用当前工作目录下的 json 文件：
vue create --preset my-preset.json my-project

CLI服务

@vue/cli-service 安装了一个名为 vue-cli-service 的命令

vue-cli-service serve [options] [entry]//启动服务
vue-cli-service build [options] [entry|]//生成用于生产环境的包
vue-cli-service inspect [options] [...paths] //审查项目的webpack config

启动服务的多种方式：

./node_modules/.bin/vue-cli-service //终端直接调用
npx vue-cli-service serve //npx直接调用