<h3 class="draft-block draft--h3" name="header-d2h8t">Vue-cli 環境安裝:</h3>
<ol>
  <li class="draft-block draft--li">安裝Node.js (直接到官網下載安裝)</li>
  <li class="draft-block draft--li">安裝Vue-cli:</li>
</ol>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">npm install -g vue-cli</pre></pre>
<h3 class="draft-block draft--h3" name="header-7jl1e">建立專案:</h3>
<div class="draft-block draft--p left">使用webpack建立project, 如以下範例hello-vue為project name:</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">vue init webpack hello-vue</pre></pre>
<h3 class="draft-block draft--h3" name="header-bo38g">執行專案:</h3>
<div class="draft-block draft--p left">在專案目錄下執行指令:</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">npm run dev</pre></pre>
<div class="draft-block draft--p left">打開瀏覽器輸入 <a href="http://localhost:8080/" target="_blank" class="draft--a">http://localhost:8080</a>即可打開網頁，只要修改程式碼存檔後，不用重新整理網頁，即可即時看到修改後的樣子!</div>
<div class="draft-block draft--p left">若是開發完要上線，使用以下指令打包code:</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">npm run build</pre></pre>
<div class="draft-block draft--p left">project下會多一個資料夾 <span style="font-style: italic; ">dist/ </span>，這個就是build完的code，放上server就等於上線了!</div>
<div class="draft-block draft--p left">假設是用sublime當作開發工具，可以安裝以下兩個套件:</div>
<h3 class="draft-block draft--h3" name="header-el173">高亮程式碼 — <a href="https://packagecontrol.io/packages/Vue%20Syntax%20Highlight" target="_blank" class="draft--a">Vue Syntax Highlight</a></h3>
<ol>
  <li class="draft-block draft--li">快捷鍵Ctrl+Shift+P，Mac 為Cmd+Shift+P，叫出 Package Control</li>
  <li class="draft-block draft--li">輸入Install，選擇Package Control: Install Package</li>
  <li class="draft-block draft--li">輸入Vue Syntax Highlight並安裝，完成後選擇<span style="font-style: italic; ">View -&gt; Syntax -&gt; Vue Component</span></li>
</ol>
<h3 class="draft-block draft--h3" name="header-e8gth">整理樣板 -<a href="https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify" target="_blank" class="draft--a">HTML-CSS-JS Prettify</a></h3>
<ol>
  <li class="draft-block draft--li">快捷鍵Ctrl+Shift+P，Mac 為Cmd+Shift+P，叫出 Package Control</li>
  <li class="draft-block draft--li">輸入Install，選擇Package Control: Install Package</li>
  <li class="draft-block draft--li">輸入 prettify 並選擇 HTML-CSS-JS Pretiffy</li>
  <li class="draft-block draft--li">這樣就可以整理 .vue 程式碼了</li>
