Vue.js 環境建置 - Vue CLI

更新於 發佈於 閱讀時間約 3 分鐘
Vue CLI與React的create-react-app是類似的工具,目的都是為了讓開發者快速建置環境,節省複雜的安裝相關環境的時間,簡單的一個建立專案指令與設定,即建立一個內建了Hot-Reload, webpack, ESLint等功能的專案。
  • 需先確認OS有安裝node.js,以下提供我的node與npm版本:
  • 安裝Vue CLI:
$ npm install -g @vue/cli
  • 使用Vue CLI建立專案:
$ vue create ${project_name}

Please pick a preset

選擇相關套件配置,這邊選擇手動選擇:

Check the features needed for your project

這邊我是多選擇了Router,視需求自行增減即可:

Choose a version of Vue.js that you want to start the project with

接著,選擇Vue.js版本,這邊我選擇3.x:

Use history mode for router?

這邊是要設定路由,y 表示選擇用HTML5的history API(history.pushState)來管理路由,URL可能會是這種:
- https://example.com/home
- https://example.com/about
若選擇n,則是會用URL+hash(#)的方式,一般會建議用history的方式,因為對SEO較友善。

Pick a linter / formatter config:

這邊選擇ESLint + Prettier
  • ESLint 是檢查 Coding Style 的工具,Prettier 是程式碼格式化工具,VSCode 預設可使用 Alt + Shift + F 格式化程式碼。

Pick additional lint features

選擇檢查程式碼的時機
存檔時檢查與commit時檢查,這邊選擇存檔時檢查。

Where do you prefer placing config for Babel, ESLint, etc.?

相關設定的套件要放在哪
可以選擇將設定檔都放package.json統一管理,或者設定檔各自獨立。

Save this as a preset for future projects?

是否保存這些配置,未來其他專案可以直接套用。
我這邊是選N。
接著就會開始安裝相關套件了:
打開VSCode,直接從package.json點debug serve,在http://localhost:8080/即可看到畫面:
等同於直接下:
$ npm run serve

最後,建議裝一下VSCode套件Vetur,將vue語法highlight。

關閉ESLint檢查
在vue.config.js加入這行:
lintOnSave: false
重啟VSCode即可。
為什麼會看到廣告
avatar-img
21會員
161內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Vic Lin的沙龍 的其他內容
假設資料如下: local DB裡面的test Collection SELECT SELECT可以這樣寫: 由於config/database.php中設定的default DB_CONNECTION是mysql,所以這邊特別指定使用mongodb connection。 回傳結果如下: 軟刪除
欲在Laravel中使用MongoDB,首先要確認有安裝MongoDB PHP driver,接著再安裝Laravel MongoDB套件,才能開始使用CRUD。 1. 安裝MongoDB PHP driver (1) 到這邊下載MongoDB PHP driver (3) 檢查是否正常 後記:
MongoDB 簡介 MongoDB是一種開源的NoSQL文件資料庫(Document Database),MongoDB中可以有多個Database,每個Database中可以有多個Collection,每個Collection中可以有多個Document。 Windows 安裝 MongoDB
在Laravel中想達到websocket效果,由後端主動傳訊給前端,需使用broadcasting 將event廣播出去,由前端來接收訊息。 因此在業界常看到使用Redis + socket.io的架構,也是本篇選擇的機制。 從伺服器廣播訊息到前端接收的流程,大概會是這樣: 安裝與設定Redis
比如訂單出貨的時候,觸發一個訂單出貨事件,發送出貨email通知給user。 需先註冊event與listener,在EventServiceProvider的$listen中定義: 產生event與listener: 下指令可以方便產生事件與監聽器檔案: 產生的事件與監聽器如下: 事件訂閱者
假設有一張表,儲存一個iPhone商品跟剩餘庫存量。 如果商品庫存剩1個,明明是A先買到,這時候就已經沒庫存了,可是系統卻告訴B恭喜你搶到了,這種情況就更糟糕了,只剩下一支iPhone,卻跟兩個人(甚至更多人)都說有買到,也就是發生所謂的超賣問題。 悲觀鎖 Pessimistic Lock
假設資料如下: local DB裡面的test Collection SELECT SELECT可以這樣寫: 由於config/database.php中設定的default DB_CONNECTION是mysql,所以這邊特別指定使用mongodb connection。 回傳結果如下: 軟刪除
欲在Laravel中使用MongoDB,首先要確認有安裝MongoDB PHP driver,接著再安裝Laravel MongoDB套件,才能開始使用CRUD。 1. 安裝MongoDB PHP driver (1) 到這邊下載MongoDB PHP driver (3) 檢查是否正常 後記:
MongoDB 簡介 MongoDB是一種開源的NoSQL文件資料庫(Document Database),MongoDB中可以有多個Database,每個Database中可以有多個Collection,每個Collection中可以有多個Document。 Windows 安裝 MongoDB
在Laravel中想達到websocket效果,由後端主動傳訊給前端,需使用broadcasting 將event廣播出去,由前端來接收訊息。 因此在業界常看到使用Redis + socket.io的架構,也是本篇選擇的機制。 從伺服器廣播訊息到前端接收的流程,大概會是這樣: 安裝與設定Redis
比如訂單出貨的時候,觸發一個訂單出貨事件,發送出貨email通知給user。 需先註冊event與listener,在EventServiceProvider的$listen中定義: 產生event與listener: 下指令可以方便產生事件與監聽器檔案: 產生的事件與監聽器如下: 事件訂閱者
假設有一張表,儲存一個iPhone商品跟剩餘庫存量。 如果商品庫存剩1個,明明是A先買到,這時候就已經沒庫存了,可是系統卻告訴B恭喜你搶到了,這種情況就更糟糕了,只剩下一支iPhone,卻跟兩個人(甚至更多人)都說有買到,也就是發生所謂的超賣問題。 悲觀鎖 Pessimistic Lock
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來,接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json,就可以開始你的設定拉(主要是依照個人的喜好設定
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
Vite 是由 Vue 開發者 Evan You 所開發出來,用來加快、優化程式碼打包的工具,在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具:Webpack。 在那之前,我們先來聊聊為什麼前端會需要所謂的打包工具呢?
Thumbnail
在Vue中,v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法,並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
Thumbnail
指令(Directives)是 Vue 中一個重要的概念,它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令:v-if 和 v-show,並通過實際範例來解釋它們的不同之處和使用場景。
Thumbnail
Vue 是尤雨溪所開發的一個前端框架,Vue 提供了響應式數據綁定和組件化的開發模式,能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具,用途是提供更快的開發體驗。然後,本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境,這是你學習 Vue 的第一步。
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
如何在 Vite 專案中安裝和設置 TypeScript 及路徑別名的步驟,包括安裝必要的依賴、配置 vite.config.js、tsconfig.json 的設置,及如何創建類型聲明文件來正確識別 .vue 文件。
Thumbnail
一開始你先把你的專案push上去後,修改vite.config.ts ,要在裡面新增  base: "/Cart/" (/放自己的專案名稱/) build: {outDir: "docs"}, 接下來你要去你的github setting 裡面 -> Page ->選Deploy fro
首先要安裝vscode : Visual Studio Code - Code Editing. Redefined 安裝後我們就可以把她打開來,接著去檔案 -> 喜好設定 -> 設定檔(預設) -> 你就會看到設定裡面的 settings.json,就可以開始你的設定拉(主要是依照個人的喜好設定
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
Vue Router 及 具名視圖,擺脫以往切換依賴 CSS display:none 跟 display:block 互相配合,有時還得搭配 z-index 來調整層級跟 opacity 透明度的麻煩,而 Vue Router 完美的解決了這棘手的問題,且能客製頁面想要呈現的擺飾。
Thumbnail
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
Vite 是由 Vue 開發者 Evan You 所開發出來,用來加快、優化程式碼打包的工具,在這裡我們不免會需要提到大部分前端開發者可能都會聽過、使用過的前端工具:Webpack。 在那之前,我們先來聊聊為什麼前端會需要所謂的打包工具呢?
Thumbnail
在Vue中,v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法,並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
Thumbnail
指令(Directives)是 Vue 中一個重要的概念,它們提供了一種簡單的方式來操作 DOM 元素。本文將介紹 Vue 的兩個常用指令:v-if 和 v-show,並通過實際範例來解釋它們的不同之處和使用場景。
Thumbnail
Vue 是尤雨溪所開發的一個前端框架,Vue 提供了響應式數據綁定和組件化的開發模式,能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具,用途是提供更快的開發體驗。然後,本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境,這是你學習 Vue 的第一步。