iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 16
0
Modern Web

30天手把手的vue.js教學!系列 第 16

2020it邦鐵人賽-30天手把手的Vue.js教學 Day16 - 認識vue-cli,建立第一個本地的vue專案!

tags: Vue.js ItIron2020

前言

至此為止我們所有的demo都是利用vue-pen進行,這半個月中我們介紹了許多vue屬性、指令,元件等核心的概念,現階段其實你們已經掌握了足夠的武器打造自己的專案了。 今天就讓我們來利用vue-cli建造你的第一個本地vue專案,gogogo~!

什麼是vue-cli

vue-cli是由vue的核心開發者們打造的工具,可以幫助你快速建立一個vue專案,裡面除了完整的vue結構外,也替我們處理好麻煩的webpack等前端常用的套件,使用方便、甚至有推出GUI介面,對於快速打造專案是個非常有用的工具!

installation

要使用vue-cli前首先需要確認兩件事情

  1. 你的開發環境已安裝Node.js(若沒有,則請至官方網站安裝穩定版本)
  2. 利用以下指令全域安裝vue-cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli

建立第一個本地vue專案

安裝完成後,我們可以利用vue create 專案名稱 快速打造一個vue專案

請打開你的終端機輸入以下的指令,我們將創立一個名為iron-demo的專案

vue create iron-demo

輸入該指令後,你應該會看到終端機的提示,詢問你打算以怎麼樣的preset開始這個專案

cli-demo 1

這邊我們先選default即可,接著就會馬上開始替你建置專案,過程約需1~2分鐘,你可以先去泡杯茶,我喜歡烏龍。

看到以下的畫面就表示已經成功了
cli-demo 2
照著畫面上的指示輸入以下的指令

cd iron-demo // 移動到剛建立的專案資料夾
npm run serve // 利用指令運行我們的vue專案

最後請你到localhost:8080,你應該會看到所有vue開發者最熟悉不過的畫面

cli-demo 3

仔細看一下右上角,我們之前裝的vue-devtool也順利的運作,一切都很成功:D

認識專案結構

我們先回到編輯器,仔細觀察一下產出的專案結構吧!

cli-demo 4

  • README.md
    所有關於運行的細節都寫在裡面,包含日後build的指令。
  • babel.config.js
    由於一開始的preset我們有選Babel,這個檔案會放有關Babel的設定,協助將你的程式碼轉為ES5之前的檔案。
  • node_modules
    放置專案內所有安裝的js套件,注意此資料夾已經預先被加入gitignore了。
  • package.json
    存放此專案的資訊,其中包含著安裝的套件、版本、關鍵字等資訊。
  • public
    此資料夾中包含著最重要的原始html檔案,也是我們最終vue實體綁定的對象,若你有想加入的CDN,也可以直接加在html檔案上。
  • src
    最為常用的資料夾,裡面包含著所有運行的主程式、組件以及與專案相關的額外資源(圖片等),你會發現幾乎所有的操作都在裡面完成。

接著請你點開src/App.vue,這是整個專案的進入點,我們看一下以下的內容

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

毫不意外的,你看到的是我們昨天才介紹的SFC,作為主程式的進入點,我們之後做的更動都是在App.vue往下延伸,你可以利用vue-devtool確認這一點,打開我們的devtool你應該會看到以下的畫面

cli-demo5

你可以清楚的看到在Root組件下就是App.vue,在往下就是在這隻檔案中引入的Helloworld組件,也就是我們昨天介紹過在組件中使用組件的概念!

結語

今天我們介紹了怎麼利用vue-cli快速打造vue專案,對於練習side project或是打造MVP專案都是相當實用的工具,接著我們的示範環境就會慢慢轉移到vue-cli上,包含套件的安裝、使用以及最後的部屬,過程中會用到我們目前所學的所有知識,敬請期待吧:D

此文章同步發布於個人部落格,有興趣的大大也可以來參觀一下:D


上一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day15 - 認識Single file components(SFC)
下一篇
2020it邦鐵人賽-30天手把手的Vue.js教學 Day17 - 認識EventBus,實現子層組件間的相互溝通
系列文
30天手把手的vue.js教學!30

尚未有邦友留言

立即登入留言