第8章-項目環境配置及單文件組件

1、學習目標

• 掌握項目環境配置的方法
• 可以靈活掌握單文件組件的使用方法

2、項目環境配置步驟

一、安裝node.js

node做用：搭建後臺環境框架

下載地址：https://nodejs.org/en/download

node安裝成功後： node -v 查看node.js安裝的版本。

二、安裝插件

• 安裝vue-cli：npm install -g vue-cli (Vue-cli是Vue的腳手架工具，-g表示在全局下安裝vue-cli)
• 安裝webpack： npm install webpack -g  (包管理工具，主要是打包和解包用的)
• 建立項目：vue init webpack my-vue(my-vue是項目名稱，是隨意取的)

三、建立項目

建立項目過程當中，除了vue-router是yes以外，其餘的所有是no。

四、環境配置

• 切換到所建立的項目目錄下： cd my-vue
• 安裝啓動模塊：npm install
• 啓動項目：npm run dev

五、最後在瀏覽器上輸入：http://localhost:8080。測試vue項目是否啓動成功。

3、項目目錄結構分析

目錄/文件	說明
build	項目構建(webpack)相關代碼
config	配置目錄，包括端口號等。咱們初學可使用默認的。
node_modules	npm 加載的項目依賴模塊
src	這裏是咱們要開發的目錄，基本上要作的事情都在這個目錄裏。裏面包含了幾個目錄及文件： assets: 放置一些圖片，如logo等。 components: 目錄裏面放了一個組件文件，能夠不用。 App.vue: 項目入口文件，咱們也能夠直接將組件寫這裏，而不使用 components 目錄。 main.js: 項目的核心文件。
static	靜態資源目錄，如圖片、字體等。
test	初始測試目錄，可刪除
.xxxx文件	這些是一些配置文件，包括語法配置，git配置等。
index.html	首頁入口文件，你能夠添加一些 meta 信息或統計代碼啥的。
package.json	項目配置文件。
README.md	項目的說明文檔，markdown 格式

【擴展】：cnpm安裝：npm install -g cnpm -registry=https://registry.npm.taobao.org

4、單文件組件

4.一、單文件組件定義

說明：my-vue項目下 ->src -> components 下的 -> HellWorld.vue中去定義

//定義模板
<template>
    <div>
        html結構
    </div>
</template>

//定義組件
<script>
   export default {
　　　　name: 'HellWorld', //name默認的HellWorld.vue組件文件的名稱
       組件配置項(data、methods等)
   }
</script>

//定義樣式
<style>
#p .class{樣式}
</style>

 實戰如圖：

4.二、導入子組件

說明：以前咱們說 父組件中 有 子組件，經過父子關係，而後子組件的模板要在 父組件的模板的中才能使用，那咱們再一個項目中，如何才能實現父子組件的關係呢。由於在項目中，每個組件都是單獨的，都是一個 xxx.vue的文件。因此咱們今天就來學習一下。

一、建立子組件 item.vue

<template>
  <div>
    <img src="../assets/logo.png"/>
    <span>首頁</span>
  </div>
</template>

<script>
    export default {
        name: "item" 
    }
</script>

<style>
</style>

2.父組件(hello.vue)中導入子組件(item.vue)

說明：子組件的別名是本身隨便起的，這個不用刻意的去理解。import 子組件別名 from 組件路徑

<!--suppress ALL -->
<template>
    <!--調用子組件-->
    <Item></Item>
</template>

<script>
    import Item from './item' //引入組件 import 子組件別名 from 組件路徑
    export default {
      name: "hello",
      components: {Item} //設置子組件
    }
</script>

<style scoped>

這邊注意了，這邊導入子組件能夠導入多個。

<script>
    import Item from './item' //引入組件 import 子組件別名 from 組件路徑
    import  Hello from './HelloWorld'
    ....

    export default {
      name: "hello",
      components: {Item,Hello，....} //設置子組件
    }
</script>

具體如圖：

其餘的使用方式，在父子組件使用是如出一轍的，只不過局部語法，好比，使用正向傳值(父組件的值傳遞給子組件)，逆向傳值(子組件的值傳遞給父組件)，具名槽口(slot)，和匿名槽口等等。

4.三、計算屬性

咱們再定義須要經過簡單的邏輯判斷後，才能最終肯定值得變量，不須要在data中直接定義而後計算。兩種方式均可以。

語法以下：

<template>
  <div class="itemWarp" @click="fn">
     <!--根據下面的computed的計算屬性，獲取bol的值-->
    <span v-show="bol"></span>
  </div>
</template>

<script>
    export default {
      name: "item",
      //在computed關鍵字定義計算屬性
      computed: {
        bol: function () {  //經過function函數中的計算 獲取返回 bol的值
          //邏輯判斷語句
          //返回true或者false 傳遞給bol這個變量
          if (this.mark == this.sel){
            return false;
          }
          return true;
        }
      }
</script>

4.四、具體使用

說明：使用正向傳值(父組件的值傳遞給子組件)，逆向傳值(子組件的值傳遞給父組件)，具名槽口(slot)，和匿名槽口等知識。

 父級HelloWorld.vue文件

<!--suppress ALL -->
<template>
  <div class="tabbarWarp">
    <!--sel:正向傳值,change=getVal是逆向傳值，getVal後面不能加括號-->
    <Item txt="首頁" mark="1" :sel="selected" @change="getVal">
      <img src="../assets/logo.png" slot="nomalImg"/>
    </Item>
  </div>
</template>
<!--定義組件-->
<script>
  import Item from  "./item"

  export default {
    name: "HelloWorld",
    components: {Item},
    data: function () {
      return {
        selected: 1
      }
    },
    methods: {
      //節後子組件傳遞過來的值
      getVal: function (val) {
        this.selected = val;

      }
    }
  }
</script>
<!--定義樣式-->
<style>
  .tabbarWarp{width: 100%;height: 64px;position: fixed;left: 0;}
</style>

HelloWorld.vue(父級組件)

子級組件item.vue文件

<template>
  <div class="itemWarp" @click="fn">
    <!--slot槽口是不能使用指令的，須要在槽口外層再包一層增長指令-->
    <span v-show="bol"><slot name="nomalImg"></slot></span>
    <span v-show="!bol"><slot name="activeImg"></slot></span>
    <span>{{ txt }}</span>
  </div>
</template>

<script>
    export default {
      name: "item",
      props: ['txt', 'mark','sel'], //mark外部傳入的一個值,sel接收正向傳值
      //計算屬性，定義須要經過簡單的邏輯判斷後，才能最終肯定值得變量
      computed: {
        bol: function () {
          //邏輯判斷語句
          //返回true或者false
          if (this.mark == this.sel){
            return false;
          }
          return true;
        }
      },
      methods: {
        fn: function () {
            console.log(this.mark);
            console.log(this.sel);
            //逆向傳值，將當前點擊的item的mark值傳遞給父級，賦值給selected
            this.$emit('change',this.mark);
        }
      }
    }
//給每一個item添加一個mark，做爲惟一標識
//聲明一個變量selected來作記錄被選中item的mark
//1 2 3 4 5 selected:3
</script>

<style>
</style>

item.vue(子級組件)

5、總結

1. 組件都是寫在components下，都是以vue結尾。
2. 它的使用語法跟咱們以前學習的是同樣的用法，只是局部上的差異
3. 單文件組件在.vue文件中同時設置組件的HTML結構，JS代碼和CSS樣式