vue.js项目架构详解

  1、vue组件文件结构说明 

       通过vue create xxx创建好项目之后，看到项目架构如下：

        可以看到main.js是这个程序入口，这里面调用了App这个组件，也就是说App组件对整个项目来说，为最上级的父组件，components里面的我们创建的子组件，这些子组件之间可以相互被调用，也可以被父组件进行调用。 这里，我新建一个组件test.vue，输入vb选中，则基本组件框架就出来了（需要vscode安装vuetur插件，有个超人图标那个），如下图：

vue组件文件架构，我们可以看到，主要分为三个部分：template，script，以及style，这里说明一下，template负责界面显示（ps：template里面只能有一个同级的子标签，譬如上图，只有一个div，但div里面可以有同级的标签），这里都是是HTML标签，script则是负责界面的业务逻辑，最后的style则是负责界面的样式。

 

2、script部分详解

      script部分主要用于页面的业务逻辑操作，export default是一个json类型，里面可以添加：

      1）name:  设置该组件的名称；

       2）components：{}  设置需要要引用的组件；

       3）props：{} 存放从父组件传过来的数据，要指定数据类型如msg：String  （ps：js没有不分int、float，数字类型都为Number）

       4）data（）{return{}} ， data是一个方法类型，用于我们自己定义数据，方法里面数据要用return抱起来，数据要定义初始值。

      5）methods：{}  ，这里自定义方法，如sayhello（）{}，可以多个，逗号隔开，因为是json数据格式

      6）created：{}，mounted：{}等生命周期，时间点的操作入口，在对应时间点内的操作，会在vue对应生命周期进行相应的 操作，具体如下图：

      7）computed：{}，计算属性，用于对data或props中的数据进行逻辑计算，

       8）watch：{}，侦听属性

 

export default整个架构就是一个json，每一项又可以对应一个json。