Vue框架Vue概念渐进式框架Vue安装配置npm脚手架安装生成Vue项目Vue目录结构调用关系图MVVM概念特征MVC和MVVM框架区分项目分析： Vue生命周期生命周期生命周期循环
Vue概念
JavaScript是Netscape Brendan eich于1995年在“网景”导航器浏览器中首次设计和实现的。 近年来发展非常迅速，标准也在不断完善，达到了ES6时代。
ECMAScript 6.0 (简称ES6 )是JavaScript语言的新一代标准，于2015年6月正式发布。 其目标是使用户能够使用JavaScript语言创建复杂的大型APP应用程序，使其成为企业级发展语言，并揭示一直被“鄙视”的脚本语言的前身。
随着js的强大，三大巨头横空出世，形成了鼎鼎之势。 前端新三大框架： Angular/React/Vue，三种是目前主流的js框架。 Angular全面，项目代码多； Vue重量轻，有针对性地解决问题，拿来就用。 开发是有极限的。 初学者可以从vue开始，了解react和angular。
Vue是我们中国人开发的，作者： lqddx是一个基于JavaScript的渐进式前端框架，符合中国人的习惯，在中国很多大型一线企业得到广泛应用。 Vue3.0使用的是TypeScript。 TypeScript是javaScript的超集，由微软开发，语法更加细致严密。 将js脚本语言更改为接近一线强语言Java、c，可以生成大项目，并基于ES6标准。
渐进式框架
Vue是用于构建用户界面的渐进式spar的单页框架。 与其他巨大且单一的框架不同，Vue设计为从一开始就可以逐步采用。
只能使用vue.js的vue.js components组件只能使用vue.js components组件只能使用router根的vue.js components组件router根vuex
在dos命令提示符下运行(安装成功，如果有版本号) :
节点安装(v8.11.3，至少8或更高) )。
节点- v NPM安装(v5.6.0) ) )。
npm -v参考博客： https://blog.csdn.net/weixin _ 53601359/article/details/115680033
验证node.js 安装：
cnpm是完整的npmjs.org镜像，可以使用它代替nodejs.org官方版本。 同步频率现在是10分钟一次，尽量与官方服务同步。 (目的是提高访问、下载速度)
显示当前配置的镜像源
NPM配置获取注册表
执行结果：
https://registry.npmjs.org/
或者
https://registry.npm.taobao.org/
npm切换到淘宝镜像方式(加快下载速度) :
npmconfigsetregistry https://registry.NPM.Taobao.org
直接使用淘宝镜像命令方式：
NPM install-gcn pm---- registry=https://registry.NPM.Taobao.org
cnpm版本，如果有版本号，则安装成功(直接支持cnpm命令，库与npm一样只是不同) )。
CPMv
脚手架安装(vue-cli脚手架工具的安装和放置(需要几分钟) ) ) ) ) ) )。
NPM安装vue-cli-g #安装vue-CLI脚手架
卸载NPMuninstallvue-CLI-g#vue-CLI脚手架
显示版本(如果有版本号，则安装成功) :
vue--版本#2.9. 6
vue -V
在要生成vue项目的指定文件下打开cmd。 project是自定义项目名称，不能包含大写字符
vue init web包项目
安装成功：
To get started:
CD项目进入项目
npm run dev启动服务，ctrl c停止
注意：端口号可能不同。 默认值为8080，如果发现端口占用npm，则端口号将根据当前环境自动更改。
名为Vue目录结构的目录结构非常重要。 如果你要生孩子去妇幼保健院，游泳去游泳馆。 只要确定好各目录的作用，方式和位置就可以统一。 有了这个规则，您就不会乱丢文件，这样您就可以知道在哪里查找资源，并在编写代码文件时将它们放在为每个功能指定的目录中。 这是一种非常常见的方法，如Maven构建项目
录有强制的约定，如Spring框架中约定大于配置。 src 目录是一个很大的目录，包罗万象components 把项目中所需要的组件都放在此目录下，默认会创建一个HelloWorld.vue，我们可以自己添加，如添加Header.vuerouter 访问的路径，Vue提倡的是SPA（Single Page WebApplication）单页面设计，这是以前旧页面中如果包含其他资源，必然涉及到路径问题。Html没有很好的解决这个问题，而router它是一种解决路径的新发明，很好的解决了多模块页面刷新问题。简而言之就是给组件指明一个路径，我们怎么去访问它。不同组件是依靠配置的路径router来访问的。router非常强大，老系统是URL改变是在服务端进行刷新，而router支持在客户端刷新，就是URL变化，页面内容变化，但不请求服务器端，以前的程序是做不到的。view 就是用户要访问的页面都存放在这个目录下，如Index.vuestatic中保存一些静态的资源，如jquery、css、图片等package.json 各组件版本，特别启动的参数
build/webpack.dev.config.js 核心默认配置文件，启动的配置参数build/webpack.base.conf.js 基础配置文件
index.html 首页，Vue是SPA单页面开发，页面入口，定义div#appsrc/main.js 公共的组件就直接配置到这个文件中，私有的就配置到view中
src/App.vue 根组件
src/router/index.js 引入子组件HellWorld.vue
调用关系图
简单来说项目加载的过程是：
index.html -> main.js -> App.vue -> index.js -> HelloWorld.vue
可以看到Vue项目是自有一套规则，一套机制的，非常系统化的。有固定的文件，有自定义的文件，各自放在指定的目录下，指定的文件中，指定的地方，最终来实现用户的需求。那在开发之前，你就必须了解这套机制，写代码的时候就规则清晰，如有神助，知道该如果写代码，知道为什么这么写，代码文件该放在哪，它们是谁调用谁，互相怎么调用的了。
MVVM概念和传统框架不同，Vue采用了最新的MVVM框架，它最大的特点就是，传统js机制操作的是页面，像html+css+js项目，大家会发现页面和页面里的数据混杂在一起。
而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。
简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。
MVC全名是Model-View-Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM就是将其中View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。当然这些事 ViewModel已经帮我们做了，它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。
创建Vue匿名对象，直接参数就是一个对象，一个类似json格式的js对象，这样的代码结构更加简洁。
Vue对象的参数：
el： 绑定到指定名称的html标签上data： 绑定的数据，相当于给html中使用的时候所传的值 Vue生命周期 lifecycle使用vue做项目时，我们需要了解vue对象的生命周期和生命周期函数（Vue 实例从创建到销毁的过程），这样才能知道哪些事情应该在哪个函数里做。
如页面创建时，页面加载时，页面更新时，页面销毁时？
在这过程中，我们在每个特定阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了名字叫做生命周期钩子函数/组件钩子。
生命周期函数：
vue实例在某一个时间点会自动执行这些函数；生命周期钩子函数不允许写成箭头函数；可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/销毁后）
细分每个过程：
默认值取值范围new Vue创建vue实例init events & lifecycle开始初始化beforeCreate组件刚被创建，组件属于计算之前，如data属性等init injections & reactivity通过依赖注入导入依赖项created组件实例创建完成，属性已绑定，此时DOM还未生成el 属性检查vue配置，即new Vue()里面的el项是否存在，有就继续检查template项。没有则等到手动绑定调用v.$mount()template检查配置中的template项，如果没有，则被绑定区域的el对象的outHTML（即整个#app DOM ，包括 和 标签）都作为被填充对象替换掉填充区域beforeMount模板编译、挂载之前create v$el and replace el编译、并替换了被绑定元素mounted编译、挂载befor update组件更新之前updated组件更新之后destroy当v.$destroy()被调用，开始拆卸组件和监听器，生命周期终结 组件化（Element-UI） 概念组件 (Component) 是 Vue.js 最强大的功能之一。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。可以理解为组件是对HTML元素的扩展。它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。
Element：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。界面优美，浏览器兼容，事半功倍。
官网地址：
https://element.eleme.cn/#/zh-CN #首页
https://element.eleme.cn/#/zh-CN/component/layout #组件页
https://unpkg.com/browse/element-ui@2.15.1/ 组件下载地址
在Vue项目目录下运行CMD
npm i element-ui -D
将element-ui文件放到rc目录下：
包含：js脚本、css样式文件、.ttf、.woff字体文件
设计模式是最精髓的东西，是软件思想的体现，是软件的灵魂。如三大框架SSM只所以傲视群雄，它的傲娇就来自对经典设计模式的应用。所以如果只会应用不懂其义，那你只是个码农；如何能领会设计模式的奥义，你就有了高级程序员的潜力；如果你能自己仿写，你就有了架构师的入门证。
Vue这类为何称之为框架，就是其不是简单的编程，而是应用了经典的设计模式，那它应用了什么什么模式呢？它应用了“观察者设计模式”。
那什么是观察者设计模式呢？
观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。
可以看出Vue设计非常巧妙，我们页面展现的数据，必然会涉及到数据的读写，于是Vue实现了一整套机制，这套机制监控数据的获取（get），数据的更新（set），这样当数据变化，Vue就能知道。它知道有什么用呢？它就能控制当数据变化时就能重新进行页面的渲染，从而用户看到页面展现新的内容。
总结可以看到Vue这类为何称为框架，名副其实，当之无愧。写javaScript时，我们要先去学习其复杂的api（document.getElementById()），写jQuery时，又学一套复杂的api(一堆的选择器)，特别它的写法虽然简洁，却晦涩难懂，需要死记大量英文单词，初学者极易写错，门槛很高，就现在很多企业的程序员依然被绊倒，说不明白，讲不清楚，使用中bug满天飞，一堆糊涂虫。