# ■環境建置(按步驟): 1. 安裝NVM:管理node版本的工具 2. 安裝Node:建議使用NVM來安裝Node 3. 有node就能使用NPM:套件管理工具(npm 全名是node package manager) * 安裝環境的參考教學: https://www.casper.tw/development/2022/01/10/install-nvm/ * 查找各項套件的NPM服務平台: https://www.npmjs.com/ # ■建立專案: ## (一) 使用 vite 建立專案,安裝指令:(以下my-vue-app指的是專案名稱) ### 如果npm版本是 npm 6.x ``` $ npm init vite@latest my-vue-app --template vue ``` ### 如果npm版本是 npm 7+, extra double-dash is needed ``` $ npm init vite@latest my-vue-app -- --template vue ``` ## (二) 建立專案成功後,在[專案資料夾]路徑下,安裝需要使用的套件,指令: ### 路由管理工具 ``` $ npm i vue-router ``` ### Ajax工具 ``` $ npm i axios ``` ### 狀態管理(依需求安裝) ``` $ npm i pinia ``` ### 其他好用套件 * unplugin-auto-import * unplugin-vue-components * unplugin-icons * 參考教學: https://ithelp.ithome.com.tw/articles/10279017 # ■讓專案跑起來(在專案資料夾路徑下,依序): 1. 安裝node_modules ``` $ npm i ``` 2. 啟動專案 ``` $ npm run dev ``` # ■專案部署時: ### 打包專案 ``` $ npm run build ``` ### 預覽打包的結果 ``` $ npm run preview ``` # ■官方網站 * VUE https://vuejs.org/ * VITE(可以查vite.config.js怎麼寫) https://vitejs.dev/ * PINIA https://pinia.vuejs.org/ * Axios https://axios-http.com/ * vue-router https://router.vuejs.org/ # ■Youtube教學頻道 * Mike老師 https://www.youtube.com/@MikeCheng * Alex老師 https://www.youtube.com/@AlexOtakuWhat # ■教學網站 * 重新認識 Vue.js——008 天絕對看不完的 Vue.js 3.0 指南 by Kuro Hsu https://book.vue.tw/ * vue.js菜鳥教程 https://www.runoob.com/vue3/vue3-tutorial.html # ■VUE的線上編輯器 * https://sfc.vuejs.org/ * https://codesandbox.io/ # ■如果你想嘗試部署自己做好的靜態網站,可以試試放這裡: https://vercel.com/
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up