這篇有免費影片可以觀賞喔！

快速原型開發

老套路，上官網：快速原型开发

使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发

這個部分我還沒有找到其他的參考網站可以奉上，只得照影片來做撰寫。幸好是免費章節
從影片得知，這是一個可以不需要使用create或init來創建那些充滿很複雜設定檔資料結構專案的開發模式(方式)，也能使用vue serve/ vue build，適用較小型的專案，不過必須先安裝一個全域套件(是套件吧?總之要下指令安裝在全域)

npm install -g @vue/cli-service-global

接著上示範步驟：
1.將已完成專案的html原始碼貼到新增的index.vue，並分離<template>、<script>、<style>
2.<template>拿掉在div有被el:綁定的id
3.<script>除了拿掉el: idName，要加入export default { ... }，並把data: ...及其他程式碼丟進去export，也就是說 new Vue這一行要刪除
4.此時終端機下指令vue serve index.vue，不是npm run serve哦！
5.看網頁結果並從開發者工具找錯誤，會看到data需要return，我們從原本 data: { ... } 改成return的方式，忘記的話回到Day 4參考
6.載回css，用@import url(path)
7.編譯打包：vue build index.vue，編譯完會跑出dist folder

影片步驟如上，是從一個已完成專案的.html貼到.vue檔做示範，也就是說我們可以反推：只開一個.vue檔，且程式碼各自寫在<template>、<script>、<style>裡就進行可以打包，前提有說到這適用於小型的專案

小結

今天也是很短的結束了，倒數的日子及週日使人加倍怠惰。此線上課程的標題叫做Vue 出一個電商網站，但本系列作一直沒有提到這部分，因為內容比較龐大，加上這是最大賣點(或商業機密)，不要貿然撰寫比較好才是，待筆者熟練vue且能夠不看影片寫出相似功能的網站再來發表然後這次鐵人賽也已經結束了