Vue cli 筆記

Vue cli

生成項目

1. 全局安裝vue-cli：npm install -g vue-cli
2. vue -V(檢視vue的版本，看vue腳手架是否安裝成功)
3. 安裝成功後，vue init webpack 項目名稱 （建立vue的項目）
4. cd 項目名稱
5. npm install 安裝依賴
6. npm run dev 運作架構項目
7. npm uninstall 軟體名稱 解除安裝插件

腳手架結構

1. build ：（webpack（編譯打包器） 相關的配置檔案）
2. config：（webpack（編譯打包器） 相關的配置檔案）
   • --index.js :指定背景服務端口和靜态檔案資源
3. node_modules：系統資源包
4. src：源碼檔案夾（開發的主要目錄）
   • main.js入庫js
5. static：靜态檔案
6. babelrc：babel的配置檔案
7. editorconfig：通過編輯器編碼、格式進行一定配置
8. eslintignore：eslint監測忽略的配置
9. eslintrc.js：檢測的配置
10. gitignore：git版本管制忽略的配置
11. index.html首頁面檔案（app.vue）
12. package.json(檔案配置包)

src 目錄分析

1. api ：背景互動子產品檔案
2. common：通用職員檔案
3. components：非路由元件
4. pages：路由元件
5. filters：自定義過來子產品檔案
6. mock：模拟資料接口
7. router：路由器檔案
8. store：vuex狀态管理
9. app.vue 應用元件
10. main.js 入口js

運作

1. npm run dev(開發運作（在記憶體中進行編譯打包，并且運作起來）)
2. npm run build(打包釋出)
3. npm install -g serve （安裝serve指令）(釋出運作起來)
4. serve dist(部署運作dist)

Vue 遇見問題

<template>
  <footer class="footer_guide border-1px">
    <!-- <a href="javascript:;" class="guide_item on">
    <span class="item_icon">
    <i class="iconfont icon-food"></i>
    </span>
    <span>外賣</span>
    </a> -->
    <div class="guide_item" @click="goto('/Home')" :class="{on: isCurrent('/Home')}">
    <span class="item_icon">
    <i class="iconfont icon-food"></i>
    </span>
    <span>首頁</span>
    </div>
    <div class="guide_item" @click="goto('/Search')" :class="{on: isCurrent('/Search')}">
    <span class="item_icon">
    <i class="iconfont icon-search"></i>
    </span>
    <span>搜尋</span>
    </div>
    <div class="guide_item" @click="goto('/Work')" :class="{on: isCurrent('/Work')}">
    <span class="item_icon">
    <i class="iconfont icon-single"></i>
    </span>
    <span>工作台</span>
    </div>
    <div class="guide_item" @click="goto('/Prosonal')" :class="{on: isCurrent('/Prosonal')}">
    <span class="item_icon">
    <i class="iconfont icon-user"></i>
    </span>
    <span>我的</span>
    </div>
  </footer>
</template>

<script>
export default ({
      methods: {
    goto (path) {
      this.$router.replace(path)
    },
    isCurrent (path) {
      // console.log(this.$route.path)
      return this.$route.path === path
    }
  }
})
</script>
<style>

.footer_guide{
  position:fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  width: 100%;
  height: 50px;
  display: flex;
}

  .guide_item{
    display:flex;
    flex:1;
    text-align: center;
    flex-direction: column;
    align-items: center;
    margin: 5px;
    color: #999999;
  }
  .iconfont{
      font-size:22px;
  }
  .on{
      color: #02a774;
      font-size: 12px;
      margin-top: 2px;
      margin-bottom: 2px;
  }
</style>
           

1. :class="{on: isCurrent('/Home')} 對象綁定文法，判斷是否要加on 這個樣式

font-awesom 圖示庫安裝

1.npm 安裝font-awesome 以及需要的所有依賴

• npm install less less-loader css-loader style-loader file-loader font-awesome --save

2.在main.js裡導入

//導入圖表的樣式
import 'font-awesome/css/font-awesome.min.css';
           

vuex 安裝(狀态管理)

npm install vuex --save
           

swiper 安裝（滑動塊）

npm install --save swiper
           

非路由元件

<template>
  <header class="header">
    <!-- 插槽是父元件與子元件的通訊方式，子元件中的slot可以顯示父元件傳遞給子元件的内容 -->
    <slot name="left"></slot>
    <span class="header_title">
      <span class="header_title_text ellipsis">{{title}}</span>
    </span>
    <slot name="right"></slot>
  </header>
</template>
           

1.slot 插槽站位（有的展示有的不展示name屬性識别）

Vue生命周期

beforeCreate( 建立前 )

在執行個體初始化之後，資料觀測和事件配置之前被調用，此時元件的選項對象還未建立，el 和 data 并未初始化，是以無法通路methods， data， computed等上的方法和資料。

created ( 建立後 ）

執行個體已經建立完成之後被調用，在這一步，執行個體已完成以下配置：資料觀測、屬性和方法的運算，watch/event事件回調，完成了data 資料的初始化，el沒有。 然而，挂在階段還沒有開始, $el屬性目前不可見，這是一個常用的生命周期，因為你可以調用methods中的方法，改變data中的資料，并且修改可以通過vue的響應式綁定展現在頁面上，，擷取computed中的計算屬性等等，通常我們可以在這裡對執行個體進行預處理，也有一些童鞋喜歡在這裡發ajax請求，值得注意的是，這個周期中是沒有什麼方法來對執行個體化過程進行攔截的，是以假如有某些資料必須擷取才允許進入頁面的話，并不适合在這個方法發請求，建議在元件路由鈎子beforeRouteEnter中完成

beforeMount

挂在開始之前被調用，相關的render函數首次被調用（虛拟DOM），執行個體已完成以下的配置： 編譯模闆，把data裡面的資料和模闆生成html，完成了el和data 初始化，注意此時還沒有挂在html到頁面上。

mounted

挂在完成，也就是模闆中的HTML渲染到HTML頁面中，此時一般可以做一些ajax操作，mounted隻會執行一次。

beforeUpdate

在資料更新之前被調用，發生在虛拟DOM重新渲染和打更新檔之前，可以在該鈎子中進一步地更改狀态，不會觸發附加地重渲染過程

updated（更新後）

beforeDestroy（銷毀前）

1. 這一步還可以用this來擷取執行個體，
2. 一般在這一步做一些重置的操作，比如清除掉元件中的定時器 和 監聽的dom事件

destroyed（銷毀後）