13

VUE最後第一天

01-反饋

姓名 意見或建議
*** 又是一年端午節了,好激動,有家不能回,孩兒立志出鄉關,學不成名誓不還!!周老溼給咱再花丶時間捋一下項目需求分析....到打包上線吶

• city github github.com/iceyangcc/p…

• 需求分析：產品經理 需求文檔

• 原型圖： UI 產品經理

• 設計稿：UI

• 靜態頁面：前端

• 後臺工做：數據庫設計 接口開發 接口文檔

• 前端開發 和後臺的交互 和用戶的交互

• 測試：測試工程師

• bug: 修改

• 準上線環境

• 上線

• 修改bug

• 項目完成

• 打包 優化

• 組件的傳值

02-vuex基礎-介紹

當咱們的應用遇到多個組件共享狀態時，單向數據流的簡潔性很容易被破壞。

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。

• Vuex 能夠幫助咱們管理共享狀態，並附帶了更多的概念和框架。
• 這須要對短時間和長期效益進行權衡。
• 若是您不打算開發大型單頁應用，使用 Vuex 多是繁瑣冗餘的。
• 確實是如此——若是您的應用夠簡單，您最好不要使用 Vuex。

總結：項目複雜使用vuex能夠簡化邏輯，可是若是項目簡單使用vuex則會增長邏輯。

結論：

• Actions 發送請求 響應成功 把數據提交給 Mutations
• Mutations 接收到數據後 去更新State中的數據
• State管理的數據是響應式的 當數據改變時渲染視圖

03-vuex基礎-初始化

初始化：

• 第一步：npm i vuex

• 第二步：import vuex from 'vuex'

• 第三步：Vue.use(vuex)

• 第四步：const store = new Vuex.Store()

• 第五步：在根組件 配置 store 選項指向 store實例對象

  import Vue from 'vue' import Vuex from 'vuex' Vue.use(vuex) const store = new Vuex.Store({}) new Vue({ el: '#app', store： })

04-vuex基礎-state

做用申明數據，提供給其餘組件使用，在組件中computed去使用

在實例化store對象申明：

new Vuex.Store({
    state: {
        count: 100
    }    
})
複製代碼

在組件中使用：

<template>
    <!-- 直接使用 -->
    <p>{{$store.state.count}}</p>
    <!-- 經過計算數據使用 -->
    <p>{{count}}</p>
</template>
<script>
    export default {
        computed: {
            count () {
                 return $store.state.count
            }          
        }
    }
</script>
複製代碼

05-vuex基礎-mapState

當一個組件須要獲取多個狀態時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。

咱們可使用 mapState 輔助函數幫助咱們生成計算屬性

把state中的數據映射成計算屬性

對象寫法：

import { mapState } from 'vuex'
export default {
  // ...
  computed: mapState({
    // 箭頭函數可以使代碼更簡練
    count: state => state.count,

    // 傳字符串參數 'count' 等同於 `state => state.count`
    countAlias: 'count',

    // 爲了可以使用 `this` 獲取局部狀態，必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
複製代碼

數組寫法：

computed: mapState([
  // 映射 this.count 爲 store.state.count
  'count'
])
複製代碼

展開符寫法：

computed: {
  localComputed () { /* ... */ },
  // 使用對象展開運算符將此對象混入到外部對象中
  ...mapState({
    // ...
  })
  ...mapState(['count'])
}
複製代碼

06-vuex基礎-mutations

更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件。

在實例化store對象申明：mutation 必須同步執行

const store = new Vuex.Store({
  state: {
    count: 100
  },
    
  mutations: {
    increment (state) {
      // 變動狀態
      state.count++
    }
  }
})
複製代碼

在組件中使用：

• 默認提交

  this.$store.commit('increment')

• 提交傳參

  // ... mutations: { increment (state, payload) { state.count += payload.amount } }

  this.$store.commit('increment', { amount: 10 })

07-vuex基礎-mapMutations

• 這是vuex提供的 輔助函數 在methods映射函數的

  import { mapMutations } from 'vuex'

  export default { // ... methods: { ...mapMutations([ 'increment' // 將 this.increment() 映射爲 this.$store.commit('increment') ]), ...mapMutations({ add: 'increment' // 將 this.add() 映射爲 this.$store.commit('increment') }) } }

08-vuex基礎-actions

Action 相似於 mutation，不一樣在於：

• Action 提交給 mutation，而不是直接變動狀態。
• Action 能夠包含任意異步操做。

在實例化store對象申明：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
        setTimeout(()=>{
            // 數據獲取成功
            context.commit('increment')
        }，1000)  
    }
  }
})
複製代碼

在組件中調用：也能夠提交參數。

this.$store.dispatch('increment')
複製代碼

09-vuex基礎-mapActions

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 將 `this.increment()` 映射爲 `this.$store.dispatch('increment')`
    ]),
    ...mapActions({
      add: 'increment' // 將 `this.add()` 映射爲 `this.$store.dispatch('increment')`
    })
  }
}
複製代碼

10-vuex案例-豆瓣接口說明

豆瓣的接口有請求次數限制，普通用戶一分鐘內10次，在平臺註冊的用戶40次。

豆瓣的圖片前端頁面沒法直接訪問，須要使用代理：images.weserv.nl?url='圖片地址'

• 接口地址 支持jsonp (包名jsonp) 不支持cors
  • api.douban.com/v2/movie/su… 詳情
  • api.douban.com/v2/movie/in… 正在熱映
  • api.douban.com/v2/movie/co… 即將上映
  • api.douban.com/v2/movie/to… top250 douban.uieee.com 備用

