解析打包.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 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！
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實例
- 設定hash-view的map（映射）關係
- 監聽hash變化
- 當hash值變化的時候，根據map找到對應的元件來渲染視圖
以上是vue-cli初始化一個vue.js專案的方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
