# [Vue] 專案創建步驟

###### tags: `Vue.js` `Vue CLI`

## 環境
* Vue CLI 版本：@vue/cli 4.5.9

## 終端機
* vue create **project-name**
* Please pick a preset:
* Manually select features
* Check the features needed for your project:
* **Choose Vue version, Babel**
* TypeScript
* Progressive Web App (PWA) Support
* **Router**
* **Vuex**
* **CSS Pre-processors**
* **Linter / Formatter**
* Unit Testing
* E2E Testing
* Choose a version of Vue.js that you want to start the project with:
* 2.x
* **3.x (Preview)**
* Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
* No
* Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
* **Sass/SCSS (with dart-sass)**
* [Sass/SCSS (with node-sass)](https://github.com/sass/node-sass/issues/2952 "Mark Node Sass as deprecated")
* Less
* Stylus
* Pick a linter / formatter config:
* ESLint with error prevention only
* **ESLint + Airbnb config**
* ESLint + Standard config
* ESLint + Prettier
* Pick additional lint features:
* **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
* Save this as a preset for future projects?
* No

## 圖形化介面
* 開啟終端機，輸入 `vue ui`

## package.json - dependencies
* [axios](https://github.com/axios/axios#installing "axios - GitHub")：Promise based HTTP client for the browser and node.js
`npm install axios`
* [Font Awesome](https://github.com/FortAwesome/vue-fontawesome#installation "vue-fontawesome - GitHub")：Font Awesome 5 Vue component using SVG with JS

  npm i --save @fortawesome/fontawesome-svg-core
  npm i --save @fortawesome/free-solid-svg-icons
  npm i --save @fortawesome/free-brands-svg-icons
  npm i --save @fortawesome/free-regular-svg-icons
  
  // Using Vue 2.x
  npm i --save @fortawesome/vue-fontawesome@latest
  
  // Using Vue 3.x
  npm i --save @fortawesome/vue-fontawesome@prerelease

## package.json - devDependencies
* pug、[pug-plain-loader](https://github.com/yyx990803/pug-plain-loader "pug-plain-loader - GitHub")：webpack loader that transforms pug templates to plain HTML
`npm install -D pug-plain-loader pug`

## 參考資料
* [Vue CLI CSS pre-processor option: dart-sass VS node-sass?](https://stackoverflow.com/questions/56150402/vue-cli-css-pre-processor-option-dart-sass-vs-node-sass "Vue CLI CSS pre-processor option: dart-sass VS node-sass?")

---

:::info
建立日期：2020-12-28
更新日期：2021-03-05
:::