Vue.js入門 - 2

by vivid 29. 五月 2019 01:45

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:N190520703
出刊日期: 2019/5/29

在本站《Vue.js入門 - 1》文章中,介紹了Vue.js開發環境安裝與設定,以及基本的資料繫結語法,和元件的使用,在這篇文章中,將要繼續介紹如何設計Vue.js的單一元件檔案。

單一元件檔案(Single File Component)

若建立的應用程式不是屬於單一網頁應用程式(Single Page Application,SPA),而只有部分的網頁使用到Vue.js,那麼可以使用標準的「new Vue()」或「Vue.component()」函式來建立Vue的實體。根據官網文件的說明,全域元件主要的缺點如下:

  • 全域定義:你需要確保每個元件的名稱都是唯一不重複的。
  • 字串樣板:以字串進行定義,開發工具將不會以不同顏色區別關鍵字,撰寫困難,換行還需使用跳脫字元(\)。
  • 不支援CSS。
  • 不支援預處理器,如Babel,因此只能夠只用HTML與ECMAScript 5語法來撰寫程式碼。

在單一網頁應用程式(Single Page Application,SPA)網站應用程式中,為了便於重複使用元件,通常會將元件寫在一個外部檔(*.vue),稱之為單一元件檔案(Single File Components),它也可以解決上述全域元件的缺點。

由於元件是由HTML、JavaScript、CSS組成,你可以將這三者寫在一個附檔名為vue的檔案之中,或者將這三者分別寫在三個檔案中:

  • *.HTML檔案:定義元件的結構。
  • *.js檔案:存放JavaScript程式碼。
  • *.css檔案:存放CSS。

當應用程式變複雜時,將元件打包成單一元件檔案(Single File Components)可以更易於重用與管理。不過這個檔案中通常會使用到模組(module)的語法,因此不能直接在瀏覽器之中使用,需要搭配一些工具程式來轉換成瀏覽器看的懂的程式碼來執行。我們可以利用Vue-Cli工具程式來建立開發專案,搭配webpack與vue-loader來執行元件。

Webpack是一個模組打包器(module bundler),用來將多個JavaScript檔案打包成一個。Webpack可以利用Loader與Plugin來轉換程式碼,例如將ECMAScript 2015(ES6)語法的程式碼,轉換成ECMAScript 5(ES5)語法的程式碼,以讓不支援ECMAScript 2015語法的瀏覽器能夠使用執行,又可以享受新語法帶來的好處。

 

使用Vue-Cli建立專案

利用Vue-Cli工具程式來建立開發專案的好處是,它可以協助建立專案之中的必要項目。例如提供專案進入點,建立資料夾以及一些組態設定檔案。同時提供可搭配預處理器進行開發、建置程序,便於部署在生產環境之中。Vue.js本身也提供CLI工具程式,詳細資訊可參閱:

https://github.com/vuejs/vue-cli

首先要先利用「npm」下載「vue-cli」,在命令提示字元輸入以下指令:

npm install --global vue-cli

在此安裝的是2.x版,套件版本可以利用以下指令來查詢:

vue –version

這個命令執行結果,請參考下圖所示:

clip_image002

圖 1:檢視安裝版本。

「vue-cli」3.x版之後,將套件名稱修改為「@vue/cli」,若要使用新版來進行開發,可以參考官方文件的說明:「https://cli.vuejs.org/guide/installation.html」。

然後再於命令提示字元下指令,建立一個搭配Webpack.套件來開發的專案:

vue init webpack mydemo

其中「init」參數要求建立一個新專案,「webpack」參數指明要使用的專案樣版;「mydemo」參數指定要建立的專案資料夾名稱。接下來會詢問一些建立專案的問題,一開始可以視需求選擇,或先使用預設值:

clip_image004

圖 2:建立一個搭配Webpack.套件來開發的專案。

安裝完成之後,將會看到以下訊息,提供文件網址「https://vuejs-templates.github.io/webpack」:

clip_image006

圖 3:使用vue init建立專案。

依照指示,在命令提示字元輸入以下指令,切換到目前工作路徑到「mydemo」資料夾,這個資料夾就是你的專案:

cd mydemo

建立專案的過程中,會順帶安裝「webpack-dev-server」,這是一個在工作階段中使用的網站伺服器,在命令提示字元輸入以下指令,執行專案:

npm run dev

接著將啟動「webpack-dev-server」,並接聽在「http://localhost:8080」埠:

clip_image008

圖 4:執行專案。

了解專案結構

新建立的專案包含許多的檔案與資料夾,幾個重點了解一下:

  • 「src」資料夾:存放原始程式碼。
  • 「build」資料夾:存放打包完要部署到生產環境上的程式碼。
  • 「index.html」檔案:網站的首頁。
  • 「webpack.base.conf.js」檔案:webpack的組態檔。參考下圖,從15行可以知道主程式為「main.js」檔案,以及20行處指定打包完要輸出的JavaScript檔名,[name]是參數代表實際檔案的名稱。

clip_image010

圖 5:webpack的組態檔:「webpack.base.conf.js」檔案。

在13行將組態物件匯出,這樣可以讓Webpack命令使用它們。

 

建立單一元件檔案(Single File Component)

接下來讓我們在專案中建立建立單一元件檔案(Single File Component),參考下圖專案的檔案組織結構,在「src\components」資料夾下建立一個「mycomponent.vue」檔案:

clip_image012

圖 6:自訂元件。

