vue-cli开发vue项目1组件化开发

之前想写一篇如何安装脚手架的博客,但是自己对于webpack又不了解,所以就作罢,假定这是在已经有vue基础的



首先,对于组件。我们的理解是将页面的一部分分割,然后将一部分就称之为组件,就好像我们最常用的按钮,他也可以算是一个组件,这样,整个界面被规划成为一个个小的组件,那么我们就实现了组件化


图例:

vue-cli开发vue项目1组件化开发_第1张图片

可能你会觉得,既然是一个完整的页面,为什么要分割成为一个个小小的组件?

比如一个界面中有一个搜索框,我们可能会在多次用到,那么我们把他变化了组件,那么我们不久是可以多次引用,不用去再次编写了。

接下来该给例子了


在使用了脚本架之后,我们的结构已经很分明了,由于使用的是界面组件化,那么我们就直接上相关的代码

先说说
流程,首先,我们的index。html中定义了关于了id为app的一个div,那么我们就需要用到app。vue

其次,webpack也定义了程序的入口为main。js,那么我们的main。js也是要用到的。接着加上我们自己定义的组件,所以我们就愉快的决定了要修改的文件有三个,

第一步,我们需要定义我们的vue文件来封装,承载我们的组件,我们先看看文件的目录结构吧:

vue-cli开发vue项目1组件化开发_第2张图片

开始吧,首先先写出我们的组件,就取其中一个hello。vue来

vue-cli开发vue项目1组件化开发_第3张图片

这里请不要嫌弃我啰嗦,我讲讲关于vue文件的结构,我们的布局代码通常都是写在《template》标签中的,在

你可能感兴趣的:(vue,vue学习心得)