vuecli基础应用

Vue CLI是什么？

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,致力于将 Vue 生态中的工具基础标准化：

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

Vue CLI系统的组件

CLI

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

vue create //快速搭建一个项目
vue serve //构建
vue ui //通过一套图形化界面管理你的所有项目

CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖.它会随着@vue/cli创建的项目局部安装在项目中，我们无需自行安装。它是构建于 webpack 和webpack-dev-server之上的。包含了：

• 加载其它 CLI 插件的核心服务；
• 一个针对绝大部分应用优化过的内部的 webpack 配置；
• 项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

CLI插件

CLI 插件向 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- 或 vue-cli-plugin- 开头。

当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。它们也可以被归成一组可复用的 preset。

安装

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

npm install -g @vue/cli      //全局安装
vue --version	//检查版本

接下来就能用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发了

vue create

vue create [options] <app-name>
创建一个由 `vue-cli-service` 提供支持的新项目
----------------------------
Options:
-p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项
-d, --default 忽略提示符并使用默认预设选项
-i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项
-m, --packageManager <command> 在安装依赖时使用指定的 npm 客户端
-r, --registry <url> 在安装依赖时使用指定的 npm registry
-g, --git [message] 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
-n, --no-git 跳过 git 初始化
-f, --force 覆写目标目录可能存在的配置
-c, --clone 使用 git clone 获取远程预设选项
-x, --proxy 使用指定的代理创建项目
-b, --bare 创建项目时省略默认组件中的新手指导信息
-h, --help 输出使用帮助信息

vue create myapp      //创建一个名为myapp的项目

vue serve

vue serve [option] [entry]
在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
---------------------------
Options:
-o, --open 打开浏览器
-c, --copy 将本地 URL 复制到剪切板
-h, --help 输出用法信息

//在入口文件所在目录下运行如下命令。你也可以自己指定
vue serve  
//默认状态下你的入口名称必须是这里面的其中一个main.js, index.js, App.vue or app.vue

vue build

vue build [option] [entry]
在生产环境模式下零配置构建一个 .js 或 .vue 文件
---------------------------
Options:
-t, --target <target> 构建目标 (app|lib|wc| wc-async, 默认值：app)
-n, --name <name> 库的名字或 Web Components 组件的名字 (默认值：入口文件名)
-d, --dest <dir> 输出目录 (默认值：dist)
-h, --help 输出用法信息

vue build  //打包

vue ui

vue ui	//使用图形化界面

vue add

vue add	//安装插件

插件

Vue CLI 使用了一套基于插件的架构。查阅 package.json就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置，也可以向 vue-cli-service 注入命令。当你使用 vue create 来创建一个新项目的时候，有些插件会根据你选择的特性被预安装好。如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令：

vue add eslint
# 等价
vue add cli-plugin-eslint
vue invoke//跳过安装过程

preset

Vue CLI preset 包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。在 vue create 过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。

一个示例

{
"useConfigFiles": true,
"cssPreprocessor": "sass",
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "airbnb",
"lintOn": ["save", "commit"]
},
"@vue/cli-plugin-router": {},
"@vue/cli-plugin-vuex": {}
}
}

CLI服务

你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令

这是你使用默认 preset 的项目的 package.json：

{
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
}

你可以通过 npm 或 Yarn 调用这些 script：

npm run serve
# OR
yarn serve
# OR
npx vue-cli-service serve

vue-cli-service serve

vue-cli-service serve [options] [entry]
启动一个基于 webpack-dev-server的开发服务器并附带开箱即用的模块热替换
--------------------------
options：
--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值：development)
--host 指定 host (默认值：0.0.0.0)
--port 指定 port (默认值：8080)
--https 使用 https (默认值：false)

命令行参数 [entry] 将被指定为唯一入口。如果尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误

vue-cli-service build

vue-cli-service build [options] [entry|pattern]
---------------------------
options：
--mode 指定环境模式 (默认值：production)
--dest 指定输出目录 (默认值：dist)
--modern 面向现代浏览器带自动回退地构建应用
--target app|lib|wc|wc-async (默认值：app)
--name 库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
--no-clean 在构建项目之前不清除目标目录
--report 生成 report.html 以帮助分析包内容
--report-json 生成 report.json 以帮助分析包内容
--watch 监听文件变化

vue-cli-service build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而做的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。

vue-cli-service inspect

vue-cli-service inspect [options] [...paths]
审查一个 Vue CLI 项目的 webpack config
----------------------------
options：
--mode 指定环境模式 (默认值：development)