在「mycomponent.vue」檔案之中加入以下元件的程式碼:

  • mycomponent.vue

<style scoped>
.myclass {
  background-color: lightcyan;
}
</style>
<template>
  <div class="myclass">
    <label> {{promptText}} :</label>
    <input type="text" v-model="myName">
  </div>
</template>
<script>
export default {
  props: ['myName'],
  data() {
    return {
      promptText: 'User Name'
    };
  }
};
</script>

「style」區段用來定義元件的樣式,可以使用CSS語法或是SASS語法。本文的範例中使用CSS定義一個自訂類別「.myclass」來設定元件背景顏色。加上「scoped」關鍵字可以限定CSS只能夠在此元件之中使用,若沒有此關鍵字,那麼定義的CSS會變成全域的。「template」區段用來設定元件的HTML樣板,在此要特別注意,根項目只能有一個。「script」區段則是封裝元件的邏輯,並利用「export default」關鍵字將元件匯出。

程式的進入點是「src/main.js」檔案,修改檔案內容,將以下程式碼代換掉檔案中原有的內容:

  • src/main.js

import Vue from 'vue'
import mycomponent from '@/components/mycomponent'

var vm = new Vue({
  el: '#app',
  data: {
    userName: 'Mary',
    title :'My App'
  },
  components: {
    'my-component': mycomponent
  }
});


利用「import」關鍵字匯入我們自訂的元件「mycomponent」。建立Vue實體時,利用「components」屬性指定元件名稱「my-component」,並將其註冊為區域元件。區域元件僅能夠在父元件中使用。

預設專案中「src」資料夾內已經建立一個「App.vue」元件,它的程式碼參考如下,目前不需要修改它的程式碼。

  • src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

修改首頁「index.html」程式碼,在「#app」元件之中使用到自訂元件「my-component」:

  • index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title> mydemo </title>
  </head>
  <body>
    <div id="app">
      <h2> {{title}} </h2>
      <my-component v-bind:my-name="userName"> </my-component>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

接著在命令提示字元,執行「npm run dev」命令,接著將會自動利用webpack進行打包的程序,並啟動網站伺服器:

clip_image014

圖 7:執行並啟動網站伺服器。

開啟瀏覽器,輸入以下網址:「http://localhost:8080/」,執行的結果請參考下圖所示:

clip_image016

圖 8:範例執行結果。

將CSS與HTML分散到外部檔案

如果你想將CSS與HTML分散到外部檔案,以享受集中式管理與瀏覽器快取的好處,你可以將單一元件檔案中相關的CSS樣式與JavaScript程式分散到外部的css、js檔案,要達到這樣的需求,需要修改一下「mycomponent.vue」程式碼,參考下例「mycomponent.vue」檔案的程式碼:

  • mycomponent.vue
<template>
  <div class="myclass">
    <label> {{promptText}} :</label>
    <input type="text" v-model="myName">
  </div>
</template>
<script src="./mycomponent.js"> </script>
<style src="./mycomponent.css"> </style>

 

在「src\components」資料夾建立「mycomponent.css」檔案,檔案之中只包含CSS樣式:

  • src/components/mycomponent.css
.myclass {
  background-color: lightcyan;
}

 

接著在「src\components」資料夾建立「mycomponent.js」檔案,檔案之中只包含JavaScript程式:

  • mycomponent.js

export default {
    props: ['myName'],
    data() {
      return {
        promptText: 'User Name'
      };
    }
  };

若此時執行「npm run dev」,可能會從瀏覽器除錯視窗中看到以下錯誤訊息:

[Vue warn]: Failed to mount component: template or render function not defined.

錯誤畫面請參考下圖所示:

clip_image018

圖 9:元件註冊錯誤。

我們需要修改「src/main.js」檔案中,註冊元件的程式碼如下:

  • src/main.js

import Vue from 'vue'

var vm = new Vue({
  el: '#app',
  data: {
    userName: 'Mary',
    title: 'My App'
  },
  components: {
    'my-component':  require('./components/mycomponent.vue').default
  }
});


若要將其註冊為區域元件,則解決上述的錯誤之方法是,改用以下語法來匯入元件:

  • src/main.js

import Vue from 'vue'
import mycomponent from '@/components/mycomponent.vue'
var vm = new Vue({
  el: '#app',
  data: {
    userName: 'Mary',
    title :'My App'
  },
  components: {
    'my-component': mycomponent
  }
});

執行「npm run dev」命令,開啟瀏覽器,輸入以下網址:「http://localhost:8080/」,此範例執行結果如圖8所示。

 

註冊成全域元件

若要將自訂元件註冊成全域元件,讓整個Vue應用程式都可以使用,通常會使用「Vue.component()」函式語法來進行註冊。對於大部分的中小型專案而言,已足以使用。若要將上述範例改成全域元件,我們需要修改「src/main.js」註冊元件的程式碼如下,利用「Vue.component()」函式進行註冊:

  • src/main.js

import Vue from 'vue'
Vue.component( 'my-component', require('./components/mycomponent.vue').default );

var vm = new Vue({
  el: '#app',
  data: {
    userName: 'Mary',
    title :'My App'
  }
});

執行「npm run dev」命令,開啟瀏覽器,輸入以下網址:「http://localhost:8080/」,此範例執行結果如圖8所示。

Tags:

.NET Magazine國際中文電子雜誌 | JavaScript | 許薰尹Vivid Hsu

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List