前端|Vue的开发路程

一、项目结构

  1. build 存放项目构建脚本
  2. config 存放项目的基本配置信息
  3. node_modules 存放的是项目的所有依赖,即 npm install 命令下载下来的文件
  4. src 存放项目的源码,开发者写的代码
  5. static 存放静态资源
  6. index.html 项目的首页,入口页,也是整个项目唯一的HTML页面
  7. package.json 中定义了项目的所有依赖,包括开发时依赖和发布时依赖
  8. assets用来存放资源文件
  9. components 存放组件(可复用,非独立的页面)
  10. page 存放完整页面。
  11. router 目录中,存放了路由的js文件
  12. App.vue 是一个Vue组件,也是项目的第一个Vue组件
  13. main.js 项目的入口js
二、库和框架的区别 本质区别:控制反转,谁起到了主导作用
库:jquery
本质上就是一些列函数的集合,将一些函数封装到一个独立的就是文件中
在使用的jquery的时候,是由开发人员说了算的,也就是说开发人员起到了主导作用,而jquery是辅助完成相应的功能的
框架:vue
框架是一套完整的解决方案,项目中用到的一些功能在框架内部都已经提供好了
在使用框架的时候,框架会在合适的时机主动调用我们写好的代码,框架指定好了一套规则,开发人员按照这套规则写代码就可以了,也就是说:在使用vue的时候,是由框架说了算的,也就是框架起到了主导作用

三、mvvm模式的框架
vue最大的特点是不会像我们之前的原生js一样去操作dom,只操作数据。
vue可以看作是一个mvvm模式的框架的,相对于后台mvc更方便
前端|Vue的开发路程
文章图片


model和view层通过中间的vm连接和驱动。model层数据变化会改变视图,view改变通过事件来修改数据。
vue参考了MVVM实现了双向绑定,react是MVC,但是vue仍然可以通过parent等操作dom所以不全是mvvm
mvvm内部数据双向绑定
  • 1、视图---》数据 只要视图中的内入改变了,那么对应的数据也会自动跟着改变
  • 2、数据---》视图 只要数据发生改变,对应视图内容也会自动更新
四、参考
  1. vue知识总结 - 简书
  2. Vue总结 - SegmentFault 思否
  3. Vue框架_夏末的清风?的博客-CSDN博客_vue框架
  4. 最全Vue知识点总结,助你快速上手_技术原力的博客-CSDN博客_vue知识点


【前端|Vue的开发路程】

    推荐阅读