Vue.js 入門

更新於 發佈於 閱讀時間約 6 分鐘

Vue-cli 環境安裝:

  1. 安裝Node.js (直接到官網下載安裝)
  2. 安裝Vue-cli:
npm install -g vue-cli

建立專案:

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

vue init webpack hello-vue

執行專案:

在專案目錄下執行指令:

npm run dev

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

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

npm run build

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

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

高亮程式碼 — Vue Syntax Highlight

  1. 快捷鍵Ctrl+Shift+P,Mac 為Cmd+Shift+P,叫出 Package Control
  2. 輸入Install,選擇Package Control: Install Package
  3. 輸入Vue Syntax Highlight並安裝,完成後選擇View -> Syntax -> Vue Component

整理樣板 -HTML-CSS-JS Prettify

  1. 快捷鍵Ctrl+Shift+P,Mac 為Cmd+Shift+P,叫出 Package Control
  2. 輸入Install,選擇Package Control: Install Package
  3. 輸入 prettify 並選擇 HTML-CSS-JS Pretiffy
  4. 這樣就可以整理 .vue 程式碼了

程式碼:

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

raw-image
raw-image
raw-image
raw-image
raw-image

畫面如下:

raw-image

點了連結二之後,畫面如下:

raw-image

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

raw-image

因此可以發現,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.

使用third party library bootstrap:

1. 使用npm指令安裝:

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

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

raw-image

3. 設定 webpack.base.conf.js

在build資料夾下:

raw-image

在最上方引入webpack:

const webpack = require('webpack')

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

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

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

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

raw-image

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

raw-image

完整source code在這:

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/
留言
avatar-img
留言分享你的想法!
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
Vue3 學習筆記,vue-router 篇。
Thumbnail
Vue3 學習筆記,vue-router 篇。
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
Vue3 學習筆記,專案建立與基礎響應式篇
Thumbnail
前言介紹 在 golang 1.16之後官方提供的工具包裡面有個 `embed` 可以使用,這使得把檔案嵌入 golang 的二進制編譯更為容易,以至於方便我們部署一些並非 .go 的副檔名檔案。 這裡要介紹的是如何把 vue 作為前端,編譯至我們的 golang 專案內,起一個網頁服務。 在開始
Thumbnail
前言介紹 在 golang 1.16之後官方提供的工具包裡面有個 `embed` 可以使用,這使得把檔案嵌入 golang 的二進制編譯更為容易,以至於方便我們部署一些並非 .go 的副檔名檔案。 這裡要介紹的是如何把 vue 作為前端,編譯至我們的 golang 專案內,起一個網頁服務。 在開始
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
1. 安裝node.js 2. 建立專案: 接著會詢問一些初始化設定的東西,按照需求選擇即可: 3. 執行 打開http://localhost:3000/ 即可看到畫面。 pages Nuxt.js會自動配置pages中每一個.vue檔案的route。 假設在pages資料夾下新增一個如下內容的a
Thumbnail
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
Thumbnail
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
Create project 裝好 vue CLI 之後,只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉 1. Pick a preset 2. Select the features 3. Choose the version of vue 選擇 vue3
Thumbnail
Create project 裝好 vue CLI 之後,只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉 1. Pick a preset 2. Select the features 3. Choose the version of vue 選擇 vue3
Thumbnail
Vue CLI與React的create-react-app是類似的工具,目的都是為了讓開發者快速建置環境,節省複雜的安裝相關環境的時間,簡單的一個建立專案指令與設定,即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。 安裝Vue CLI: 選擇檢查程式碼的時機
Thumbnail
Vue CLI與React的create-react-app是類似的工具,目的都是為了讓開發者快速建置環境,節省複雜的安裝相關環境的時間,簡單的一個建立專案指令與設定,即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。 安裝Vue CLI: 選擇檢查程式碼的時機
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News