Vue.js 入門
Vue-cli 環境安裝:
- 安裝Node.js (直接到官網下載安裝)
- 安裝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
- 快捷鍵Ctrl+Shift+P，Mac 為Cmd+Shift+P，叫出 Package Control
- 輸入Install，選擇Package Control: Install Package
- 輸入Vue Syntax Highlight並安裝，完成後選擇View -> Syntax -> Vue Component
整理樣板 -HTML-CSS-JS Prettify
- 快捷鍵Ctrl+Shift+P，Mac 為Cmd+Shift+P，叫出 Package Control
- 輸入Install，選擇Package Control: Install Package
- 輸入 prettify 並選擇 HTML-CSS-JS Pretiffy
- 這樣就可以整理 .vue 程式碼了
程式碼:
如下圖，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.
使用third party library bootstrap:
1. 使用npm指令安裝:
npm install jquery --save
npm install bootstrap --save
npm install popper.js --save
2. 下完指令後，在node_modules可以看到安裝好的套件。
3. 設定 webpack.base.conf.js
在build資料夾下:
在最上方引入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 語法測試後的畫面:
修改後程式碼如下，在main.js import bootsrtap意思是全域載入 bootstrap，當然也可以需要的component再import就好:
完整source code在這:
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/
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
在Vue中，v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法，並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟，包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置，及如何創建類型聲明文件來正確識別 .vue 文件。
一開始你先把你的專案push上去後，修改vite.config.ts ，要在裡面新增
base: "/Cart/" (/放自己的專案名稱/)
build: {outDir: "docs"},
接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令，而這次我們可以依這自己的需求來建立。
此功能屬於較進階的功能，因此實戰中會比較少見，市面上還是有不少完善的套件能達到同樣效果，建議可以先往這方面察找
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
Vite 是由 Vue 開發者 Evan You 所開發出來，用來加快、優化程式碼打包的工具，在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具：Webpack。
在那之前，我們先來聊聊為什麼前端會需要所謂的打包工具呢？
在Vue中，v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法，並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
指令(Directives)是 Vue 中一個重要的概念，它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令：v-if 和 v-show，並通過實際範例來解釋它們的不同之處和使用場景。
Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。