一、脚手架的理解与使用CLI是什么意思？CLI--Command-LineInterface命令行界面，俗称脚手架。脚手架是一个通用框架，是建筑学中的一个概念。1.1.什么是Vue-cli？Vue-cli是官方发布的vue.js项目脚手架。使用Vue-cli，可以快速搭建Vue开发环境和相应的webpack配置。1.2.使用脚手架的前提是什么？1、同时安装node.js和npm。npm（NodePackageManager），一个Node.js的包管理和分发工具，已经成为发布Node包的非官方标准，现在开发中经常使用npm来安装一些依赖包。由于国内使用官方npm镜像很慢，所以推荐使用淘宝镜像，淘宝定制的cnpm替代npm。使用npminstall-gcnpm--registry=https://registry.npm.taobao.org安装完成后就可以使用cnpm了。cnpm和npm使用相同的命令，只是在执行命令时将npm改为cnpm。2.安装webpack优化所有资源的压缩等操作。在开发过程中，它提供了一套完整的功能，可以使开发更加高效。使用命令安装npminstallwebpack-g//全局安装npminstallwebpack--save//当前目录安装3.安装脚手架npminstall@vue-cli-g//全局安装完成后，输入vue回车，即可看到在vue中的命令行，如图：官网文档介绍，在安装vue-cli时，有两种命令可以使用：yarntool，与npm的基本使用类似，有性能优于npm。相同含义的命令可能不同。2、VueCLI2.x初始化项目vue-cli3发布有一段时间了。现在脚手架安装好了，接下来就是安装Vue-cli3.x版本了。如果我们要使用vue-cli2.x版本，需要拉取vue-cli2.x模板，使用命令如下：npmintstall-g@vue/cli-init此时，就可以开始使用vue了-cli2创建项目。1.创建项目文件夹vue-cli22.在文件夹中打开cmd窗口输入命令：vueinitwebpacklearn此时已经开始下载模板了。根据提示信息，输入相应的信息内容，如图：vue项目打包时，有Runtime+compiler和Runtime-only的区别。第一种解释是这条命令适用于大多数用户，所以我们先选择第一种。,差异将在后面解释。回车继续创建项目：提示是否使用vue-router（路由），Eslint（代码标准化检测工具），最后提示我们选择使用什么命令进行项目管理，最后一个是手动处理，我们就这样选择熟悉的npm。现在等待项目创建完成，会提示我们进入项目，然后使用命令运行环境。3、Vue-cli2.x项目结构分析首先从配置文件webpack.json文件入手：寻找脚本，脚本中存放了一些项目运行、打包、测试等脚本。代码如下："scripts":{"dev":"webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js","start":"npmrundev","build“：”nodebuild/build.js“}3.1。为什么要使用npmrundev来启动服务？webpack-dev-server是启动一个webpack本地服务。--inlinerunlocalcommand--progressprogress--configbuild/webpack.dev.conf.js配置执行脚本入口文件所以当我们执行npmrundev时，实际上执行的是：webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js启动本地服务。启动服务时，显示项目进度。如果去掉--progress，启动服务时不会显示进度。3.2.项目运行后，为什么端口号是8080？找到config文件夹下的index.js文件，找到dev中的配置项，这是专门为npmrundev执行的配置项。dev:{//编译输出的二级目录assetsSubDirectory:'static',//编译发布的根目录，可配置为资源服务器或CDN域名assetsPublicPath:'/',//接口usingproxyTableproxyproxyTable:{},//开发时访问域名，可以通过环境变量自行设置host:'localhost',//开发时端口号，如果被占用，会随机分配端口：8080,//浏览器是否自动打开项目autoOpenBrowser:false,//是否使用eslintloader检查代码useEslint:true,//在浏览器中显示错误掩码errorOverlay:true,//是否显示错误notifyOnErrors:true,poll:false,//https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-devtool:'cheap-module-eval-source-map',cacheBusting:true,cssSourceMap:true}3.3。为什么npmrunbuild可以自动打包项目？当npmrunbuild运行时，实际执行的是：“nodebuild/build.js”。我们之前开发的网页，在执行js文件的时候，必须要导入某个html文件，浏览器访问html文件，js文件渲染的时候才会执行。在node中：node提供了一个js执行的环境。node是C++开发的V8引擎，可以直接将js文件运行成二进制代码，所以运行速度非常快。在node中执行js时，直接使用：nodexx.js文件即可运行。所以打包项目的时候会执行build文件夹下的build.js文件。4.其他项目文件介绍项目整体目录结构很简单，如图：build-文件夹中存放执行脚本入口config-index.js，moredev，build配置node_moudles-存放依赖包资源src-静态存储开发资源-存储静态资源.babelrc-ES6转ES5限制editorconfig-编辑器配置.gitignore-提交git时忽略内容index.html-单页应用主入口RealVersionREADME.md-用户文档5.Runtime+compiler和Runtime-only的区别我们新建一个runtime-only工程，发现两个工程的区别只在main.js上。两个main.js的对比如下：要问template和render的区别，需要了解vue程序的运行过程：template被解析（parse）成语法抽象树（abstractsystemtree),然后通过render函数虚拟DOM(Virtualdom)进行渲染操作，所有虚拟DOM操作完成后，通过Vue运行过程生成真实DOM。不难发现，使用template的时候，加上第一步，使用render的时候，直接进行第二步。Runtime+compiler与Runtime-only相比，runtime-only性能更高，代码编写更少。我们已经在命令行提示可以压缩6kb的代码。什么是渲染？render函数的本质是通过调用一个方法生成一个template模板，这个方法是通过render的参数传递的。用法一：普通用法传递的createElement方法有三个参数，分别提供：标签名称，标签属性，标签内容render:function(createElement){returncreateElement('h2',{class:'box'},['content'])}通过上面的方法，可以生成一个完整的模板。用法二：组件用法导入一个组件对象importAppfrom'./App'render:function(createElement){returncreateElement(App)}在我们实际的main.js中，其实就是上面的简写，改写成箭头函数。渲染：h=>h（应用程序）
