Vue2介绍1.vue2.0Vue（读作/vju?/，类似于view）是一个用于构建用户界面的渐进式框架。Vue的核心库只关注视图层，采用单文件组件，复杂的大型单页应用（SPA）响应式数据绑定，将DOM和组件化开发的其他部分分离到一个层。该层称为视图层2.WebpackWebpack是一个前端打包构建工具。webpack有四个核心概念：一个条目指示webpack应该使用哪个模块作为构建其内部依赖图的起点。可以使用单个条目或多个条目输出它创建的包，以及如何命名文件。默认是./dist。loader()加载器可以将所有类型的文件转换为webpack可以处理的有效模块。插件（plugins）可用于执行范围更广的任务。插件的范围从打包优化和压缩，一直到重新定义环境中的变量。插件接口极其强大，可用于处理打包的各种任务：减少浏览器页面请求，将图片/脚本代码/打包成一个文件，只发起一次请求，下载所有资源。构建：babel转换、Sass、Less、stylus3的CSS预处理器。Node通常，JavaScript的运行环境是浏览器，因此JavaScript的能力仅限于浏览器能够赋予它的权限。比如读写本地系统文件的操作，一般情况下，运行在浏览器中的JavaScript代码是没有这个操作权限的。Node.js是一个服务器端JavaScript运行时环境。通过Node.js，可以用JavaScript编写独立的程序。即使不使用Node.js编写单机程序，你仍然需要有一个Node.js运行环境。毕竟很多前端工具都是用它写的。4.npmNPM是node.js的包管理器。包依赖一直是个让人头疼的问题。比如这个包本身的代码可能会调用其他的包，所以我们在使用的时候需要其他的包。在我们自己的项目中引入这个依赖包会变得非常困难。.NPM可以安装和管理包。5.Vue-CLi是一个vue.js脚手架工具。自动生成好项目目录，配置Webpack，各种依赖包的工具6.VuexVuex是Vue的状态管理器。用于集中管理单页应用中的各种状态。7.Vue-routeVue-route是Vue的前端路由器，路由器是管理请求入口和页面映射关系的东西。它可以在不刷新的情况下替换部分页面，使用户有切换到网页的感觉。8.AxiosAxios是一个基于promise的http库，可以在浏览器和node.js中使用。支持浏览器和node.js。支持承诺。它可以拦截请求和响应。它可以转换请求和响应数据。它可以取消请求并自动转换JSON数据浏览器。终端支持防止CSRF（跨站请求伪造），那么学习Vue需要学多少呢？1.ECMAScript6的新特性（promise构造器，）2.webpack配置打包（项目中的配置文件）3.ESLint配置（代码规范和错误检查工具）4.bable配置（ES6和ES5转换器）5.npm使用（包的安装和依赖）6.Vuex（存储数据的状态管理器）7.vue-Route（路由）8.vue-cli（一键全家桶工具）…………（html/不用多说了css/js的基本语法，宝宝累了。。。）安装实践带来真知灼见，干巴巴的看官方文档真的很吃力。宝宝直接按全家桶就开始学习了。。。开始使用前，请确保你有这些：node.jsnpmvuevue-cli代码编辑软件（宝宝一直在用webstorm，当然还有其他的。。...在cmd中查看是否安装，使用的是什么版本号，输入命令，有提示安装。（vue的版本一定要大写）>node-vv8.9.4>vue-V2.9.3>npm-v6.1.0构建项目1.创建项目以上已经安装好了，请放心...打开cmd命令回车需要创建项目的目录，例如：我想在d盘的项目下创建一个名为mydemo的项目D:\project>vueinitwebpackmydemo后面一大串，项目名称，作者，是否构建，是否使用代码规范等一系列时间，宝宝不断进入。然后会提示三个命令：cdmydemo//进入你的项目npminstall//安装依赖包npmrundev//运行项目2、安装依赖包你的文件夹有以下基本文件夹：build、config、src、static。生成的工程不能直接运行，否则会报错。该项目本身依赖于许多包模块，您需要安装这些模块。打开cmd，进入你的项目目录：D:\project\mydemo>npminstall这个过程会比较长。完成后，项目下会多出一个node_modules文件夹，就是我们项目需要的依赖包。3.运行项目打开cmd，进入你的项目目录：D:\project\mydemo>npmrundev会提示项目运行地址：http://localhost:8080浏览器输入地址，会看到vue图标，说明项目运行成功。使用cmd命令行很麻烦。如果编码软件支持，可以直接打开终端直接用编码软件运行，比较方便。这时候去官方文档上查了一下：构建一个Vue实例，实例的生命周期模板语法说明：v-if,v-show,v-for,v-bind,v-on,v-如何用指令或模板结合类/样式绑定组件处理模型数据单页和多页路由组件注册，通信官方文档不错，受益匪浅...生命周期每个Vue实例必须先创建它的创建经过一系列的初始化过程，这个过程就是vue的生命周期。如下：创建前，创建结束，挂载前，挂载结束，更新前，更新结束，销毁前，销毁结束:function(){console.group('------beforeCreate------');console.log("%c%s","color:red","el:"+this.$el);//undefinedconsole.log("%c%s","color:red","data:"+this.$data);//undefinedconsole.log("%c%s","color:red","message:"+this.message)//undefined},created:function(){console.group('------created创建状态------');console.log("%c%s","color:red","el:"+this.$el);//undefinedconsole.log("%c%s","color:red","data:"+this.$data);//已经初始化[objectobject]console.log("%c%s","color:red","message:"+this.message);//已经初始化Vue的生命周期},beforeMount:function(){console.group('------beforeMountstatebeforeMount------');console.log("%c%s","color:red","el:"+(this.$el));//已经初始化[对象HTMLDivElement]console.log(this.$el);//
