環境配置

• 首先安裝 node.js 去官網安裝 LTS 下的指定版本。

  • 檢視是否安裝Node.js 安裝成功，開啟cmd黑視窗， 輸入node -v 輸出了版本號說明成功了。
  • 輸入npm -v 檢視是否有版本號。

• 使用碼雲：來儲存程式碼。

  • 在碼雲中建立完專案目錄後，生成公鑰：
    • 在本地的資料夾中 輸入ssh-keygen -t rsa -C '[email protected]'
    • 然後在提示的想對應目錄中：找到.ssh/id_rsa.pub 檢視這個檔案。把生成的私鑰複製到碼雲對應公鑰的上。
  • 切換到Travel目錄上，點選生成克隆/下載點選ssh 到本地的資料夾中，輸入git clone '複製的地址'

• 建立Vue專案：

  • 1：首先全域性安裝 vue-cli：npm install --global vue-cli
  • 2：建立一個基於 webpack 模板的新專案：vue init webpack Travel（*注意碼雲生成的LICENSE檔案跟README.md檔案, 跟專案檔案在同一個路徑下）
  • 簡單介紹一下專案於中目錄檔案：
    • 1：README.md：說明檔案
    • 2：package.json：第三方依賴包
    • 3：package-lock.json：鎖檔案，安裝包的版本
    • 4：LICENES：開源協議的說明
    • 5：index.html：首頁預設的模板檔案
    • 6：.postcssrc.js：css預設項
    • 7：.gitnore：提交到git倉庫時，可以忽略的字尾名檔案
    • 8：.eslintrc.js：程式碼的規範，才不會有警告的提示
    • 9：.eslintignore：裡面這些檔案,是不會受eslintrc檢測
    • 10：.editorconfig：編輯器裡面的語法
    • 11：.babelrc：vue寫的都是單檔案組建，通過babelrc來進行語法的轉換，轉換成瀏覽器能執行編譯的程式碼。
    • 12：static：存放的是靜態資源
    • 13：node_modules：存放的是第三方依賴包
    • 14：src：存放的是專案的原始碼
      • main.js：專案的入口檔案
      • App.vue：專案的根元件
      • router：
        • index.js 配置的路由
      • components：存放的元件
      • assets：專案中用到的資源
    • 15：config：配置檔案
      • index.js：存放的是基礎資訊
      • dev.env.js：存放的是開發環境資訊
      • prod.env.js：存放的是線上環境資訊
    • 16：build：專案打包

• 解決移動端點選事件延遲300ms的問題：

  • 移動端點選事件的時候, 會出現300ms延遲的情況, 需要引入第三方包, npm install fastclick --save （–save的意思是, 不管是開發環境中, 還是線上環境中都需要使用這個包）
  • 然後在main.js中引入第三方包：
    • import fastClick from 'fastclick'
    • 在呼叫attach()這個方法：
      • fastClick.attach(document.body)

• 移動端做適配的問題：

  • 首先在專案中最外層的index.html檔案中：
    • 找到< meta>標籤：在content屬性中, 繼續寫入minimum-scale=1.0, maximum-scale=1.0, user-scalable=no：代表的是使用者通過手指放大縮小螢幕尺寸都無效, 比列始終是1:1。
    • 在src/assets/styles/資料夾中匯入：reset.css, border.css 。(網上很容易就能找到這檔案)
      • reset.css: 匯入的這個是關於適配的樣式檔案, 所有手機適配都能相容, 在入口函式中將它引入。
      • border.css: 移動端會出現1畫素邊框的問題, 根據每個手機的不同, 畫素也不同。
    • 在main.js中引入這倆個檔案:
      • import ‘styles/reset.css’
      • import ‘styles/border.css’

• < router-link > 標籤的作用：

  • 介紹一下 < router-link > 標籤的作用：

  <!--template: 模板中只能包裹一個標籤, 所有每個template中直接包含一個div標籤-->
  <template>
    <div>
      <div class="home">home</div>
      <!--router-link 相當於css中的a標籤, to相當於 a標籤中的href屬性-->
      <router-link to="/list" class="home">列表頁</router-link>
    </div>
  </template>
  

• 使用stylus來寫css樣式：

  • css樣式使用第三方依賴包：stylus
    • npm install stylus --save
    • npm install stylus-loader --save

