iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

我的Vue學習筆記系列 第 14

Day14-Vue CLI 介紹

他是Vue.js官方提供的開發工具,可以快速的建置架構,常用於製作單頁應用(SPA)網站。

安裝

  1. 安裝Node.js(官網https://nodejs.org/zh-tw/download/),終端機輸入node -v,有出現版本數字就代表安裝成功
  2. 安裝Vue CLI,在終端機輸入 npm install -g @vue/cli,完成後輸入vue -V就會出現@vue/cli 4.5.13,安裝就完成啦!!

建立專案

  1. 終端機輸入vue create [專案名稱]
  2. 進入初始設定的畫面,選擇手動設定Manually select features
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys)     
> no1 ([Vue 3] dart-sass, babel, typescript) 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint)    
  Manually select features
  1. 如果要使用Vue 3.x版本的話就一定要勾選Choose Vue version,其他的就依照使用習慣勾選
Vue CLI v4.5.13
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
  1. 選擇存放的地方,一般都是放package.json,也可以自行選擇要存放的位置dedicated config files
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
  1. 安裝完成後會出現Successfully created project
  2. 在終端機下cd [專案名稱]指令與npm run serve啟動專案
App running at: 
- Local: http://localhost:8080/ 
  1. 進入http://localhost:8080/ 看到下面的畫面代表專案建置成功!!!!

Untitled


上一篇
Day13-元件漸變語動畫
下一篇
Day15-Vue SFC 單一元件檔
系列文
我的Vue學習筆記30

尚未有邦友留言

立即登入留言