湛江住房和城乡建设部网站,辽宁建设厅勘察设计网站,外贸网店平台,导航网站帝国cms模版组件名的命名规则
定义组件名的两种方式#xff1a;
短横线分隔命名#xff0c;Kebab Case#xff0c;例如my-component-name。单词首字母大写命名#xff0c;Pascal Case#xff0c;例如MyComponentName。
第一种方式在模板中使用my-component-name引用该元素…组件名的命名规则
定义组件名的两种方式
短横线分隔命名Kebab Case例如my-component-name。单词首字母大写命名Pascal Case例如MyComponentName。
第一种方式在模板中使用my-component-name引用该元素第二种方式可以使用my-component-name或MyComponentName。 全局注册和局部注册
在组件基础一文中我们提到Vue.component这种组件注册方式是全局注册的。全局注册意味着它们可以在其他Vue实例中直接使用。
但有时对于某个全局注册的组件我们并不是很频繁地使用或者我们不再需要这个组件但它仍会被包含在构建结果中。
于是我们可以采用局部注册的方式。
不采用模块系统的局部注册
div idappcomponent-a/component-a
/div
scriptvar ComponentA {template: divComponent A/div};new Vue({el: #app,components: {component-a: ComponentA},});
/script如果你通过 Babel 和 webpack 使用 ES2015 模块可以像下面这样进行局部注册
import ComponentA from ./ComponentAexport default{components:{ComponentA //ComponentA:ComponentA的缩写}
}当然在模块化系统中我们也可以进行全局注册除了使用之前提到的Vue.component还可以在使用了webpack或Vue CLI 3的前提下使用require.context进行全局注册
main.js
import Vue from vue
import App from ./App.vue
import upperFirst from lodash/upperFirst
import camelCase from lodash/camelCaseconst requireComponentrequire.context(./components,//基础组件相对路径false,//是否递归查询其子目录/Base[A-Z]\w.(vue|js)$/ //基础文件名的正则表达式
)requireComponent.keys().forEach(fileName{//获取组件配置const compoentConfigrequireCompoennt(fileName)//获取组件的PascalCase命名const componentNameupperFirst(//大写首字母camelCase(//转换字符串string为驼峰写法//获取与目录深度无关的文件名fileName.split(/).pop().replace(/\.\w$/,)))//全局注册组件Vue.component(componentName,// 如果这个组件选项是通过 export default 导出的// 那么就会优先使用 .default// 否则回退到使用模块的根。componentConfig.default || componentConfig)
})//阻止Vue在启动时生成生产提示如下
//You are running Vue in development mode.
//Make sure to turn on production mode when deploying for production.
//See more tips at https://vuejs.org/guide/deployment.html
Vue.config.productionTipfalsenew Vue({//从App提供的模板编译渲染函数//h代指createElement方法接收根组件App来创建VNoderender:hh(App)
}).$mount(#app) //手动挂载Vue.component用于全局注册单个组件上面方法用于全局注册多个组件所以会多次调用Vue.component方法。 额外话题
作者发现了Vue.config.productionTipfalse在某些位置不生效的情况。
实际上观察Vue检查denvtools插件安装情况和开发模式的类型的源码部分可发现
var inBrowser typeof window ! undefined;....
....// devtools global hook
/* istanbul ignore next */
if (inBrowser) {setTimeout(function () {if (config.devtools) {if (devtools) {devtools.emit(init, Vue);} else {console[console.info ? info : log](Download the Vue Devtools extension for a better development experience:\n https://github.com/vuejs/vue-devtools);}}if (config.productionTip ! false typeof console ! undefined) {console[console.info ? info : log](You are running Vue in development mode.\n Make sure to turn on production mode when deploying for production.\n See more tips at https://vuejs.org/guide/deployment.html);}}, 0);
}Vue.config.productionTipfalse应该在inBrowser为true时就已经被设置好而inBrowser表示当前是否是浏览器环境它通过检测window对象是否存在来判断window对象在页面被渲染后定义。所以Vue.config.productionTip设置时机是在页面渲染前。body中的script标签是在body解析完后才执行的。换言之Vue.config.productionTip设置时机是在body解析前。