</ol>
<h3 class="draft-block draft--h3" name="header-56qfp">程式碼:</h3>
<div class="draft-block draft--p left">如下圖，src就是主要coding的地方，其中main.js, App.vue就是程式進入點，接下來逐一解說!</div>
<div class="draft--imgNormal draft-block"><div><div style="height:264px" class="image-block-prerender" data-src="https://images.vocus.cc/a73e7a26-92b6-44b9-bc43-c97c34de9ca8.png" data-width="264" data-height="567" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:670px" class="image-block-prerender" data-src="https://images.vocus.cc/54775d00-b95a-478d-8ff1-4d771b462e0f.png" data-width="670" data-height="318" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:800px" class="image-block-prerender" data-src="https://images.vocus.cc/09621ac6-c9bf-4ba2-b9ab-ffade5638b57.png" data-width="800" data-height="586" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:800px" class="image-block-prerender" data-src="https://images.vocus.cc/2417b021-f659-41b5-871d-c394db2937de.png" data-width="800" data-height="472" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:800px" class="image-block-prerender" data-src="https://images.vocus.cc/aee72937-e6e6-4f2f-9e73-5f837ef2cff9.png" data-width="800" data-height="456" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<h3 class="draft-block draft--h3" name="header-dsn2r"><span style="font-weight: bold; ">畫面如下:</span></h3>
<div class="draft--imgNormal draft-block"><div><div style="height:800px" class="image-block-prerender" data-src="https://images.vocus.cc/e24106ef-06cc-4956-85c9-2da36b771d93.png" data-width="800" data-height="426" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">點了連結二之後，畫面如下:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:800px" class="image-block-prerender" data-src="https://images.vocus.cc/52767586-b325-45c8-ae47-8d08e541e951.png" data-width="800" data-height="425" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">再點首頁，則回到一開始的畫面:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:800px" class="image-block-prerender" data-src="https://images.vocus.cc/04ced750-3874-4f19-a4c9-88af024f4f7e.png" data-width="800" data-height="421" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">因此可以發現，router可以用來替換SPA的某個block UI，切換router url也會跟著變!</div>
<h3 class="draft-block draft--h3" name="header-1a0di">程式碼解釋:</h3>
<div class="draft-block draft--p left">App.vue中可以看到router-link，其中的to可以指定當點下去連結後，要在&lt;router-view/&gt;顯示哪一個component的設定頁面! 等於是在同一個區塊替換UI.</div>
<div class="draft-block draft--p left">App.vue中的router-link的to其實就是對應到index.js中的router path，每個path都會有對應的component，因此點了之後才會有替換UI的效果!</div>
<div class="draft-block draft--p left">其中SiteFooter則是引用進來的自定義components，&lt;SiteFooter&gt;&lt;/SiteFooter&gt;這個tag則是會替換成SiteFooter.vue裡面定義的html.</div>
<h3 class="draft-block draft--h3" name="header-bapr">使用third party library bootstrap:</h3>
<div class="draft-block draft--p left">1. 使用npm指令安裝:</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">npm install jquery --save<br>npm install bootstrap --save<br>npm install popper.js --save</pre></pre>
<div class="draft-block draft--p left">2. 下完指令後，在node_modules可以看到安裝好的套件。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:607px" class="image-block-prerender" data-src="https://images.vocus.cc/3e2d45ef-5ac8-477e-8adb-51e5b7543fc8.png" data-width="607" data-height="348" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">3. 設定 webpack.base.conf.js</div>
<div class="draft-block draft--p left">在build資料夾下:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:557px" class="image-block-prerender" data-src="https://images.vocus.cc/0b281e60-31f7-46a2-9b28-87d6ddb25687.png" data-width="557" data-height="256" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">在最上方引入webpack:</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">const webpack = require('webpack')</pre></pre>
<div class="draft-block draft--p left">在module.exports = {}後面新增以下程式碼 :</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">plugins: [<br>  new webpack.ProvidePlugin({<br>    $: "jquery",<br>    jQuery: "jquery"<br>  })<br>]</pre></pre>
<div class="draft-block draft--p left">若出現ReferenceError: $ is not defined這個錯誤訊息，是因為 eslint 檢查語法的關係，關閉的方法為編輯 .<span style="font-style: italic; ">eslintrc.js</span> 檔案，在 env 裡添加jquery: true</div>
<div class="draft-block draft--p left">最後看看加入bootstrap及jquery 語法測試後的畫面:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:800px" class="image-block-prerender" data-src="https://images.vocus.cc/421ac961-65be-40dd-8622-dfe31e042e46.png" data-width="800" data-height="392" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">修改後程式碼如下，在main.js import bootsrtap意思是全域載入 bootstrap，當然也可以需要的component再import就好:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:800px" class="image-block-prerender" data-src="https://images.vocus.cc/bfb13d60-586d-4fa2-82ff-3babd67b1ee1.png" data-width="800" data-height="392" data-isblurred="false" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">完整source code在這:</span></div>
<figure><a href="https://github.com/snailsmall612/vue-cli-hello-world"><strong>snailsmall612/vue-cli-hello-world</strong></a><br>
<a href="https://github.com/snailsmall612/vue-cli-hello-world"><em>You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…</em>github.com</a><a href="https://github.com/snailsmall612/vue-cli-hello-world">a</a></figure>
<div class="draft-block draft--p left"><span style="font-weight: bold; ">結論:</span></div>
<div class="draft-block draft--p left">簡單的說，vue.js的理念其實就是把一個網頁解構成多個元件(component)，不僅提高了程式碼的可維護性，且components是可以重複使用的，以前做過的common component，在新的project就可以直接import來用，而且這種架構也可以達到分工的目的，例如有人負責header、有人負責body，有人負責footer...等等。</div>
<blockquote class="draft-block draft--blockquote">本筆記參考: <a href="https://qq7886.gitbooks.io/vue-cli-2018/content/" target="_blank" class="draft--a">https://qq7886.gitbooks.io/vue-cli-2018/content/</a></blockquote>

職場產業

安裝Node.js (直接到官網下載安裝)

使用webpack建立project, 如以下範例hello-vue為project name:

打開瀏覽器輸入 http://localhost:8080即可打開網頁，只要修改程式碼存檔後，不用重新整理網頁，即可即時看到修改後的樣子!

若是開發完要上線，使用以下指令打包code:

project下會多一個資料夾 dist/ ，這個就是build完的code，放上server就等於上線了!

假設是用sublime當作開發工具，可以安裝以下兩個套件:

高亮程式碼 — Vue Syntax Highlight

快捷鍵Ctrl+Shift+P，Mac 為Cmd+Shift+P，叫出 Package Control

輸入Install，選擇Package Control: Install Package

輸入Vue Syntax Highlight並安裝，完成後選擇View -> Syntax -> Vue Component

輸入 prettify 並選擇 HTML-CSS-JS Pretiffy

