ChingFeng
Sep 6, 2018 · 5 min read

VueJs元件篇-component(八)

vue-cli產生範本

使用vue-cli產生必須安裝node.js,使用node.js附帶的管理套件npm來安裝vue-cli。

1.下載node.js

選擇LTS版本,因為LTS版本支援的生命週期比較長,如要嘗試新功能可以選擇Current的版本。

2.安裝Node.js

▼點選下載的檔案node-v8.11.4.pkg開啟安裝畫面。

▼前面步驟都繼續,然後按下【安裝】按鈕

▼安裝完成

▼開啟終端機指令【node -v】查看安裝的node版本,【npm -v】查看npm版本

3.安裝Vue-Cli套件

▼安裝指令【npm install -g vue-cli】(參數[-g]表示該套件安裝在本機端)

▼安裝時,發生權限不足

▼增加sudo指令給予權限【sudo npm install -g vue-cli】


◉使用vue-cli產生開發樣版

建立資料夾【mkdir Vue-component】→進入Vue-component資料夾【cd Vue-component】。

1.建立Vue網頁模版

▼產生Vue網頁樣版

(1)Generate project in current directory?是否將檔案產生在目前目錄<<Y

(2)Project Name:專案名稱<< vue-component

(3)Project description:專案說明<<A single file component

(4)Author:開發者<<略過

(5) License:授權聲明<<使用預設MIT授權

(6)Use sass?是否使用sass樣式編譯<<N

▼產生Vue網頁開發樣版

2.初始化樣版

▼初始化指令【npm install】

▼執行開發模式【npm run dev】

◉使用Vue-cli產生開發樣版

使用Visual Studio Code作為開發IDE環境

<template>
<div id="app"></div>
</template>
<script>
export default {}
</script>

2.修改網頁

<template>
<div id="app">
<p>I have a secret message:</p>
<p v-if="show" class="secret">{{message}}</p>
<button v-else @click="show = true">Show Message</button>
</div>
</template>
<script>
export default {
data(){
return {
show: false,
message: 'much secret. many reactive. wow!'
}
}
}
</script>
<style>
.secret{
background-color: thistle;
}
</style>

Object實戰

學習歷程紀錄

ChingFeng

Written by

叢林般的世界,一步步邁向未知的未來,迴盪迷途的工程師…

Object實戰

學習歷程紀錄

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade