Vue CLI的使用（一）

Vue CLI的使用（一）

什么是CLI

在我们日常开发之中，如果只是简单的写几个Vue的Demo程序，就不需要Vue CLI，但是要开发大型项目的时候，就必须要Vue CLI。而且对于大型项目来说，如果采用WebPack的方式就会效率低下，因此我们会采用一些脚手架工具来解决这些事情。
CLI是Command-Line Interface，翻译为命令行界面，俗称交做脚手架，它是由官方发布的Vue.js项目脚手架，可以快速搭建Vue开发环境以及对应的webpack配置/

Vue CLI使用的前提

1. 安装NodeJS ，这个可以在官方网站中下载安装，网址为http://nodejs.cn/download/
   默认情况下自动安装Node和NPM
   注意：Node环境需要8.9以上或者更高的版本
   查看版本号
   
   这里简单说一下NPM的全称为Node Package Manager，是一个包管理和分发工具，已成为了非官方的发布Node模块（包）
2. Webpack的安装
   全局安装：npm install webpack -g

Vue CLI的使用

安装Vue脚手架npm install -g @vue/cli

注意：上面所安装的是Vue CLI3版本，如果想要按照Vue CLI2的方式构建项目，需要拉取我们的2版本模板
npm install -g @vue/cli-init

CLI2 项目创建

注意：这是CLI2的项目创建，该名称也会作为默认的项目名称，不能含有大写字母等。

Vue类型Runtime+Compiler和Runtime-only区别

左边的是平常所写的方式，右边为箭头函数，一般vue的步骤为template->ast(抽象语法树）->render(箭头函数）->虚拟DOM->UI，右边省去了我们前面两步，因此会更快

左边的图可以转换成下面所展示的函数，与右边的图是一样的道理

也可传入组件

为什么runtime-only有模板却不会解析失败？
通过vue-template-complie这个来对模板进行解析

标记文本

认识Vue Cli3

CLI3与Cli2的区别
1.Vue-cli3是基于Webpack4，而Vue-cli2是基于Webpack3
2.Vue-cli3的设计原则是“0配置”，移除了根目录下的build,config等目录
3.Vue-cli3提供了Vue ui命令，提供了可视化配置，更加人性化
4.Vue-cli3移除了static目录，新增public文件夹，并且index.html移动到public

VueCli3创建项目

命令：vue create 项目名称

VueCli3的UI界面

命令：vue ui

箭头函数的使用