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開始這個專案

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

看到以下的畫面就表示已經成功了

照著畫面上的指示輸入以下的指令

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

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

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

認識專案結構

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

• 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你應該會看到以下的畫面

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

結語

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

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