用Vue & Firebase 實作簡易購物網站02.下載Vue.js及建立專案
※成品連結:vue-shop-3b5cc.web.app
02.下載Vue.js及建立專案
一、下載node.js套件管理工具
於官網https://nodejs.org/en/download/下載,安裝成功後開啟命令提示字元,查看安裝的版本,若有出現安裝版本表示安裝成功:
node -vnpm -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
※這部分可以參考官方說明:
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
(五)開啟瀏覽器
連上後出現以下畫面就表示運行成功囉!