如何做国外的网站,建什么网站好,竞价推广与seo的区别,上海优质建筑设计网公司目录结构#xff1a;
本案例是在根目录下components文件夹测试的#xff0c;文件位置项目内任意#xff0c;确保在main.js挂载路径正确即可 1、新建文件夹#xff08;名字随意#xff09;zxy_components (放自己组件的地方) 2、在zxy_components文件夹下 #xff01;新建…目录结构
本案例是在根目录下components文件夹测试的文件位置项目内任意确保在main.js挂载路径正确即可 1、新建文件夹名字随意zxy_components (放自己组件的地方) 2、在zxy_components文件夹下 新建文件夹zxy_ui(放vue文件) 新建index.js(放挂载全局组件的方法) 3、自定义两个组件zxy-style.vue和zxy-button.vue
代码 自定义组件中切记有组件名name:组件名
zxy-style.vue
templatedivh1这是我的全局组件/h1/div
/templatescriptexport default {name: zxy-style,data() {return {}},mounted() {},methods: {}}
/scriptstyle langscss scoped/style zxy-button.vue
templatediv classrow buttonel-button typeprimary sizemini click$emit(add)新增/el-buttonel-button typeprimary sizemini click$emit(authorizeBtn)审批/el-buttonel-button typeprimary sizemini click$emit(exportBtn)导出/el-button/div
/templatescriptexport default {name: zxy-button,data() {return {}},mounted() {},methods: {}}
/scriptstyle langscss scoped.button {margin-bottom: 12px;}.button {margin-left: 15px;margin-top: 20px;}
/style
4、index.js方法
import Vue from vue;//自动加载 zxy_ui 目录下的 .vue 结尾的文件
const componentsContext require.context(./zxy_ui, true, /\.vue$/)
// componentsContext 是一个函数
// componentsContext.keys() 是包含zxy_ui目录下vue文件的数组
componentsContext.keys().forEach(item {//componentsContext(item) 是一个模块const componentConfig componentsContext(item);// 兼容 import export 和 require module.export 两种规范const assembly componentConfig.default || componentConfigVue.component(assembly.name, assembly) //注册当前组件
})
5、main.js挂载
import /components/zxy_components;
6、页面使用不需要引用注册
templatedivzxy-style/zxy-stylezxy-button/zxy-button/div
/template
