如何把每個元件分離到具體的檔案中：模組化開發

1 單檔案元件

　　001 字尾名 .vue【檔案包含html+css+js】瀏覽器不支援.vue檔案和es6的模組化開發

　　002 編譯：webpack

2 vue-cli【規範化程式碼】

2.1 vue-cli是一個vue的腳手架，可以快速構造專案結構

2.2 vue-cli本身集成了很多專案模板

　　001 建立專案

　　002 熱更新：當檔案有修改時，頁面會自動重新整理，是因為websocket的作用

　　003 webpack

　　004 支援commonjs

　　005 支援ESModule

2.3 安裝腳手架vue-cli `npm i -g @vue/cli`

2.4 建立專案　　`vue create myName`

3 模組化開發規範：ESModule ES6

3.1 基本特點

　　001 每一個模組只加載一次，並執行一次，再次載入同一檔案，直接從記憶體讀取；

　　002 每一個模組內部宣告的變數都是區域性變數，不會汙染全域性變數；

　　003 通過export匯出模組，通過import匯入模組

　　004 ES6模組只支援靜態匯入和匯出，只可以在模組的最外層作用域使用import和export

3.2 前端模組化開發

3.2.1 匯出 `export function | var | let | const | class | default | {}`

　　default為模組指定預設輸出，這樣就可以在使用import的時候，不必知道所要載入的變數名或函式名

　　001 往模組物件中寫入屬性

　　002 as關鍵字： 重新命名　　`export {show as showName};`

　　003 `*`作為中轉模組匯出，把某個模組的所有屬性|方法匯出　　`export * from './md.js'`

var myName = 'David';
var age = 18;
// 多次export
export {myName};
export let gender = 'man';
export function show() {
  console.log(666);
}

3.2.2 匯入`import xx from <url>` 【url僅支援相對路徑|絕對路徑】

　　001 從模組物件中讀取屬性 `import {myName} from './base.js';`

　　002 as關鍵字：修改變數名 `import {myName as username} from './base.js';`

3.2.3 在ESModule中有一個重要的模組物件

　　export ---> 寫入 ---> 模組物件 ---> 讀取 ---> import

3.3 如何檢視模組物件： import * as all from <url>

4 單檔案元件

4.1 編譯原理

　　001.vue就是一個元件

　　002 文件中的<template>直接繫結在元件中，編譯時直接寫入元件render函式中

　　003 元件名即檔名

　　004引入時僅引入配置引數

4.2 export default {}

defaule允許改名，引入的元件註冊為區域性元件

4.3 寫在元件的data要是函式型別 ---> 複用

4.4 如何實現事件匯流排：新建立檔案

tip:TodoList

在每個vue檔案中，匯入模組之後，要將其新增到當前元件的區域性元件中

<template>
  <div id="app">
    <TodoList></TodoList>
  </div>
</template>
<script>
//匯入元件
import TodoList from './components/TodoList.vue';
// 匯出當前元件配置選項
export default {
  name: 'app',
  data(){
    return {
      username:'David'
    }
  },
  components: {
    TodoList
  }
}
</script>
<!-- 設定具有元件作用域的樣式 -->
<style scoped>
  h1{color:#58bc58;}
</style>

tip: vue-cli不能使用console.log( ) 變數宣告未使用會報錯 -->修改配置環境rules