import Vue from ‘vue‘ //引入node_modules中的vue import App from ‘./App‘ //引入当前路径(src)下的App.vue并命名为App, .vue后缀省略 Vue.config.productionTip = false //关闭浏览器console中, 开发环境转为生成环境提示 new Vue({ el: ‘#app‘, //作用域是index.html中的<div id="app"></div> components: { App }, //将引入过来的App声明为局部组件App, {App: App} template: ‘<App/>‘ //创建template, 用App这个组件替换index.html中的<div id="app"></div> })
<body>
<div id="app"></div>
</body>
<template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld/> //③模板中使用HelloWorld组件 </div> </template> <script> import HelloWorld from ‘./components/HelloWorld‘ //①引入HelloWorld.vue export default { //将App.vue暴露出去 name: ‘App‘, //name暂时没用 components: { HelloWorld //②将HelloWorld声明为局部组件 {HelloWorld: Helloworld} } } </script> <style> #app { } </style>
1、export default 和 import 对应
2、在vue中，export default导出来的不只是里边的参数，还有该页面的其他信息，所以可以import之后直接声明为组件。（这根js不太一样，js中export default导出来的只是里边的参数，不含页面的其他信息）
vue-cli：渲染过程理解2（vue init webpack方式创建）
原文：https://www.cnblogs.com/qq254980080/p/10423735.html