tags: Vue.js
ItIron2020
前言
至此為止我們所有的demo都是利用vue-pen進行,這半個月中我們介紹了許多vue屬性、指令,元件等核心的概念,現階段其實你們已經掌握了足夠的武器打造自己的專案了。 今天就讓我們來利用vue-cli建造你的第一個本地vue專案,gogogo~!
什麼是vue-cli
vue-cli是由vue的核心開發者們打造的工具,可以幫助你快速建立一個vue專案,裡面除了完整的vue結構外,也替我們處理好麻煩的webpack等前端常用的套件,使用方便、甚至有推出GUI介面,對於快速打造專案是個非常有用的工具!
installation
要使用vue-cli前首先需要確認兩件事情
- 你的開發環境已安裝Node.js(若沒有,則請至官方網站安裝穩定版本)
- 利用以下指令全域安裝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
2020it邦鐵人賽-30天手把手的Vue.js教學 Day16 – 認識vue-cli,建立第一個本地的vue專案! 有 “ 1 則迴響 ”