vue-cli基础介绍和使用

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

介绍：

CLI

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速创建一个新项目的脚手架，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。

CLI 服务

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每个 @vue/cli 创建的项目中。
CLI 服务是构建于 webpack 和 webpack-dev-server 之上的。

CLI 插件

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，非常容易使用。
当你在项目内部运行 vue-cli-service 命令时，它会自动解析并加载 package.json 中列出的所有 CLI 插件。
注意事项：
1、vue安装的插件或服务，由/可以看出安装的地方，例如@vue/cli-service就是安装在node_modules目录下@vue目录下的，而不是直接安装在node_modules子目录下。在package.json里查看该插件的名字叫@vue/cli-service。
2、@vue/cli是在全局npm下的node_modules里。

插件和预设配置：

插件：
vue的插件是以@vue/cli-plugin- (内建插件) 或 vue-cli-plugin- (社区插件) 开头，可以在package.json里看到。

在现有项目中安装插件：

每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件。当你使用 vue create 来创建一个新项目的时候，有些插件会根据你选择的特性被预安装好。如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令：
安装内建插件：
vue add @vue/eslint
等价于：
vue add @vue/cli-plugin-eslint
因为vue add就是安装的vue插件，所以可以不用写全cli-plugin
安装社区插件：
如果不带 @vue 前缀，该命令会换作解析一个 unscoped 的包。例如以下命令会安装第三方插件 vue-cli-plugin-apollo
vue add apollo 等价于vue add vue-cli-plugin-apollo
安装其它：
你也可以基于一个指定的 scope 使用第三方插件。例如如果一个插件名为 @foo/vue-cli-plugin-bar，你可以这样添加它：
vue add @foo/bar

安装vue-router和vuex

vue-router 和 vuex 的情况比较特殊——它们并不在@vue目录里，但是你仍然可以这样添加它们：
vue add router
vue add vuex

预设配置：

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

CLI服务

在一个 Vue CLI 项目中，@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。

启动

vue-cli-service serve

npm run或npx或通过图形界面启动。
命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。
除了通过命令行参数，你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器。
命令行参数 [entry] 将被指定为唯一入口，而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。

vue-cli-service build

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

这里还有一些有用的命令参数：

--modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。
--target 允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。
--report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

关于安装其它插件模块：

安装三方其它模块，例如element-ui或cube-ui等。
1、安装模块包npm install element-ui –save
2、再main.js引入模块import element from 'element-ui'
3、使用Vue.use中间件使整个vue项目都能使用该模块Vue.use(element)
4、如果该模块有其它初始配置选项，在vue.config.js里的pluginOptions配置。
注cube-ui一样，但是有点差别，因为安装该npm包后，会生成一个cube-ui.js的文件，引入的时候引入该文件就可以，因为该文件里使配置的引入cub-ui和Vue.use的。如下：
import './cube-ui'
该cube-ui.js文件里有import {…} from 'cube-ui'还有Vue.use(…)
css的引入：
全局引入，直接在main.js里import就可以全局引入css样式了。例如：
import './common.css'，这样就可以引入统一样式