vue-cli及vue-router

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的文件中，在這個文件中提供基礎三個自定義標籤：
        template
        script
        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的項目
            ：構建模板的名稱：經常使用的是 webpack，其餘的能夠參考：https://github.com/vuejs-templates
            ：要構建的項目的名稱
            如：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實例

// 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 } 
})

        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的屬性，這個屬性就保存了路由組件的映射關係

　

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
    } ] });

(2) 「main.js」

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

• 在vue實例中添加「router: router」屬性

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

  (3) 「App.vue」
  渲染和當前url中匹配的路由組件：「」。
  vue-router會把和當前匹配路由組件拿取出來，替換這裏的router-view。

• <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>

  注意：
  
      (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」文件已幫咱們定義好。

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

  (d).在上述代碼中，」<style scoped></style>「,

• 單文件組件讓你能夠在同一個文件裏徹底控制 CSS，將其做爲組件代碼的一部分。
  這個可選 scoped 屬性會自動添加一個惟一的屬性 (好比 data-v-21e5b78) 爲組件
  內 CSS 指定做用域，編譯的時候 .list-container:hover 會被編譯成相似 .list-container[data-v-21e5b78]:hover。

  
  這裏的數字是隨機生成的。

本文轉載自：http://www.javashuo.com/article/p-kcyhddtw-mz.html