1.單檔案元件

• (1)問題：
  使用 Vue.component 來定義全域性元件，緊接著用 new Vue({ el: ‘#container ‘}) 在每個頁面內指定一個容器元素。當在更復雜的專案中，或者你的前端完全由 JavaScript 驅動的時候，這種做法的缺點很多：

  • 全域性定義 (Global definitions) 強制要求每個 component 中的命名不得重複
  • 字串模板 (String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到醜陋的 \
  • 不支援 CSS (No CSS support) 意味著當 HTML 和 JavaScript 元件化時，CSS 明顯被遺漏
  • 沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用前處理器，如 Pug (formerly Jade) 和 Babel。
• (2)單檔案元件
  副檔名為 .vue 的 single-file components(單檔案元件) 為以上所有問題提供瞭解決方法，並且還可以使用 webpack 或 Browserify 等構建工具。
• (3)解析打包.vue檔案
  vue為了能夠使我們在專案開發中對元件進行更好的維護，提供了一個單檔案元件系統，vue把每一個獨立的元件放在一個.vue的檔案中，在這個檔案中提供基礎三個自定義標籤：
  
  1. template
  2. script
  3. style
     來放置元件不同的內容塊，但是因為瀏覽器不能夠直接去識別該檔案型別，所以我們需要通過webpack來進行編譯打包，官方提供了一個對 .vue 檔案進行處理的loader：vue-loader。

• (4)注意:如果出現瞭如下的提示：
  ERROR in ./src/Hello.vue
  Module build failed: Error: Cannot find module ‘vue-template-compiler’
  還需下載“vue-template-compiler”第三方模組並引入。

  <code>
      <template>
          <h1>{{message}}</h1>
      </template>
  
      <script>
          export default {
              name: 'hello',
              data() {
                  return {
                      message: 'Hello Miaov'
                  }
              }
          }
      </script>
      <style></style>
  </code>
   
  

2.vue-cli

vue實際開發使用 .vue 的但元件系統來實現，但是不能適應實際複雜的需求，我們還需要配置很多的一些東西來和 .vue 進行融合，這個配置很繁瑣，所以官方提供了一個工具，幫助我們來構建一個專案開發過程中必須使用的一些內容，這個工具：vue-cli，通過這個工具我們就可以很方便的來建立一個基於vue的專案，我們也把這個工具稱為 腳手架。
Vue.js 提供一個官方命令列工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘即可建立並啟動一個帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案：

安裝

前提：先安裝npm或yarn。
npm install vue-cli -g或yarn global add vue-cli命令。

vue-cli的構建

當我們通過上述方式安裝好vue的腳手架以後，我們就可以在命令列中使用一個命令：vue（該命令是沒有-cli的）

• 1.vue-cli建立步驟：

  • (1)vue init

    • init：初始化（建立）基於vue的專案
    • ：要構建的專案的名稱
      如：vue init webpack hello：基於webpack來構建一個名稱為hello的vue專案（專案構建一定要聯網！聯網！聯網！）

  • vue-cli是一個互動式命令列，通過vue命令構建專案會需要我們填寫一些專案的資訊：

    • (2)Project Name：要建立的專案名稱（該命令會生產一個package.json檔案，檔案中的name選項就是這個ProjectName，預設為當前建立的專案目錄名稱，也可以自行制定（但是需要符合package.json中name命名規則，不要出現大寫字母，空格，下劃線，可以使用 - ）
    • (3)Project Description：專案簡介，也會出現在package.json檔案中,可選
    • (4)Author：作者，可選
    • (5)下一步直接回車
    • (6)nstall vue-router：是否安裝vue路由元件，做專案的話一定要安裝;
    • (7)Use ESLint to lint your code：是否需要使用ESLint模組進行程式碼檢測。語法檢測工具，一般正規的專案團隊中需要安裝，個人專案看自己的使用情況決定
    • (8)Setup unit tests with Karma + Mocha?：是否安裝測試（單元測試）
    • (9)Setup e2e tests with Nightwatch?：是否安裝端到端的測試
      完成上面步驟，over！
  • 下載依賴包：”npm install”
    通過vue-cli完成配置以後，下一步需要安裝vue所需要的依賴包，在該建立好的專案目錄中，執行”npm install”命令。
    專案需要安裝的依賴包在vue-cli工具自動生成的package.json檔案中有說明：
    
    • dependencies：專案中實際需要使用到的依賴包
    • devDependencies：專案開發過程中需要使用的一些工具包，不是專案實際線上程式碼的一部分。
• 2.執行
  所需要的安裝依賴包安裝完成以後，就可以啟動專案，執行
  
  • yarn run dev / npm run dev：開啟一個測試開發環境。會開啟一個本地伺服器，我們就可以通過該伺服器環境去訪問當前這個專案。
  • yarn run build/npm run build：
    構建專案，把專案進行編譯、打包，生成的檔案預設存放在dist目錄下。我們可以把專案打包後的檔案上傳到伺服器，就是我們在線上執行需要的程式碼。
  • 介面：如果是首次執行，那麼會看到一個歡迎頁面，下面我們就可以進行專案開發。
    

• 3.生成的專案的目錄結構
  

  • (1) build目錄：構建專案命令所需要使用到的工具相關的指令碼檔案和配置檔案
  • (2) config目錄：在vue-cli中會自動安裝一個小型的express搭建的熱過載web伺服器，config裡面就是關於這個伺服器的相關配置
  • (3) dist目錄：專案編譯構建上線後的存放目錄
  • (4) node_modules目錄：專案依賴包存放目錄

  • (5) src 目錄：專案原始碼存放目錄
    main.js：vue腳手架為我們自動生成的專案中設定的入口檔案，在該入口檔案中，做了一些專案初始化的工作

    • 引入 Vue
    • 引入必要的元件

    • 建立Vue例項

      <code>
          // The Vue build version to load with the `import` command
          // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
      
          // 匯入 Vue 框架
          import Vue from 'vue'
      
          // 匯入 App 元件物件
          import App from './App';
      
          import router from './router/index';
      
          // 設定專案開發提示
          Vue.config.productionTip = false;
      
          // 建立Vue例項物件
          new Vue({
              el: '#app',
              // router: router,
              router,
              template: '<App/>',
              components: { App }
          })
      </code>
      

  • (6) static目錄：配置靜態資源（內建的web伺服器對應）存放目錄
    在專案開發過程中，我們的大部分任務是在src這個目錄下完成的。

2.路由

需求

當我們的應用變得複雜了以後，涉及到的頁面也會變多，邏輯也會變複雜，原來我們是通過多頁面的方式來組織和維護我們的網站，但是這樣的使用者體驗不是太好（因為會重新整理或跳轉頁面），為了解決使用者體驗問題，最好的方式，資料（頁面會發生變化），但是不需要跳轉、重新整理。

• 通過ajax非同步無重新整理獲取資料
• 獲取到資料以後通過vue來處理和管理還有渲染頁面。

什麼情況下獲取資料渲染頁面？

傳統的處理方式：通過url重新發送請求得到新的資料和頁面，獲取什麼頁面資料由url來決定，使用了單頁面開發模式的話，就不能再使用頁面跳轉，但是可以使用url中的hash值的變化來決定獲取什麼內容渲染什麼頁面。
所以一個url的hash對應一個檢視，那麼我們就需要設定hash和檢視的關係，我們可以把hash和view做一個對應關係（對映）
- 設定hash-view的map（對映）關係
- 監聽hash變化
- 當hash值變化的時候，根據map找到對應的元件來渲染檢視。
vue為我們提供了一個第三方的框架來實現上述的功能:vue-router
上面我們提到的 地址-檢視 的對映：路由

vue-router

• 1.安裝：
  npm install vue-router / yarn add vue-router.
  若在構建vue-cli的時候，在詢問“nstall vue-router”（是否安裝vue-router）時，選擇“Y”,這裡就不用重複安裝vue-router。

• 2.配置路由步驟：

  • (1) 配置： “router/index.js”

    • 匯入 vue-router
    • 把vue-router作為外掛呼叫：Vue.use();
      

      Vue.use( plugin )
      引數：{Object | Function}
      用法：
      安裝 Vue.js 外掛。如果外掛是一個物件，必須提供 install 方法。如果外掛是一個函式，它會被作為 install 方法。install 方法將被作為 Vue 的引數呼叫。

    
    也就是說，“plugin”必須提供一個install方法以供vue自動呼叫。
    
    • new Router()得到一個路由物件，並把該物件新增到Vue例項的router屬性中

    • new Router()需要傳入一個配置物件，該物件中包含一個routes的屬性，這個屬性就儲存了路由元件的對映關係

      <code>
          import Vue from 'vue';
          import VueRouter from 'vue-router';
      
          import Register from '@/components/Register';
          import Login from '@/components/Login';
      
          // 註冊vue-router元件到Vue例項中，才能在元件中使用 <router-view /> 元件</br>
          Vue.use(VueRouter);
      
          // 建立一個vuerouter例項物件，用來處理路由和元件的對映，該建構函式接受一個物件，其中routes
          export default new VueRouter({
              routes: [
                  {
                      //路由路徑
                      path: '/register',
                      //路由名稱(非必須)
                      name:"reg",
                      //路由元件
                      component: Register
                  },
                  {
                      path: '/login',
                      name:"login",
                      component: Login
                  }
              ]
          });
      </code>
      

  • (2) “main.js”

    • import router from ‘./router/index’;

    • 在vue例項中新增“router: router”屬性。

      <code>
          import Vue from 'vue';
          import App from './App';
          import router from './router/index';
          new Vue({
              el: '#app',
              //router: router,
              router,
              template: '<App/>',
              components: { App }
          })
      </code>
      

  • (3) “App.vue”
    渲染和當前url中匹配的路由元件：“”。
    vue-router會把和當前匹配路由元件拿取出來，替換這裡的router-view。

    <code>
        <template>
            <div id="app">
                <List :data="searchUsers" />
                // router-view：用來放置和當前url地址匹配的元件內容
                <router-view></router-view>
            </div>
        </template>
        <script></script>
    
        <!--scoped:設定該屬性，那麼style中的樣式只對當前元件中的元素產生影響-->
        <style scoped>
            ul li {
                color: red;
            }
        </style>
    </code>
    

• 注意：
  

  • (a).vue2.5版本支援大寫的HTML標籤，如上文程式碼“”;
    　vue2.0還是烤串寫法；
  • (b).“App.vue”檔案匯入時，可以不寫副檔名，是因為在“bulid/webpack.base.conf.js”檔案中，已幫我們解析好;

  • (c).在 “router/index.js”中，“import Login from ‘@/components/Login’;”，
    “@”指的是src目錄，也是在在“bulid/webpack.base.conf.js”檔案已幫我們定義好。

  <code>
      resolve: {
          extensions: ['.js', '.vue', '.json'],
          alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
          }
        },
  </code>
  

• (d).在上述程式碼中，”<style scoped></style>“,
  

  單檔案元件讓你可以在同一個檔案裡完全控制 CSS，將其作為元件程式碼的一部分。
  這個可選 scoped 屬性會自動新增一個唯一的屬性 (比如 data-v-21e5b78) 為元件
  內 CSS 指定作用域，編譯的時候 .list-container:hover 會被編譯成類似 .list-container[data-v-21e5b78]:hover。