用Vue & Firebase 實作簡易購物網站02.下載Vue.js及建立專案

※成品連結：vue-shop-3b5cc.web.app

02.下載Vue.js及建立專案

一、下載node.js套件管理工具

於官網https://nodejs.org/en/download/下載，安裝成功後開啟命令提示字元，查看安裝的版本，若有出現安裝版本表示安裝成功：

node -v
npm -v

二、安裝Vue CLI

(一)以 -g 全域方式安裝：

npm install -g @vue/cli

(二)查看安裝的版本，若有出現安裝版本表示安裝成功：

vue --version

三、建立 Vue.js 專案

(一)建立專案指令

cd <專案位置 ex:desktop>
vue create <專案名稱 ex:vue_shop>

(二)建立相關設定

1.選擇專案的環境配置：Manually(手動選擇)

? Please pick a preset:
 default(babel, eslint)
❯ Manually select features

2.選擇要安裝的功能：Babel 、Router、CSS Pre-processors、Linter / Formatter(按space選取)

? Check the features needed for your project:
( * ) Babel
(   ) TypeScript
(   ) Progressive Web App (PWA) Support
( * ) Router
( * ) Vuex
( * ) CSS Pre-processors
❯( * )  Linter / Formatter
(   )  Unit Testing
(   )  E2E Testing

選取完要安裝的功能後，部分的功能會於接下來詢問設定的細節。

3.Vue Router是否要使用history模式：是

? Use history mode for router?(Y/n) Y

※這部分可以參考官方說明:

HTML5 History 模式 | Vue Router

4.選擇CSS預處理器：Sass/SCSS

? Pick a CSS pre-processor :
❯ Sass/SCSS (with dart-sass)
 Sass/SCSS (with node-sass)
 Less
 Stylus

5.選擇規範類型：Prettier

? Pick a linter / formatter config:
 ESLint with error prevention only
 ESLint + Airbnb config
 ESLint + Standard config
❯ ESLint + Prettier

※ESLint為檢測程式碼的輔助工具，專案建立時會預設安裝ESLint，但有時檢查過於嚴苛造成專案無法運行，若要ESLint關閉可以在專案根目錄建立vue.config.js檔，內容加上：

6.選擇檢查程式碼的時機：Lint on save(存檔時檢查)

? Pick additional lint features:
❯( * )  Lint on save //存檔時檢查
(   )  Lint and fix on commit //提交時檢查

7.選擇Babel, PostCSS, ESLint 等設定檔的存放位置:In dedicated config files(獨立存檔)

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
❯ In dedicated config files //獨立存檔
 In package.json //寫在package.json

8.是否將以上設定存成 default：否

? Save this as a preset for future projects? (y/N) N

(三)建立成功畫面

(四)運行專案

cd <專案名稱 ex:vue_shop>
npm run serve

(五)開啟瀏覽器

連上後出現以下畫面就表示運行成功囉！

返回文章列表➯