main.js: 入口檔案

  1. import Vue from 'vue' //引入node_modules中的vue
  2. import App from './App' //引入當前路徑(src)下的App.vue並命名為App, .vue字尾省略
  3.  
  4. Vue.config.productionTip = false //關閉瀏覽器console中, 開發環境轉為生成環境提示
  5.  
  6. new Vue({
  7. el: '#app',       //作用域是index.html中的<div id="app"></div>
  8. components: { App },  //將引入過來的App宣告為區域性元件App, {App: App}
  9. template: '<App/>'    //建立template, 用App這個元件替換index.html中的<div id="app"></div>
  10. })

index.html

  1. <body>
  2. <div id="app"></div>
  3. </body>

App.vue

  1. <template>
  2. <div id="app">
  3. <img src="./assets/logo.png">
  4. <HelloWorld/> //③模板中使用HelloWorld元件
  5. </div>
  6. </template>
  7.  
  8. <script>
  9. import HelloWorld from './components/HelloWorld' //①引入HelloWorld.vue
  10.  
  11. export default { //將App.vue暴露出去
  12. name: 'App', //name暫時沒用
  13. components: {
  14. HelloWorld //②將HelloWorld宣告為區域性元件 {HelloWorld: Helloworld}
  15. }
  16. }
  17. </script>
  18.  
  19. <style>
  20. #app {
  21. }
  22. </style>

1、App.vue通過import將HelloWorld.vue這個模組全部匯入

3、HelloWrold.vue通過export default將name\data等介面輸出

4、App.vue只能訪問HellowWorld.vue中輸出的介面

///////////////////////////////測試一

aa.js

app.vue

執行結果

///////////////////////////////測試二

aa.js

App.vue

執行結果