vue-cli3学习整理----基础

核心

CLI（@vue/cli）：是一个全局安装的npm包

提供命令：vue vue create //快速建立新项目的脚手架 vue serve //构建新想法的原型 vue ui //图形化界面

 

CLI服务（@vue/cli-service）：是一个局部安装的npm包，是一个开发环境依赖包

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

 

CLI插件（@vue-cli-plugin-[内建插件] 或 vue-cli-plugin-[社区插件]）：提供可选功能的npm包

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

 

CLI（@vue/cli）

须要额外安装全局扩展 @vue/cli-serivce-global

//vue命令能够对 单个*.vue文件进行快速原型开发
 vue serve [options] [entry] 会在当前目录自动推导入口文件（入口文件能够是：main.js、index.js、App.vue、app.vue中的一个），也能够自定义入口文件 vue build [options] [entry] 生成一个用于部署的生产环境的包

 若是要使用旧版本（vue-cli2）：全局安装一个桥接工具

npm install -g @vue/cli-init

 

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直接调用