Vue.js 環境建置 - Vue CLI
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
- 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。
我這邊是選N。
接著就會開始安裝相關套件了:
打開VSCode，直接從package.json點debug serve，在http://localhost:8080/即可看到畫面:
等同於直接下:
$ npm run serve
最後，建議裝一下VSCode套件Vetur，將vue語法highlight。
關閉ESLint檢查
在vue.config.js加入這行:
lintOnSave: false
重啟VSCode即可。
本筆記參考:
1. https://sdwh.dev/posts/2021/07/Vue-Cli-First-Projects/
2. https://book.vue.tw/CH3/3-1-vue-cli-introduction.html
3. https://ithelp.ithome.com.tw/articles/10222966
4. https://ithelp.ithome.com.tw/articles/10231505
5. https://www.gushiciku.cn/pl/gxjx/zh-tw
6. https://ithelp.ithome.com.tw/articles/10213178
1. https://sdwh.dev/posts/2021/07/Vue-Cli-First-Projects/
2. https://book.vue.tw/CH3/3-1-vue-cli-introduction.html
3. https://ithelp.ithome.com.tw/articles/10222966
4. https://ithelp.ithome.com.tw/articles/10231505
5. https://www.gushiciku.cn/pl/gxjx/zh-tw
6. https://ithelp.ithome.com.tw/articles/10213178
即將進入廣告，捲動後可繼續閱讀
為什麼會看到廣告
21會員
161內容數
留言0
查看全部
你可能也想看
Google News 追蹤
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
<template>
<div id="charge">
<el-card class="box-card">
<ul class="msg-box">
<li>
<h4>充值</h4>
</li>
<li>
<template>
<div id="queryAcc">
<!-- 由於Element-UI官方支援的ICON圖標比較少，這裡我們自訂一個貨幣圖標-->
<i class="el-icon-xxx"/><br/>
<div>
<span>金額</span>
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Introduction: In today's digital landscape, the demand for exceptional web development services continues to soar.
Vue.js 基本介紹
Vue.js 是個漸進式 JavaScript 框架 (Progressive JavaScript Framework)，用於建立用戶界面。被設計成逐步增強的框架，可輕鬆整合到現有項目中，或從頭構建新的應用程序。
Vue.js 的特點
1. 輕量級：Vue.js 的核心庫非
最近在把 Tailwind CSS 加入我的技能樹中，其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具
但是我其實對美工比較沒那麼大的興趣，我對功能、效能、安全比較感興趣，所以後端、架站、DevOps、一些安全防護玩了一圈，現在來加強我的排版功力
在寫頁面之前，先來介紹 Vue 頁面結構。
首先先在 src/components 底下建立一個 home.vue
跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。
template
就是相當於原生 html 檔
專案建好了，那先來講 Vue 的專案架構
詳細內容很多，所以我挑重點講
public
index.html
public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
前言
Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。
javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一
State management
首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts
Login
所有頁面每隔一段時間自動刷新 token
Logout
*合作聲明與警語：
本文係由國泰世華銀行邀稿。
證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務，定期定額(股)服務由國泰綜合證券提供。
剛出社會的時候，很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天，都會聽到各種市場動態、理財話題，像是：聯準會降息或是近期哪些科
<template>
<div id="charge">
<el-card class="box-card">
<ul class="msg-box">
<li>
<h4>充值</h4>
</li>
<li>
<template>
<div id="queryAcc">
<!-- 由於Element-UI官方支援的ICON圖標比較少，這裡我們自訂一個貨幣圖標-->
<i class="el-icon-xxx"/><br/>
<div>
<span>金額</span>
Vue.js是一種基於MVVM的前端JavaScript框架，類似的框架有React、Angular等。
架設環境
安裝Visual Studio Code(https://code.visualstudio.com/)
安裝Node.js(https://nodejs.org/en/
Introduction: In today's digital landscape, the demand for exceptional web development services continues to soar.
Vue.js 基本介紹
Vue.js 是個漸進式 JavaScript 框架 (Progressive JavaScript Framework)，用於建立用戶界面。被設計成逐步增強的框架，可輕鬆整合到現有項目中，或從頭構建新的應用程序。
Vue.js 的特點
1. 輕量級：Vue.js 的核心庫非
最近在把 Tailwind CSS 加入我的技能樹中，其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具
但是我其實對美工比較沒那麼大的興趣，我對功能、效能、安全比較感興趣，所以後端、架站、DevOps、一些安全防護玩了一圈，現在來加強我的排版功力
在寫頁面之前，先來介紹 Vue 頁面結構。
首先先在 src/components 底下建立一個 home.vue
跟寫一個 html 頁面很像，一樣是分成 寫網頁內容、script、style，三個部分，只是 html 標籤換成了 template。
template
就是相當於原生 html 檔
專案建好了，那先來講 Vue 的專案架構
詳細內容很多，所以我挑重點講
public
index.html
public/index.html 是 Vue 頁面的 entry point，進入一個 Vue 頁面會先進 public/index.html，再套用 App.vue，最後才是進入你寫的 .
前言
Vue 在過去的一兩年內快速發展，寫法也一直改變，我在過去一年多也更改了兩次寫法，在這個系列中我將以最新的 composition api + typescript 寫法進行教學。
javascript 有兩大痛點，一個是異步問題，另一個是弱型別。要渲染畫面一定要多線程同時異步處理，不然真的一
State management
首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management，檔案位置在 src/store/index.ts
Login
所有頁面每隔一段時間自動刷新 token
Logout