Step 1:创建模块,整理要外出的页面
为了增加代码的可读性,应该将功能相似的代码页面放置在同一个文件夹下,比如如果要存放同样都是外出的页面,应该将这些页面整合起来,这里暂时起名为:module。
Step 2:在module下创建.vue文件,完成外出页面
这里的写法与一般的vue页面写法相同,同样是三大模块:、
Step 3:在module下创建index.js文件,在文件中写明外出的模块
import ModuleOne from "../../xxx.vue";
import ModuleTwo from "../../xxx.vue";
export{
ModuleOne,
ModuleTwo
}
注意:
- ModuleOne为自定义的模块名,from后面是外出的页面,一般为模块命名使用驼峰命名法;
- import是将后面的页面引入Index.js,export是将模块导出,使得所有其他的文件可以找到这个模块;
- index.js的功能就像是目录,可以方便其他页面使用,也可以将新的模块引入到目录中。
Step 4:将模块引入到主页面中
import { ModuleOne,ModuleTwo } from "../../../module";
Vue.component("module-one", ModuleOne );
//省略其他代码
注意
- 页面引入时使用{}括起来,方便多个引入;
- Vue.component()方法用来将引入的模块生成主页面的组件,在页面布局中使用。
Step 5:引入页面组件
在中使用组件完成页面布局。
<module-one></module-one>
注意
可以在模块中为属性赋值,记住属性前要加“ : ”,方法前加“@”。