1. 文件分析

1. 補充：

1. 什么叫單文件組件？

   一個文件中只有一個組件

2. vue-cli創建的項目中，.vue的文件都是單文件組件，例如App.vue

2. 進入分析

1. package.json: 項目依賴配置文件：

如圖，我們說主要的屬性：

• name: 項目的名稱
• version: 項目版本
• scripts: 腳本入口
  • serve: 啟動項目命令
  • build: 打包項目命令
• dependencies: 生產環境的依賴包
• devDependencies: 開發環境的依賴包
• eslintConfig: eslint的配置

2. vue.config.js: vue-cli的配置文件，配置代理、打包優化等等

3. 項目的容器public文件下的index.html：

4. 項目核心文件src

1. main.js：項目的入口文件：
   

不了解template的朋友，可以再看一下多文件組件的第4點（template模板使用組件案例)，template屬性內的內容會完全替換掉容器中的內容。
2. App.vue

• 每一個 *.vue 文件都由三種頂層語言塊構成：<template>、<script> 和 <style>：
  • template塊：我們也可以稱之為模板塊，在里面寫我們的html代碼或者自定義組件，
  • script塊：我們也可以稱之為邏輯塊，在里面寫我們的Vue邏輯代碼，
  • style塊：我們也可以稱之為樣式塊，在里面寫我們的css樣式
• 結合main.js看，我們為什么稱之為App.vue為根組件呢？

  是因為我們整個的項目會把App.vue作為一個根，渲染到容器中，其他的功能以組件的形式最終被放到App.vue內部。所以App.vue也可以稱之為所以組件的父組件。而其他的組件被稱之為子組件。一次類推，子組件也會有子組件，所以就形成了我們的組件樹模式。
  

3.組件：因為安裝項目時安裝了vue-router,所以上述的App.vue截圖里沒有script塊，我們此時打開views下的HomeView.vue查看：

5. 打包后的文件dist:

我們創建的項目最后要部署是要執行npm run build/yarn build命令的，最終打包出來的文件就是dist文件，如圖：

我們打開index.html:

文件內除了容器標簽，其他的什么標簽頁什么都沒有，那么我們寫的組件在哪里呢？

當我們執行打包命令的時候，腳手架vue-cli會將我們寫的代碼打包成js文件，最后通過script標簽引入

*.js.map文件是方便我們調試的

分析到此吧，下一節我們開始正式進入單文件組件內部的學習