• 使用阿里巴巴的 inconfont圖示：

  • 如何使用, inconfont: 開啟網站(http://iconfont.cn/), 把選中的圖示放到購物車中, 新增到註冊的專案中, 下載下來, 然後將iconfont的4個`字型檔案(字尾名.eot; .svg; .ttf; .woff:)匯入到/assets/styles/iconfont/中, 把iconfont.css檔案放到/assets/styles/目錄中。
    • 開啟：styles目錄中的, inconfont.css檔案, 把匯入的字型檔案url進行修改。
    • 然後在main.js 中 引入iconfont：
      • import './assets/styles/iconfont.css'
    • 然後在相對應的元件中,使用iconfont：
      • 寫個< span class=‘iconfont’>xxx< /span> 標籤 class=‘iconfont’ xxx:表示進入iconfont網站, 點選圖示下面的複製程式碼, 貼上到xxx的位置上就OK了。

• 使用css程式碼中的樣式, 把它作為常量,或者一個方法引入：

  • 如何將css中顏色的樣式程式碼進行優化：
    • 在/assest/styles/ 檔案中建立：varibles.styl 檔案 寫入$bgColor = #00bcd4 等號前面是程式碼常量, 等號後面是顏色的樣式。
    • 然後在相對應的元件的< style>標籤中引入 @import "~找到存放varibles.styl"檔案路徑 。
    • 在css樣式中就可以使用background: $bgColor 這個常量來代表相對應的顏色。

• 使用自定義的名字來代替專案的資料夾所在的路徑：

  • 如何使用webpack來簡化程式碼的路徑的問題, 比如@就代表的是src目錄。
    • 首先在專案中build目錄中找到webpack.base.conf.js38行,’@’: resolve(‘src’),, 在它的下面寫上,‘代替的名字’: resolve(‘相對應的路徑’)`。
    • 在修改了webpack.base.conf.js檔案後, 需要重新啟動該伺服器。

• 使用第三方包, 完成輪播圖：

  • 首先安裝輪播圖第三方包的依賴：

    • [email protected] --save @後面可以指定版本號。

    • 在main.js中：

      • import VueAwesomeSwiper from 'vue-awesome-swiper' 匯入外掛。
      • import 'swiper/dist/css/swiper.css' 把樣式也引入進來。
      • Vue.use(VueAwesomeSwiper) 使用這個外掛。

    • 在相對應的元件中：

      • 在< template>標籤中, 引入下面這段程式碼：

       <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
          <!-- slides -->
          <swiper-slide>I'm Slide 1</swiper-slide>
          <swiper-slide>I'm Slide 2</swiper-slide>
          <swiper-slide>I'm Slide 3</swiper-slide>
          <swiper-slide>I'm Slide 4</swiper-slide>
          <swiper-slide>I'm Slide 5</swiper-slide>
          <swiper-slide>I'm Slide 6</swiper-slide>
          <swiper-slide>I'm Slide 7</swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination"  slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
          <div class="swiper-scrollbar"   slot="scrollbar"></div>
        </swiper>
      

      • 在data函式中 返回一個物件： swiperOption。

    • 在輪播圖上面, 顯示白色的小圓圈(預設顏色是藍色, 通過穿透來改變小圓圈的顏色)：

      • pagination: '.swiper-pagination',

    • 讓輪播圖進行迴圈操作：

      • loop: true

    • 定義在swiperOption物件中：

    swiperOption: {
            // 給輪播圖新增, 圖片下面的小點, 預設的顏色是藍色
            pagination: '.swiper-pagination',
            // 開啟輪播圖迴圈
            loop: true
          },
    

• 如何在當前元件中修改其他元件中的樣式:

  • 1:首先在建立一個< div>標籤 把外部傳入的元件包裹裡面, 自定義class=‘xxx’。

  • 2:找到外部元件中的class=‘xxx’

  • 3:使用div標籤定義的class >>> 到外部元件的 class , 接的在下面寫要修改的樣式, 就可以了。

  • .wrapper 就是div(class)， .swiper-pagination-bullet-active(外部元件的class)

  .wrapper >>> .swiper-pagination-bullet-active
     background: #fff
  

• 使用axios傳送 ajax 請求：

  • 1：首先安裝依賴：npm install axios --save

  • 2：在主元件中匯入：import axios from 'axios'

    methods: {
        getHomeInfo () {
          axios.get('/api/index.json')
            .then(this.getHomeInfoSucc)
        },
        getHomeInfoSucc (res) {
          console.log(res)
        }
      },
      mounted () {
        this.getHomeInfo()
      }
    

  • 3: axios.get(‘url’)就發起了請求。(上面的url, 在config目錄下的/index.js 裡面,進行了簡單的配置, 讓它請求的是專案中,static目錄下的index.json檔案)

    proxyTable: {
          '/api': {
            target: 'http://localhost:8080',
            pathRewrite: {
              '^/api': '/static/mock/'
            }
          }
        },
    

• 父子元件傳值：

  • 1：首先在父元件中通過axios.get()獲取到後端傳遞過來的資料, 然後賦值給data函式中的返回值。

  • 2：在子元件標籤中,繫結傳入的值,:list='xxxlist'。

  • 3：在子元件中, 使用props：{ list:Array}來進行接收。

  • 4：將list傳入到指令v-for='item of list'中。

    // 發起axios請求後端的資料
    getHomeInfo () {
          axios.get('/api/index.json')
            .then(this.getHomeInfoSucc)
        },
    // 首先在父元件中, 通過axios獲取值得
    getHomeInfoSucc (res) {
          console.log(res)
          res = res.data
          if (res.ret && res.data) {
            const data = res.data
            this.city = data.city
            this.swiperList = data.swiperList
            this.iconList = data.iconList
            this.recommendList = data.recommendList
            this.weekendList = data.weekendList
          }
    // 接收到的值,賦值給data函式
    data () {
        return {
          city: '',
          swiperList: [],
          iconList: [],
          recommendList: [],
          weekendList: []
        }
      },
    // 將data函式的返回值， 繫結到子元件中， 進行傳遞給子元件
    <home-header :city="city"></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
    // 以上操作都是在父元件中完成的
    
    // 使用props 來接收父元件傳遞過來的資料
    }
    props: {
        list: Array
      },
    
    // 在你使用v-for迴圈的時候傳入list
    <li class="item border-bottom" v-for="item of list" :key="item.id">
    
    

• 路由跳轉：

  • < router-link to='/xxx'>< /router-link>標籤是跳轉到to=’/xxx’指定的路由.

    • 你可能會發現,當你標籤包含的這個樣式，文字顏色會變，需要改動一下, 把css的color:設定為#fff：

    • <router-link to="/city">
          <div class="header-right">
              {{this.city}}
              <span class="iconfont arrow-icon">&#xe64a;</span>
          </div>
      </router-link>
      

• better-scroll的使用：

  • 首先安裝包npm install better-scroll --save

  • 看better-scroll的結構(新增一條div標籤)

  • 在最外層的div標籤中：<div class="list" ref="wrapper">繫結wrapper

  • 在專案的元件中匯入：import Bscroll from 'better-scroll'

  • 接下來在：

     // 生命週期函式, 函式掛載之後載入
      mounted () {
        this.scroll = new Bscroll(this.$refs.wrapper)
      }
    

• 實現Vuex實現資料共享：

  • Vuex是什麼？

    • 專案中多個元件進行傳值,如何把一個公用的資料放到一個公共的儲存空間,某個元件改變資料,其他的元件都能感覺到。

  • State: 儲存公用資料。

  • Actions: 元件(Vue Components)改資料必須呼叫(Dispatch方法來進行呼叫) Actions，做一些非同步處理。

  • Mutations：Actions呼叫(Commit方法來進行呼叫)Mutations, 才可以改變多用資料的值。

  • 有的時候也可以略過Actions， 讓元件(Vue Components)直接呼叫Mutations,讓Mutations直接修改State的資料。

  • 流程圖如下：

    

  • 安裝Vuex：

    • 執行命令：npm install vuex --save

  • 再專案src目錄下建立資料夾store：

    • 1：引入：import Vue from 'vue'和import Vuex from 'vuex'

    • 2：使用Vuex：Vue.use(Vuex)

    • 3：建立Vuex 倉庫： export default new Vuex.Store({})

      • state: 儲存資料, 再使用的時候直接再元件中{{this.$store.state.city}}就OK。

      • actions：當點選事件觸發的時候vue元件呼叫,this.$store.dispatch('changeCity', city)再元件中操作,dispatch方法,進行傳值,actions來接收進行處理, changeCity (ctx, city) { ctx.commit('changeCity', city)}， 傳入兩個引數,第一個引數ctx(上下文, 進行commit時候使用)，第二個引數city就是dispatch總元件中獲取到的。

      • mutations：根據上面的commit(‘changeCity’, city)changeCity進行命名，傳遞兩個引數，第一個是state, 第二個引數是city。然後進行賦值給state.city,就改變了公用的儲存資料。

      • 栗子如下(再src/store/index.js)：

        // 引入vuex
        import Vue from 'vue'
        import Vuex from 'vuex'
        // 使用Vuex
        Vue.use(Vuex)
        // 建立Vuex 倉庫
        export default new Vuex.Store({
          // 存放公用的資料
          state: {
            city: '上海'
          },
          actions: {
            changeCity (ctx, city) {
              ctx.commit('changeCity', city)
            }
          },
          mutations: {
            changeCity (state, city) {
              state.city = city
            }
          }
        })
        

  • 再main.js中建立Vuex的根例項：

  • 第一步： 首先引入：import store from './store'

  • 第二部： 直接建立：

    new Vue({
      el: '#app',
      router,
      // 建立Vuex 根例項
      store,
      components: { App },
      template: '<App/>'
    })
    

• 程式設計式導航vue-router:

  • this.$router.push('/') : 來進行頁面中的跳轉('/')代表的是路徑。

  • 該方法的引數可以是一個字串路徑，或者一個描述地址的物件。比如：

    // 字串
    router.push('home')
    
    // 物件
    router.push({ path: 'home' })
    
    // 命名的路由
    router.push({ name: 'user', params: { userId: 123 }})
    
    // 帶查詢引數，變成 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }})
    

8.9