如何用vue-cli初始化一個vue項目

單文件組件和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的項目
：構建模板的名稱：經常使用的是 webpack，其餘的能夠參考： https://github.com/vuejs-templates

：要構建的項目的名稱

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

https://router.vuejs.org

安裝

npm install vue-router / yarn add vue-router