[Vue CLI] NPM安裝及專案初始化
TL;DR
Vue CLI 安裝及開啟一個專案
參考資料
相關連結
- Vue CLI(zh) | Official
安裝Vue CLI
在terminal下使用指令安裝Vue CLI在全域上，就可以在每個專案中使用Vue CLI指令：
npm install -g @vue/cli
創建一個專案
使用指令進入創建專案階段
創建專案時使用指令：
vue create [projectName]
權限問題
如果使用mac os則建議在前面加上sudo開啟最高權限
否則在創建專案時可能會遇到權限問題
自動/手動創建
在輸入完vue create [projectName]後，會進到下一步驟：
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
❯ Manually select features
選擇依賴
接著選擇要安 裝的依賴套件
Vue CLI v5.0.8
? 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, and <enter> to proceed)
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◯ Vuex
◉ CSS Pre-processors
❯◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
選擇套件說明：
Babel：協助編譯出各瀏覽器可執行版本。Router：後續章節介紹，Vue官方提供的路由。CSS Pre-processors：CSS預處理器Linter：維持程式碼品質工具，讓程式碼具有一致的撰寫風格。
選擇Vue版本
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors,
Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow
keys)
❯ 3.x
2.x
Router歷史模式選擇
這裡很重要！！！一定要選擇n，否則會需要在架設的伺服器上做額外設定！
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, CSS Pre-processors,
Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n) n
選擇Sass
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default):
❯ Sass/SCSS (with dart-sass)
Less
Stylus
選擇ESLint風格
? Pick a linter / formatter config:
ESLint with error prevention only
❯ ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
差異說明：
Airbnb：最嚴格，對ES6掌握度不高的話建議先選擇standardStandard：次之，一開始可以先選擇Standard
Lint時機
? Pick additional lint features: (Press <space> to select, <a> to toggle all,
<i> to invert selection, and <enter> to proceed)
❯◉ Lint on save
◯ Lint and fix on commit
設定儲存位置
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
❯ In package.json
儲存位置
這邊依照需求選擇，個人比較喜歡都儲存在package.json中。
是否儲存本次設定
? Save this as a preset for future projects? (y/N) y
儲存
如果選擇儲存，則會將本次設定給命名
並且會在下一次使用vue create [projectName]的時候顯示該選項
創建完成
Vue CLI v5.0.8
✨ Creating project in /Users/.../vueclitest3.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
added 867 packages, and audited 868 packages in 3s
97 packages are looking for funding
run `npm fund` for details
4 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
🚀 Invoking generators...
📦 Installing additional dependencies...
added 184 packages, and audited 1052 packages in 18s
157 packages are looking for funding
run `npm fund` for details
4 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project vueclitest3.
👉 Get started with the following commands:
$ cd vueclitest3
$ npm run serve
接著可以進到專案資料夾中使用npm run serve開啟vue專案。
GUI
也可以透過以下指令開啟GUI介面：
vue ui