[Java Script]Vue.js

更新 發佈閱讀 2 分鐘

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


架設環境

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



安裝Node.js(https://nodejs.org/en/download/package-manager)

因為Vue.js的開發者在開發專案時,通常會依賴一些外掛工具套件,所以一般會用Node.js的NPM來實現Vue.js外掛套件的管理。


安裝Vue CLI

npm install -g @vue/cli


建立Vue專案

vue init webpack your_project_name


目錄結構

build:要發佈的專案存放位置。

config:設定路徑、通訊埠等資訊。

node_modules:存放用npm安裝後的套件。

src:項目資料夾

assets:圖檔資料夾。

main.js:專案的核心檔案。

components:自訂義組件放置資料夾。

router:存取路徑與components的路由對應關係。

App.vue:專案入口檔案。

static:靜態資源目錄。

test:初始測試目錄。

index.html:首頁入口。

package.json:專案設定檔。

dist:打包後前端資源的輸出目錄。


進入專案根目錄編譯、執行

cnpm install​


執行Vue.js

npm run dev


安裝ElementUI

cnpm i element-ui -s

引用ElementUI

在main.js加入底下代碼:

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'


使用ElementUI

Vue.use(ElementUI)


安裝Axios

cnpm install axios -save

Vue.js不支援ajax,因此要借助axios來完成。


引用Axios

import axios from 'axios'


留言
avatar-img
留言分享你的想法!
avatar-img
小黑與程式的邂逅
8會員
123內容數
嗨,我是一名程式設計師,會在這分享開發與學習紀錄。
你可能也想看
Thumbnail
厭倦了管理眾多信用卡以追求最高回饋?玉山Unicard權益切換信用卡應運而生,讓您輕鬆切換消費方案,從1%無上限基本回饋,透過三種方案任意切換,最高可享4.5%回饋,更有限時核卡加碼至7.5%。本文深入解析各方案優勢、設定方式,並提供日常與旅行配置建議,讓您成為聰明消費的「回饋金獵人」。
Thumbnail
厭倦了管理眾多信用卡以追求最高回饋?玉山Unicard權益切換信用卡應運而生,讓您輕鬆切換消費方案,從1%無上限基本回饋,透過三種方案任意切換,最高可享4.5%回饋,更有限時核卡加碼至7.5%。本文深入解析各方案優勢、設定方式,並提供日常與旅行配置建議,讓您成為聰明消費的「回饋金獵人」。
Thumbnail
話說身為短線交易者,每天要作的事情就是從盤勢觀察、到籌碼流向,再到經過多維度資料數據交叉比對,盤中盯著分K、江波圖和五檔報價,算計著每一分K線的轉折,雖能換來即時驗證判斷的快感與成就,但長期下來,卻也衍生眼睛與肩頸卻成了抹不去的職業病。
Thumbnail
話說身為短線交易者,每天要作的事情就是從盤勢觀察、到籌碼流向,再到經過多維度資料數據交叉比對,盤中盯著分K、江波圖和五檔報價,算計著每一分K線的轉折,雖能換來即時驗證判斷的快感與成就,但長期下來,卻也衍生眼睛與肩頸卻成了抹不去的職業病。
Thumbnail
快要年末了,對於即將要出國的我,即時來了這張信用卡真的很不錯。認識我的人都知道我因為工作常常要出國,所以這次感謝玉山銀行合作邀請,讓我可以體驗這張卡的美好。
Thumbnail
快要年末了,對於即將要出國的我,即時來了這張信用卡真的很不錯。認識我的人都知道我因為工作常常要出國,所以這次感謝玉山銀行合作邀請,讓我可以體驗這張卡的美好。
Thumbnail
先前提到 Quasar 的 Dialog Plugin 很好用,再讓我補充一個用法。
Thumbnail
先前提到 Quasar 的 Dialog Plugin 很好用,再讓我補充一個用法。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
樣板模式的定義極為簡單,卻是大型系統程式、WEB/APP應用框架的設計核心,完美展現設計模式的價值: 簡單、高效、強大。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
對,沒錯。Nuxt 是一個框架 (Vue) 的框架。
Thumbnail
對,沒錯。Nuxt 是一個框架 (Vue) 的框架。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News