vue學習筆記（四）

1、vue-router

一、簡介

咱們常常使用vue開發單頁面應用程序（SPA）。在開發SPA過程當中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁面應用程序看起來好像是一個頁面，實際上是在一個頁面中切換不一樣的html部分，從而達到所謂的單頁面,在這切換之中，就須要使用路由來實現不一樣的頁面內容的展示。

二、基本用法

（1）.使用步驟

vue-router的基本使用步驟以下：

• 定義須要切換的組件
• 配置路由，規定路徑到組件的映射關係
• 建立路由實例
• 將路由掛載到vue實例

//1.定義組件，用於路由切換
var Home = {
    template: '<div>我是主頁</div>'
}
var News = {
    template: '<div>我是新聞</div>'
}

//2.配置路由
const routes = [{
        path: '/home',
        component: Home
    },{
        path: '/news',
        component: News
    },{ //這一路由配置用於首次訪問或者找不到所請求路由，自動跳轉home頁
        path: '*',
        redirect: '/home'
}];

//3.建立路由實例
var router = new VueRouter({
    routes  //傳入配置好的路由信息
});

//4.掛載路由到根組件
new Vue({
    el: '#app',
    router 
});

這樣咱們就配置好了一個完整的路由。在切換組件的時候會根據路由加載不一樣的組件。咱們使用相似a標籤的<router-link to="url"></router-link>觸發組件的切換，to屬性存放的是路徑。使用<router-view></router-view>來顯示所切換組件。

<div id="app">
    <router-link to="/home">主頁</router-link>
    <router-link to="/news">新聞</router-link>

    <router-view></router-view>
</div>

這樣咱們就能夠實現主頁和新聞組件間的切換。

（2）.參數傳遞

可能咱們須要向所切換組件傳遞參數。vue提供了兩種向組件傳遞參數的方式。

• 查詢字符串的形式
• • /home?name=dawei&pwd=666
• • 在組件內部使用{{$route.query}}接收參數
• rest風格
• • /news/param1/param2
• • 在組件內部使用{{$route.params}}接收參數

（3）.路由嵌套

路由還能夠多層嵌套使用，使用children屬性。

{
    path:'/user',
    component:User,
    children:[
        {
            path:'login',  
            component:Login
        },
        {
            path:'regist',
            component:Regist
        }
    ]
}

子路由項路徑不要使用/開頭，以 / 開頭的嵌套路徑會被看成根路徑。

在組件中就能夠使用該路由：

<div>
    <h3>用戶信息</h3>
    <ul>
        <router-link to="/user/login">用戶登錄</router-link>
        <router-link to="/user/regist">用戶註冊</router-link>
    </ul>
    <router-view></router-view>
</div>

注意路徑的寫法。

三、路由實例的方法

這裏學習兩個路由實例的方法：router.push()和router.replace()。

• router.push()：添加路由，功能上與<route-link>相同

• router.replace()： 替換路由，不產生歷史記錄

  router.push({path:'home'})
  
  router.replace({path:'user'})

四、路由結合動畫

路由結合動畫使用很簡單，咱們能夠用 <transition> 組件給它添加一些動畫效果：

<transition>
  <router-view></router-view>
</transition>

2、單文件組件

一、.vue文件

.vue文件稱爲單文件組件，是Vue.js自定義的一種文件格式，一個.vue文件就是一個單獨的組件，在文件內封裝了組件相關的代碼：html、css、js代碼。

.vue文件由三部分組成：<template>、<style>、<script>:

<template>
    //html  
</template>

<script>
    //js    
</script>

<style>
    //css      
</style>

二、vue-loader

瀏覽器自己並不認識.vue文件，此時須要vue-loader對.vue文件進行加載解析，。相似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader等。須要注意的是vue-loader是基於webpack的。

三、webpack

webpack是一個前端資源模板化加載器和打包工具，它可以把各類資源都做爲模塊來使用和處理。實際上，webpack是經過不一樣的loader將這些資源加載後打包，而後輸出打包後文件。簡單來講，webpack就是一個模塊加載器，全部資源均可以做爲模塊來加載，最後打包輸出。

3、vue-cli

1. 簡介

vue-cli是一個vue腳手架，能夠幫助咱們快速構造項目結構，減小開發人員開發阻力。vue-cli集成了多種版本：

• simple ：比較簡單
• webpack ：包含ESLint代碼規範檢查和unit單元測試等
• webpack-simple： 沒有代碼規範檢查和單元測試
• browserify： 使用的也比較多
• browserify-simple

2.安裝、操做步驟

//安裝vue-cli，配置vue命令環境 
    cnpm install vue-cli -g
    vue --version
    vue list

// 初始化項目，生成項目模板
    vue init 模板名  項目名

//進入生成的項目目錄，安裝模塊包
    cd vue-cli-demo
    cnpm install

//運行
    npm run dev  //啓動測試服務
    npm run build //將項目打包輸出dist目錄，項目上線的話要將dist目錄拷貝到服務器上

3.文件介紹

.
|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|   |-- test.env.js                  // 測試環境變量
|-- src                              // 源碼目錄
|   |-- components                     // vue組件
|   |-- store                          // 狀態管理
|   |-- App.vue                        // 頁面入口vue文件
|   |-- main.js                        // 程序入口文件，加載各類公共組件
|-- static                           // 靜態文件
|   |-- data                           
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳須要忽略的文件格式
|-- README.md                        // 項目說明
|-- favicon.ico                      //網頁圖標
|-- index.html                       // 入口頁面
|-- package.json                     // 項目配置信息
.

此列表拷貝自：https://segmentfault.com/a/11...