如下圖，src就是主要coding的地方，其中main.js, App.vue就是程式進入點，接下來逐一解說!

再點首頁，則回到一開始的畫面:

因此可以發現，router可以用來替換SPA的某個block UI，切換router url也會跟著變!

App.vue中可以看到router-link，其中的to可以指定當點下去連結後，要在<router-view/>顯示哪一個component的設定頁面! 等於是在同一個區塊替換UI.

App.vue中的router-link的to其實就是對應到index.js中的router path，每個path都會有對應的component，因此點了之後才會有替換UI的效果!

其中SiteFooter則是引用進來的自定義components，<SiteFooter></SiteFooter>這個tag則是會替換成SiteFooter.vue裡面定義的html.

npm install jquery --save
npm install bootstrap --save
npm install popper.js --save

2. 下完指令後，在node_modules可以看到安裝好的套件。

在module.exports = {}後面新增以下程式碼 :

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
]

若出現ReferenceError: $ is not defined這個錯誤訊息，是因為 eslint 檢查語法的關係，關閉的方法為編輯 .eslintrc.js 檔案，在 env 裡添加jquery: true

最後看看加入bootstrap及jquery 語法測試後的畫面:

修改後程式碼如下，在main.js import bootsrtap意思是全域載入 bootstrap，當然也可以需要的component再import就好:

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…

snailsmall612/vue-cli-hello-world

snailsmall612/vue-cli-hello-world
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.coma

簡單的說，vue.js的理念其實就是把一個網頁解構成多個元件(component)，不僅提高了程式碼的可維護性，且components是可以重複使用的，以前做過的common component，在新的project就可以直接import來用，而且這種架構也可以達到分工的目的，例如有人負責header、有人負責body，有人負責footer...等等。

本筆記參考: https://qq7886.gitbooks.io/vue-cli-2018/content/

今年，vocus 的 iOS 工程師 YC 帶著技術交流（以及讓更多人認識 vocus）的使命，參與了今年的 try! Swift Tokyo 研討會，這系列的文章，我們將會分享研討會當中的精彩學習，還有那些網路上看不到的研討會體驗細節（讚嘆主辦方的用心）！

方格子 vocus 官方沙龍

vocus tech｜iOS 工程師前進東京！參加 try! Swift Tokyo 研討會的學習與啟發（上）

安裝程式 → 下載範本 → 列出專案的功能清單 → 開始開發

前端轉職經驗談

[前端自學轉職攻略] 9. 決定了 side project 的題目後，要怎麼開始？

如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。

Ni 1968的沙龍

Vite + TypeScript 專案中使用路徑別名

一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增  

base: "/Cart/" (/放自己的專案名稱/)

build: {outDir: "docs"},



接下來你要去你的github setting 裡面 -> Page ->選Deploy fro

郭欣玫的沙龍

vue3 部屬GitHub Page

平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。

此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找

Joker Cat

2023 Vue直播班筆記 - 自訂義指令 directive

Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。



架設環境

安裝Visual Studio Code(https://code.visualstudio.com/)



安裝Node.js(https://nodejs.org/en/

小黑與程式的邂逅

[Java Script]Vue.js

本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。

JayLinXR

Vite前端工具加入Tailwindcss教學

Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。

在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？


Vivian Yeh - 跨領域轉職的軟體工程師

為什麼前端不愛用  Webpack 了? Vite 簡介

學習

職場

親子與教育

以行動支持創作者！付費即可解鎖

軟體開發

前端攻略指南

零基礎到成功轉職，一路上會遇到哪些挑戰、應該如何解決？
- 猶豫階段：「這適合我嗎？薪水如何？...」
- 起步階段：「怎麼開始學？要不要做 side project？...」
- 成長階段：「如何優化開發效率？選擇框架？...」
- 面試階段：「怎麼準備技術和行為面試？...」

音樂藝文

阿傑前端筆記

愛看金庸的阿傑，想來分享一下我看金庸的點點滴滴。
講談金庸小說，免不了要爆一堆雷，所以請尚未看過金庸小說的朋友，跳過這裡，先去看金庸原著，享受金庸的武俠世界，別被爆雷破壞了第一次閱讀金庸小說的樂趣。
至於已看過金庸原著的朋友，歡迎一起分享你的觀點，小說劇情本就會各有解讀，各有領會，這才是現代文學的魅力！

VUE - 隨手筆記

是一隻喜愛前端勇往直前的霹靂酷樂貓

前端(Web & APP)

嗨，我是一名程式設計師，會在這分享開發與學習紀錄。

Coding = Dynamic

設計 + 程式，是一個出版對設計和程式的學習影片和教學文章，目的是為了讓大家能加快學習最新技術以及設計相關題目去思考如何改變產品的設計體驗。 請追蹤JayLinXR獲得最新消息: https://www.youtube.com/@jaylinxr 

RD少女養成計畫

為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
