基础知识-第三节:从组件到页面

在vue.js中核心的一点就是组件化的思想,也就说说页面上的所有东西都可以看作是一个组件.组件也可以嵌套组件.由众多的组件组成了N多完整的页面.

我们已经知道了在vue.js中组件的后缀就是mycompont.vue这样的一个东西.那么他是怎么编译成浏览器可以认识的HTML和CSS和JS呢?答案就是webpack!正是由这个东西来完成了组件的编译工作,压缩合并的一些功能.看下面的图示:

组件到页面.png

关于构建工具

在这个前端飞速发展的年代如果你还没有用过构建工具,那么真的就out了.在我们自己的极服务项目中我使用的是Gulp来做工程构建.而现在流行的webpack也是具有这样的功能很流行的一个构建工具.他可以帮你压缩,合并,热更新,执行某些编译工作.

作为一名合格的前端,必须要掌握一个构建工具的使用.对于入门使用强烈推荐Gulp,简单容易配置.学会之后如果有兴趣还可以去学习webpack或者是fis3

最简单的vue.js模板渲染案例

最简单的莫属最经典的Hello World了,看下面的图示:

Hello World.png

通过上图可以很明显的看到vue.js的MVVM的实现过程,很容易看懂,这里就不再赘述了,这就是一个最基本的vue.js的模板渲染.

最后

这一节内容很少,简单的介绍了一些入门的概念,和强调了构建工具在项目中使用的重要性.

推荐阅读更多精彩内容