11-vuex案例-初始化

• vue init webpack-simple vuex-example
• cd vuex-example
• npm i
• npm run dev

12-vuex案例-路由和組件骨架

• 四個大組件

  • 正在熱映 /hot
  • 即將上映 /movie
  • top250 /top
  • 電影詳情 /item

• 頭部組件 my-header 底部組件 my-footer

  import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)

  import Hot from '../components/Hot' import Movie from '../components/Movie' import Top from '../components/Top' import Item from '../components/Item'

  const router = new VueRouter({ routes: [ {path:'/', redirect: '/hot'}, {path:'/hot', component: Hot}, {path:'/movie', component: Movie}, {path:'/top', component: Top}, {path:'/item', component: Item} ] })

  export default router

13-vuex案例-組件佈局

14-vuex案例-電影列表

• 正在熱映 （默認選中）
• 即將上映
• top250

第一步：

在 store 申明瞭數據

state: {
  // 標題
  title: null,
  // 電影列表
  movieList: null
},
複製代碼

第二步：

在組件中映射數據到計算屬性

computed: {
  ...mapState(['movieList'])
},
複製代碼

第三步：

在 store 去定義actions的請求函數

actions: {
  getHot (context) {
    // context 當前的 vuex 實例
    // 經過 jsonp 去獲取數據
    jsonp(baseURL + '/v2/movie/in_theaters', (err, res) => {
      if (err) return alert('獲取數據失敗')
      // 注意：不能直接修改 state  而是經過commit去提交修改
      context.commit('setData', res)
    })
  },
}      
複製代碼

第四步：

在store 去定義 mutaions 去修改數據

mutations: {
  setData (state, payload) {
    state.title = payload.title
    state.movieList = payload.subjects
  }
},
複製代碼

第五步：

去組件渲染完畢的時候去調用actions函數，看頁面是否有更新

methods: {
  ...mapActions(['getMovie'])
}

mounted () {
  this.getMovie()
},

<ul v-if="movieList" class="list">
  <li v-for="item in movieList" :key="id">
    <img :src="'https://images.weserv.nl?url='+item.images.small" alt="">
    <div class="info">
      <p style="font-size: 12px;font-weight: bold">{{item.title}}</p>
      <p style="font-size: 12px;color: #999">豆瓣評分：{{item.rating.average}}</p>
      <p>
        <span v-for="(tag,i) in item.genres" :key="i" class="tag">{{tag}}</span>
      </p>
    </div>
  </li>
</ul>
<div v-else style="margin: 20px">正在加載數據...</div>
複製代碼

15-vuex案例-電影詳情

• 注意：/item/:id $route.params.id
• g根據ID去調用actions中的請求函數

16-vuex案例-網絡延時優化

• 組件切換動畫
  • 使用transition的標籤包裹
• 組件重置數據

  • created

  • 清空 movieList 的數據

  • 使用mutations的函數去修改

    clearData (state) { state.title = null state.movieList = null state.item = null }

調用：

created () {
  this.clearData()
},
複製代碼

17-webpack-介紹

• 中文官網：www.webpackjs.com

前言：不少網頁其實能夠看作是功能豐富的應用，它們擁有着複雜的JavaScript代碼和一大堆依賴包。

WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（less，sass等），並將其轉換和打包爲合適的格式供瀏覽器使用。

18-webpack-安裝

對於大多數項目，咱們建議本地安裝。

新建一個項目：在該項目下安裝

npm install --save-dev webpack
npm install --save-dev webpack-cli
複製代碼

19-webpack-打包js

• 新建一個 src 目錄

  • main.js 文件導入 calc.js 文件

• 建立webpack.config.js文件在項目根目錄

• 配置入口文件和輸出文件

  const path = require('path');

  module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } };

• 新建一個 index.html 文件來使用打包好的bundle.js

• 驗證打包的結果

20-webpack-打包css

npm install --save-dev style-loader css-loader

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };
複製代碼

21-webpack-打包圖片

npm install --save-dev file-loader

onst path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };
複製代碼

22-webpack-打包字體文件

+       {
+         test: /\.(woff|woff2|eot|ttf|otf)$/,
+         use: [
+           'file-loader'
+         ]
+       }
複製代碼

23-webpack-生成.html&清空dist

npm install --save-dev html-webpack-plugin

+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],
複製代碼

若是你想要了解更多 HtmlWebpackPlugin 插件提供的所有功能和選項，那麼你就應該多多熟悉 HtmlWebpackPlugin 倉庫。

+   plugins: [
+     new HtmlWebpackPlugin({
+       template: 'index.html'
+     })
+   ],

npm install clean-webpack-plugin --save-dev

+ const CleanWebpackPlugin = require('clean-webpack-plugin');

    plugins: [
+     new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
複製代碼

24-sourceMap

爲了更容易地追蹤錯誤和警告，JavaScript 提供了 source map 功能，將編譯後的代碼映射回原始源代碼。若是一個錯誤來自於 b.js，source map 就會明確的告訴你。

+   devtool: 'inline-source-map',
    plugins:
複製代碼

25-webpack-dev-server

webpack-dev-server 爲你提供了一個簡單的 web 服務器，而且可以實時從新加載(live reloading)

npm install --save-dev webpack-dev-server

    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },
複製代碼

package.json

"scripts": {
+     "start": "webpack-dev-server --open",
複製代碼

執行：

npm start
複製代碼