Vue----渐进式框架的理解

对“渐进式”这三个字的理解：
Vue渐进式-先使用Vue的核心库，再根据你的需要的功能再去逐渐增加加相应的插件。


Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。
如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。
更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念。

————————————————

具体理解在我看来，渐进式代表的含义是：主张最少。

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制- 必须使用它的依赖注入
必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事。

总结：
1.开发的时候需要什么就加什么。我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”。
2.没有多做职责之外的事，侵入性看似没有Angular那么强，比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：必须使用它的模块机制- 必须使用它的依赖注入等。

————————————————

总而言之，你可以有很多选择，并不是非常强制你一定要用那种方式，vue只是为我们提供了视图层，至于底层的实现，还是有非常多的选择的。


版权声明：本文为CSDN博主「qq_31749421」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_31749421/article/details/85772082
在通过npm安装项目后，我们需要对其目录进行解析：
（1） Build：项目构建（webpack）相关代码;
（2） config：配置目录，包括端口号等。
（3） node_modules：npm加载的项目依赖模块
（4） src：这个目录当中的内容包含了我们基本上要做的事情，这里包含了几个文件：
（一）assets：存放图片
（二）components：存放组件文件
（三）App.vue：项目入口文件，组件也可以直接写在这里不适用components
（四）main.js：核心文件
（5） static：静态资源目录
（6） test：初始测试目录
（7） .xxxx：配置文件，包括git配置和语法配置等
（8） index.html：首页
（9） package.json：项目配置文件
（10） README.md：说明文档
程序=数据结构+算法，但这话在前端里并不纯粹，因为前端需要和界面打交道，所以大概总结下基础操作dom的前端开发方式：前端程序=拼界面+操作ui+算法。Vue的mvvm框架给了前端另一种思路：完全基于数据驱动的编程。帮助你从繁杂的dom操作中解脱出来，回归本质。

在vue-router中有两种导航方式：

（1）router-link声明式导航

<router-link to="/foo">Go to Foo</router-link>

router-link对应的路由匹配成功，将自动设置class属性值.router-link-active。

（2）编程式导航：

router.push('home')

// 对象

router.push({ path: 'home' })

// 命名的路由

router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private

router.push({ path: 'register', query: { plan: 'private' }})