vue中組件的引用嵌套通過export import語法鏈接
Nodejs中的 export import
P1.js
export default { name: 'P1' }
index.js
import P1 from './P1.js' alert(P1.name);
P1.name的內容就是P1.js文件中name的值'P1'
/opt/wks/vue/01_webpack/node_modules/.bin/webpack-cli index.js --output build.js
$ cat index.html <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="build.js" charset="utf-8"></script> </body> </html>
打開index.html頁面，就會出現一個彈框，內容就是P1
P1.js中export的是一個對象，對象有屬性name，index.js文件中import P1相當於前面對外開放對象的一個“引用”，之所以叫“引用”，是因為P1.js中name的值發生變化時，index.js中P1.name也會跟着變化；
“引用”這兩個字又加一個引號，是因為export是靜態鏈接，在編輯階段已經把所關聯的內容整合到一體了，
P1.name這個屬性在整合后的文件中就一份，它變化了，任何地方對它的訪問，當然也能體現這種變化。
vue 中的export import
P1.js變成了P1.vue，文件后綴后變了，不再是純粹一個JS文件，還可以加入HTML DOM 標簽；不同的內容用不同的標簽分開
.vue是VUE文件的后綴，視圖放於views目錄
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) alert(HelloWorld.name); export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld } ] })
vue demo路由中首先import HelloWorld，HelloWorld.vue的JS部分如下
<script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
路由的效果是點擊一個URL，能夠跳轉到一個vue頁面，導出的對象本身沒有包含vue文件的路徑，個人猜測是Router對象會通過“component: HelloWorld” 找到“import HelloWorld from '@/components/HelloWorld'”這一句，然后定位“@/components/HelloWorld”這個文件；必須export的對象本身不包含頁面信息，Router必須根據傳入的對象參數找到頁面
簡單說，.vue視圖中export與vue中的組件相關聯的時候，最終最得的是一個包含JS與DOM的視圖