vue cli
首先，
🧒🧒🧒🧒🧒🧒儿童节快乐！🧒🧒🧒🧒🧒🧒
最近vue的新命令工具更新到了正式版,为Vue CLI 3.x。虽然，使用Vue视图库的企业越来越少，但不影响个人开发使用。
Vue CLI是一个简单但功能强大的命令工具，用于开发搭建Vue.js前端项目。
它让开发这可以专注于编写应用程序，而不用花费大量时间再基础配置上。
Vue CLI 3借鉴了新版Angular，让Vue变得更好：
1.插件性
新CLI工具使用了基于插件的完整体系结构，这是以前使用基于模板的体系结构的一个重大改进。
也就是说，现在只需要一个模板，其他所有功能都将作为插件添加进来使用。
2.灵活性
新CLI工具让开发者创建并开始开发一个新项目变得非常简单，不需要考虑以后的扩展问题，不像之前那样考虑乱七八糟的东西了。
开发者只需要创建项目，直接开始编写代码，需要哪个功能，直接添加，不需要，直接删除。
3.服务性
开发者可以为vue应用程序或组件提供服务，而且非常简单，就像提供一个简单的html文件一样。
4. Vuex
新CLI允许开发者将vuex添加到项目中，类似早期添加vue路由器。
5.强类型
强类型编程语言ECMAscript的实现Typescript成为官方推荐！
6.扩展性
如果官方推荐的任何优秀CLI插件都无法满足开发者的话，可以创建自己插件（当然，也可以发布插件让其他人用）。
安装Vue CLI
要安装CLI，请运行下面的代码。
npm install -g @ vue / cli
安装最新版本的Vue CLI。安装完成后，可以通过运行：
vue -v
确认已安装的版本。
CLI命令
CLI命令和以前的命令差别很大，并增加了一些新的命令：
vue create myproject 创建一个名为myproject的新项目。
vue serve
在开发模式下无需任何配置提供.js或.vue文件。 vue build
在生产环境下无需任何配置提供.js或.vue文件。 vue invoke
调用已安装的插件生成器来创建插件所需文件。 vue inspect 显示应用程序的webpack配置，已被完全从配置中分离出来。
vue init 为仍然喜欢使用早期旧版本用户保留的命令，但必须先全局安装。
所以，需要在终端中运行：
npm install -g @ vue / cli-init
安装完成后。你依然可以直接在新CLI中使用旧版本的命令。
vue init webpack newapp
创建新项目
要创建项目，在终端中运行以:
vue create projectname
其中projectname是要创建的应用程序的名称,需要注意的是：
1.目前不能使用大写或特殊符号作为名称
2.使用cnpm，会提示使用taobao镜像，选择Y确认，选择n自动使用默认设置的镜像或者npm镜像
命令工具会提示选择，默认预设（包含babel和eslint配置）或手动选择需要的功能。
❯ default (babel, eslint)
Manually select features
如果选择默认预设，CLI将创建项目并安装必要的插件来启动和运行。
如果您选择手动配置，CLI将继续显示所有支持的插件：
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
也可以使用键盘上的↑↓选择键和空格键选中单个插件或a键选择所有插件。
选择后按Enter键继续。
根据选择的插件，会显示配置提示，选择需要的内容并按Enter。
官方推荐使用 TypeScript 作为开发主要语言
预配置
在使用CLI创建新项目并手动选择时，会创建一个JSON格式的预配置文件，包含在创建项目时选择的所有配置。
预配置文件可以重复使用，所以开发者可以直接上手业务，而无需把时间浪费在配置上。
如果想要已保存的预配置中创建新项目，可以将目录切换到预配置文件位置并运行下面的代码：
vue create -p presetname newproject
这样便用指定的预配置文件创建了名为newproject的项目。
添加插件
添加插件，比如添加渐进式应用程序插件到项目里，运行下面的命令：
vue add @vue/pwa
新CLI工具支持插件包的简写名称，例如@vue/cli-plugin-pwa可以缩写成@vue/pwa。CLI工具会自动解析名称@vue/value来安装@vue/cli-plugin-value插件包。
零配置
对于只想测试而不想打乱配置的情况，这是很常见的需求：
npm install -g @vue/cli-service-global
安装完成后，开发模式下使用vue serve，生产模式下实用vue build命令。
serve
vue serve app.vue
app.vue是想要组件或文件的名称。
serve命令还提供了一个选项，可以在运行命令后启动浏览器，而不仅仅显示目前正在运行的虚拟服务器地址和端口:
vue serve -o app.vue
build
vue build app.vue
其中app.vue是组件或文件的名称。
此命令构建一个生产包，还可以指定是否要将其构建为库或Web组件。
构建库：
vue build -t lib app.vue
同时构建web组件:
vue build -t wc app.vue
环境变量
新CLI允许在项目的根目录中使用.env文件配置环境变量，该文件由key = value对组成，指定目前是否处于开发，生产或测试模式中。
创建特定模式的变量时，必须将该模式的名称作为后缀添加到 .env文件名中。.env.development用于开发模式和.env.production生产模式。
注意：将变量捆绑到客户端中时，变量需要以VUE_APP_名称作为前缀。比如增加变量indekey就要写成VUE_APP_INDEKEY
调整Webpack配置
Vue CLI提供了一种调整webpack配置的更简单灵活的方式。
在vue.config.js使用configureWebpack选项：
// vue.config.js
module.exports = {
configureWebpack：{
plugins：[
new MyAwesomeWebpackPlugin（）
]
}
}
如果项目根目录中没有vue.config.js文件，可以手动创建。
要知道Webpack配置中已有的配置，使用vue inspect命令，所有Webpack配置都会显示在终端，这也是比较方便的。
如果想输出成一个文件，指定一个文件名就可以了：
vue inspect > output.js
注意：
新vue-cli工具虽然已经正式发布，但仍然可能会出现一些未知错误，建议不要在生产中使用，除非你喜欢在工作中寻找刺激 😵
code enjoy! ᶘᵒᴥᵒᶅ
作者：indeex
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。