1. 程式人生 > >Vue框架—專案部署與實踐

Vue框架—專案部署與實踐

環境配置

  • 首先安裝 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-clinpm 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