05-Vue CLI的基本使用及目录详解.pptx

VueCLI相关;如果你只是简单写几个Vue的Demo程序,那么你不需要VueCLI.

如果你在开发大型项目,那么你需要,并且必然需要使用VueCLI

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。

如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

CLI是什么意思?

CLI是Command-LineInterface,翻译为命令行界面,但是俗称脚手架.

VueCLI是一个官方发布vue.js项目脚手架

使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置.

脚手架长什么样子?

;安装NodeJS

可以直接在官方网站中下载安装.

网址:/download/

检测安装的版本

默认情况下自动安装Node和NPM

Node环境要求8.9以上或者更高版本

什么是NPM呢?

NPM的全称是NodePackageManager

是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

后续我们会经常使用NPM来安装一些开发过程中依赖包.;Vue.js官方脚手架工具就使用了webpack模板

对所有的资源会压缩等优化操作

它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。

Webpack的全局安装

npminstallwebpack-g

;安装Vue脚手架

npminstall-g@vue/cli

注意：上面安装的是VueCLI3的版本，如果需要想按照VueCLI2的方式初始化项目时不可以的。

VueCLI2初始化项目

vueinitwebpackmy-project

VueCLI3初始化项目

vuecreatemy-project;VueCLI2详解;目录结构详解;简单总结

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler

如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only;Runtime-Compiler和Runtime-only

为什么存在这样的差异呢？

我们需要先理解Vue应用程序是如何运行起来的。

Vue中的模板如何最终渲染成真实DOM。

我们来看下面的一幅图。

;Vue程序运行过程;render函数的使用;npmrunbuild;npmrundev;修改配置：webpack.base.conf.js起别名;2018年8月份发布

vue-cli3与2版本有很大区别

vue-cli3是基于webpack4打造，vue-cli2还是webapck3

vue-cli3的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

vue-cli3提供了vueui命令，提供了可视化配置，更加人性化

移除了static文件夹，新增了public文件夹，并且index.html移动到public中

;VueCLI3;目录结构详解;UI方面的配置

启动配置服务器：vueui;自定义配置：起别名;演示完毕！