單文件組件和vue-loader
解析打包.vue文件
vue為了能夠使我們在項目開發中對組件進行更好的維護，提供了一個單文件組件系統，vue把每一個獨立的組件放在一個.vue的文件中，在這個文件中提供基礎三個自定義標簽：
1. template
2. script
3. style
來放置組件不同的內容塊，但是因為瀏覽器不能夠直接去識別該文件類型，所以我們需要通過webpack來進行編譯打包，官方提供了一個對 .vue 進行處理的loader：vue-loader
ERROR in ./src/Hello.vue
Module build failed: Error: Cannot find module 'vue-template-compiler'
vue實際開發使用 .vue 的單組件系統來實現，但是不能適應實際復雜的需求，我們還需要配置很多的一些東西來和 .vue 進行融合，這個配置很繁瑣，所以官方提供了一個工具，幫助我們來構建一個項目開發過程中必須使用的一些內容，這個工具：vue-cli，通過這個工具我們就可以很方便的來創建一個基於vue的項目，我們也把這個工具稱為---腳手架
安裝
npm install vue-cli -g(全局)
或
yarn global add vue-cli
當我們通過上述方式安裝好vue的腳手架以后，我們就可以在命令行中使用一個命令：vue（該命令是沒有-cli的）
vue的使用
vue init
init：初始化（創建）基於vue的項目
vue init webpack hello：基於webpack來構建一個名稱為hello的vue項目（項目構建一定要聯網！聯網！聯網！）
vue-cli是一個交互式命令行，通過vue命令構建項目會需要我們填寫一些項目的信息：
Project Name：要創建的項目名稱（該命令會生產一個package.json文件，文件中的name選項就是這個ProjectName，默認為當前創建的項目目錄名稱，也可以自行制定（但是需要符合package.json中name命名規則，不要出現大寫字母，空格，下划線，可以使用 - ）
Project Description：項目簡介，也會出現在package.json文件中,可選
Author：作者，可選
下一步直接回車
Install vue-router：是否安裝vue路由組件，做項目的話一定要安裝
Use ESLint to lint your code：是否需要使用ESLint模塊進行代碼檢測
Setup unit tests with Karma + Mocha?：是否安裝測試（單元測試）
Setup e2e tests with Nightwatch?：是否安裝端到端的測試
完成上面步驟，over！
通過vue-cli完成配置以后，下一步需要安裝vue所需要的依賴包，項目需要安裝的依賴包在vue-cli工具自動生成的package.json文件中有說明：
dependencies：項目中實際需要使用到的依賴包
devDependencies：項目開發過程中需要使用的一些工具包，不是項目實際線上代碼的一部分
運行
所需要的安裝依賴包安裝完成以后，就可以啟動項目，運行
yarn run dev / npm run dev：開啟一個測試開發環境
yarn run build : 構建項目，把項目進行打包，我們可以把項目打包后的文件上傳到服務器
如果是首次運行，那么會看到一個歡迎頁面，下面我們就可以進行項目開發
項目結構
-
build目錄：構建項目命令所需要使用到的一些腳本文件和配置文件
-
config目錄：在vue-cli中會自動安裝一個小型的express搭建的熱重載web服務器，config里面就是關於這個服務器的相關配置
-
dist目錄：項目編譯構建上線后的存放目錄
-
node_modules目錄：項目依賴包存放目錄
-
src目錄：項目源代碼存放目錄
-
static目錄：靜態資源存放目錄
在項目開發過程中，我們的大部分任務是在src這個目錄下完成的
- main.js：vue腳手架為我們自動生成的項目中設置的入口文件，在該入口文件中，做了一些項目初始化的工作
- 引入 Vue
- 引入必要的組件
- 創建Vue實例
路由
當我們的應用變得復雜了以后，涉及到的頁面也會變多，邏輯也會變復雜，原來我們是通過多頁面的方式來組織和維護我們的網站，但是這樣的用戶體驗不是太好（因為會刷新或跳轉頁面），為了解決用戶體驗問題，最好的方式，數據（頁面會發生變化），但是不需要跳轉、刷新。
- 通過ajax異步無刷新獲取數據
- 獲取到數據以后通過vue來處理和管理還有渲染頁面
什么情況下獲取數據渲染頁面？傳統的處理方式：通過url重新發送請求得到新的數據和頁面，獲取什么頁面數據由url來決定，使用了單頁面開發模式的話，就不能再使用頁面跳轉，但是可以使用url中的hash值的變化來決定獲取什么內容渲染什么頁面。
所以一個url的hash對應一個視圖，那么我們就需要設置hash和視圖的關系，我們可以把hash和view做一個對應關系（映射）
- 設置hash-view的map（映射）關系
- 監聽hash變化
- 當hash值變化的時候，根據map找到對應的組件來渲染視圖
vue為我們提供了一個第三方的框架來實現上述的功能:vue-router
上面我們提到的 地址-視圖 的映射：路由
vue-router
安裝
npm install vue-router / yarn add vue-router