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 [插件名称]
可以使用 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
插件能修改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插件一样工作的文件 } }
在使用 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
@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直接调用
Vue生态圈之----Vue CLI3学习整理----安装与基础
原文:https://www.cnblogs.com/adhehe/p/13385029.html