跳到主要內容

Vue 3 初探



[Prerequisites]


Download Node.js

https://nodejs.org/en/download/package-manager


npm 全名是 node package manager



[Vite 建置VUE 專案]

命令列選項直接指定項目名稱和你想要使用的範本。例如，要建置一個 Vite + Vue 項目

%npm create vite@latest

%npm create vite@latest my-vue-app -- --template vue



Vite 為建置工具 

相對之前Vue Cli 建置工具, Vue 團隊開發 Vite 的目的, 主要就是為了解決「伺服器啟動慢」和「更新速度慢」


%npm create vite@latest





安裝所需套件

%npm install 

下載 package(套件)本身，以及其他的dependency 套件



可以查看 設定檔 package.josn，有列出專案依賴的套件




如需要安裝其他套件(列出常用幾個說明)

Vue Router：是由前端所模擬的網頁路由技術，可以讓使用者透過網址，決定要顯示的頁面

axios：套件來處理AJAX，作為HTTP請求工具

Pinia：是 Vue 的專屬狀態（數據）管理庫，它允許你跨元件或頁面共享狀態

vue3-easy-data-table：方便建立資料表，且支援基本的排序、分頁與選取功能

參考網址:

https://v3.router.vuejs.org/

https://axios-http.com/docs/intro

https://pinia.vuejs.org/zh/

https://hc200ok.github.io/vue3-easy-data-table-doc/features/footer-customization.htmlVue 


%npm install 套件名稱

安裝 vite 命令列工具

%npm install -D vite

%npm install axios

%npm install vue3-easy-data-table




啟動 專案

% npm run dev




瀏覽器

http://localhost:5173/





相關設定檔

Vite 專案的根目錄 設定檔

vite.config.js




npm scripts 中使用 vite 可執行文件，或直接使用 npx vite 來執行它

指定port 8070

--base demo

{

 "scripts": {

 "dev": "vite --base demo --port 8070", // 啟動開發伺服器，別名：`vite dev`，`vite serve`

 "build": "vite build", // 為生產環境建構產物

 "preview": "vite preview" // 本地預覽生產建構產物

 }

}

例如: npm run dev

參考package.json




專案的入口

index.html 是該 Vite 專案的入口文件

Vite 解析 <script type="module" src="..."> ​​，這個標籤指向你的 JavaScript 原始碼

Vite 也會在專案的根目錄中尋找 它的設定檔（vite.config.js）



ts -> TypeScript（主要用途是為 JavaScript 提供靜態類型檢查）







chrome開發套件 Vue.js devtool 可進行除錯



參考網址: https://devtools.vuejs.org/



Single-File Component (also known as *.vue files, abbreviated as SFC


Vue 3  分成 Option API 和 Composition API (產品使用)這兩種寫法


避免誤入 Vue 2.x 寫法,  網路上可以看到有些文件在介紹Vue 3作者有以下寫法 

export default {

  data() {

    return {...}

  },

  computed: {

    //...

  },

  methods: {

    /...

  },

  watch: {

    //...

  }

}

標籤：

留言

張貼留言

這個網誌中的熱門文章

初探 Vue 呼叫 API 出現 CORS 跨來源資源共享 問題原因

提要:   在 {初探Vue 與 Spring boot 的對話} 專案 ，前端 Vue 應用程式 串接 後端 API 伺服器 ，axios 呼叫 API 時出現以下，”無法取得回應內容 (No 'Access-Control-Allow-Origin' header is present on the requested resource)：” 錯誤訊息，根據查找相關資料 ，出現以下原因。 瀏覽器開發工具 錯誤訊息 畫面 錯誤原因: “ Access to XMLHttpRequest at ” from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource” 瀏覽器為了安全考量，實施了同源政策。 當您的前端應用程式 (http://localhost:8080) 嘗試呼叫一個不同來源 (不同協議、不同域名或不同埠號) 的 API 伺服器 (http://localhost:8088) 時，瀏覽器會主動阻止這個請求，除非伺服器明確地允許這個跨來源的存取。 同源政策限制(Same-Origin Policy): 同源政策限制了程式碼和不同網域資源間的互動，同源是指兩份網頁具備相同協定、埠號（如果有指定）以及主機位置 範例: 表列哪些 URL 與 URL http://www.example.com/api/p1 屬於同源： URL                                                   | 結果   | 原因 --------------------------------------------------------------------- http://www.example.com/api/p2     |...
張貼留言
閱讀完整內容

初探 Vue 與 Spring boot 的對話之Frontend (Vue-Frontend)

  Front-end Vue 使用 REST API 建立 Vite 專案 可參考 { Vue 3 初探}  文章 danny@Danny-Yu projects % npm create vite@latest Need to install the following packages: create-vite@8.2.0 Ok to proceed? (y) y > npx > "create-vite" │ ◇   Project name: │   vue-frontend │ ◇   Select a framework: │   Vue │ ◇   Select a variant: │   TypeScript │ ◇   Use rolldown-vite (Experimental)?: │   No │ ◇   Install with npm and start now? │   Yes │ ◇   Scaffolding project in /Users/danny/Desktop/projects/vue-frontend... │ ◇   Installing dependencies with npm... added 47 packages, and audited 48 packages in 27s 6 packages are looking for funding   run `npm fund` for details found 0 vulnerabilities │ ◇   Starting dev server... > vue-frontend@0.0.0 dev > vite   VITE v7.2.4   ready in 411 ms   ➜   Local:   http://localhost:5173/   ➜   Network: use --host to expose   ➜   press h + enter to show...
張貼留言
閱讀完整內容

初探 Spring 中的循環依賴

原因: 當兩個或多個 bean 直接或間接地相互依賴時, 就會出現 Circular Dependency (循環依賴) 如: Bean A -> Bean B -> Bean A import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component public class BeanA {          @Autowired     private BeanB beanB;     public String sayHi() {         return "Hi! 我是 Class A.";     } } import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; @Component public class BeanB {          @Autowired     private BeanA beanA;     public String sayHi() {         return "Hi! 我是 Class B.";     } } 編譯時不會出現問題 danny@Danny-Yu demo % mvn clean install -Dmaven.test.skip=true                           ... ... [INFO] Installing /Users/danny/Desktop/projects/demo/target/dem...
張貼留言
閱讀完整內容