Vue之組件化開發（一）

時間 2021-04-11

標籤 javascript css html 前端 vue java node python webpack git 欄目 JavaScript 简体版

原文原文鏈接

5 Vue之組件化開發

5.1 組件【component】

什麼是組件?javascript

"""
組件【component】就是自定義封裝代碼的功能。在前端開發的過程當中，常常出現多個網頁就是重複的，並且許多不一樣頁面之間，也存在一樣的功能。好比說，導航條。

爲了在網頁中實現這一功能，就須要使用html定義功能的內容結構，使用CSS聲明功能的外觀樣式，使用js來定義功能的特效。

所以，就產生了一種把一個功能相關的【html、css和js】代碼封裝在一塊兒組成一個總體的代碼塊封裝模式，咱們把它稱之爲「組件」。
"""

在Vue中的組件有兩種，默認組件（全局組件）和單文件組件。css

5.1.1 默認組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>默認組件的使用</title>
    <script src="vue.min.js"></script>
</head>
<body>
<div id="app">
    <calculate></calculate>
</div>
<script>
    Vue.component("calculate", {
        template: `<div>
                    <button @click="sub">-</button>
                    <input type="text" v-model="num" />
                    <button @click="add">+</button>
                  </div>`,
        data: function () {
            return { //寫到這裏的數據，只有當前的組件能夠取使用
                num: 0,
            }
        },
        methods: { //組件裏面的方法
            sub() {
                this.num--;
            },
            add() {
                this.num++;
            },
        },
        watch: { // 監控num
            num() {
                if (this.num < 1) {
                    this.num = 0
                }
            }
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {},
    })
</script>
</body>
</html>

5.2 Vue自動化工具的安裝

5.2.1 什麼是Vue-cli

"""
vue腳手架指的是vue-cli，它是一個專門爲單頁面應用快速搭建繁雜的腳手架，它能夠輕鬆的建立新的應用程序並且可用於自動生成vue和webpack的項目模板。
"""

通常狀況下，單文件組件，咱們運行在自動化工具vue-CLI中，能夠幫咱們把單文件組件編譯成普通的js代碼。因此咱們須要在電腦先安裝搭建vue-CLI工具。html

官網：https://cli.vuejs.org/zh/前端

Vue Cli 須要node.js8.9或者更高的版本(推薦 8.11.0+)。那麼若是咱們在同一臺機器上安裝了多個版本，如何來管理它們了。vue

這時候，咱們能夠用nvm或nvm_windows 在同一臺電腦上管理不一樣的Node版本。nvm工具的下載和安裝java

curl -o- https://github.com/nvm-sh/nvm/v0.35.3/install.sh | bash

安裝記錄:node

打開:https://github.com/coreybutler/nvm-windows/releasespython

安裝完成之後,先查看環境變量是否設置好了.webpack

經常使用的nvm命令git

nvm list                     # 列出目前在nvm裏面安裝的全部node版本
nvm install node版本號         # 安裝指定版本的node.js
nvm uninstall node版本號       # 卸載指定版本的node.js
nvm use node版本號             # 切換當前使用的node.js版本

若是使用nvm工具，則直接能夠不用本身手動下載，若是使用nvm下載安裝 node的npm比較慢的時候，能夠修改nvm的配置文件(在安裝根目錄下)

# settings.txt
root: C:\tool\nvm    [這裏的目錄地址是安裝nvm時本身設置的地址,要根據實際修改]
path: C:\tool\nodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/ 
npm_mirror: https://npm.taobao.org/mirrors/npm/

5.2.2 安裝Node.js

Node.js是一個新的後端語言，它的語法與javascript類似，能夠說它是屬於前端的後端語言。後端語言與前端語言的區別：

# 在運行環境上
後端語言通常運行在服務端，而前端語言運行在客戶端的瀏覽器上
# 在功能上
後端語言能夠操做文件，修改數據庫，而前端語言不能夠。

咱們通常會安裝長線支持版本（Long-Time Support, LTS）,下載地址：https://nodejs.org/en/download/。

Node的版本有兩大分支，官方發佈和社區發佈的版本。

0.xx.xx 這種版本號就是官方發佈的版本，xx.xx.x 就是社區開發的版本。

當Node.js安裝完畢後，能夠在終端輸入如下命令，檢測是否安裝成功：

C:\Users\Administrator>node -v
v12.18.1

5.2.3 npm

在安裝node.js完成後，在node.js中會同時幫咱們安裝一個npm包管理器npm。咱們能夠藉助npm命令來安裝node.js的包。這個工具至關於python的pip管理器。

npm install -g 包名         # 安裝模塊   -g表示全局安裝，若是沒有-g，則表示在當前項目安裝
npm list                    # 查看當前目錄下已安裝的node包
npm view 包名 engines       # 查看包所依賴的Node的版本 
npm outdated                # 檢查包是否已通過時，命令會列出全部已過期的包
npm update 包名             # 更新node包
npm uninstall 包名          # 卸載node包
npm 命令 -h                 # 查看指定命令的幫助文檔

5.2.4 安裝Vue cli

npm install -g vue-cli

# 若是安裝速度過慢，一直超時，能夠考慮切換npm鏡像源：http://npm.taobao.org/

5.2.5 使用Vue-CLI初始化建立前端項目

cd 到要建立項目的目錄

vue init webpack vuedemo  # vuedemo指的項目名

啓動開發服務器

終端啓動開發服務器

cd vuedemo # cd到項目的目錄下

npm run dev # 運行這個命令就能夠啓動node提供的測試http服務器

pycharm啓動開發服務器

打開相應的項目文件

設置Configurations

5.2.6 項目的目錄結構

src          #主開發目錄，要開發的單文件組件所有在這個目錄下的components目錄下

static      #靜態資源目錄，全部的css，js，圖片等資源文件放在這個文件夾

dist         #項目打包發佈文件夾，最後要上線單文件項目文件都在這個文件夾中[後面打包項目,讓項目中的vue組件通過編譯變成js 代碼之後,dist就出現了]

node_modules #目錄是node的依賴包目錄

config       #是配置目錄，

build        #是項目打包時依賴的目錄

src/router   #路由,後面須要咱們在使用Router路由的時候,本身聲明.

5.2.7 Vue項目的運行流程圖

6 單文件組件的要求

組件有兩種：普通組件和單文件組件

普通組件的缺點：

1. html代碼是做爲js的字符串進行編寫，因此組裝和開發的時候不易理解，並且沒有高亮效果。
2. 普通組件用在小項目中很是合適，可是複雜的大項目中，若是把更多的組件放在html文件中，那麼維護成本就會變得很是昂貴。
3. 普通組件只是整合了js和html，可是css代碼被剝離出去了。使用的時候的時候很差處理。

將一個組件相關的html結構，css樣式，以及交互的JavaScript代碼從html文件中剝離出來，合成一個文件，這種文件就是單文件組件，至關於一個組件具備告終構、表現和行爲的完整功能，方便組件之間隨意組合以及組件的重用，這種文件的擴展名爲「.vue」，好比："Home.vue"。

6.1 建立組件文件

6.1 template編寫html代碼的地方

<template>
    <div id="Home">
      <button @click="sub">-</button>
      <input type="text" v-model="num" />
      <button @click="add">+</button>
    </div>
</template>

6.2 script編寫Vue.js代碼

<script>
  export default {
    name: "Home",
    data: function () { //單文件組件裏面的數據
      return {
        num: 0,
      }
    },
    methods: { //單文件組件裏面的方法
      sub() {
        this.num--;
      },
      add() {
        this.num++;
      },
    },
    watch: { //監控num屬性的值
      num() {
        if (this.num < 1) {
          this.num = 0;
        }
      }
    }
  }
</script>

6.3 style 編寫當前組件的代碼

<style scoped>
  .sub,.add{
    border: 1px solid red;
    padding: 4px 7px;
  }
</style>

6.4 案例--加減數字

Home.vue

<template>
 <div id="Home">
   <button @click="sub">-</button>
   <input type="text" v-model="num"/>
   <button @click="add">+</button>
 </div>
</template>

<script>
 export default {  //export 將文件暴露給外界
   name: "Home",
   data: function () {
     return {
       num: 0,
     }
   },
   methods: {
     sub() {
       this.num--;
     },
     add() {
       this.num++;
     },
   },
   watch: {
     num() {
       if (this.num < 1) {
         this.num = 0;
       }
     }
   }
 }
</script>

<style scoped> //組件的樣式
 .sub, .add {
   border: 1px solid red;
   padding: 4px 7px;
 }
</style>

APP.vue

<template>
  <div id="app">
    <calculate></calculate>
  </div>
</template>

<script>
  import calculate from "./components/Home"

  export default {
    name: 'App',
    components: {
      calculate
    }
  }
</script>

<style>

</style>

運行效果：

6.5 組件的嵌套

有時候開發vue項目時,頁面也能夠算是一個大組件,同時頁面也能夠分紅多個子組件。由於,產生了父組件調用子組件的狀況。例如,咱們能夠聲明一個組件,做爲父組件。在components/建立一個保存子組件的目錄HomeSon。

在HomeSon目錄下,能夠建立當前頁面的子組件,例如,是Menu.vue

//  組件中代碼必須寫在同一個標籤中
<template>
    <div id="menu">
      <span>{{msg}}</span>
      <div>hello</div>
  </div>
</template>

<script>
  export default {
    name:"Menu",
    data: function(){
      return {
        msg:"這是Menu組件裏面的菜單",
      }
    }
  }
</script>

而後，在父組件中調用上面聲明的子組件。

最後,父組件被App.vue調用.就能夠看到頁面效果。

效果: