main.js: 入口檔案
- 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>
- })
index.html
- <body>
- <div id="app"></div>
- </body>
App.vue
- <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、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
執行結果