---
tags: 前端前台專案功能
---

# 【環境】專案設定 (vue、sass版)

> 版本: vue cli 3, vue cli 4
### 1 安裝 pug

yarn add -D pug pug-loader pug-filters pug-plain-loader
yarn add -D pug pug-plain-loader

---
### 2 安裝 sass

yarn add -D sass sass-loader node-sass

---
### 3 Coding Style 設定
#### ESLint
- .eslintrc.js

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    'plugin:vue/essential',
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    'standard'
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // custom
    'no-unused-vars': 1,
    'no-extend-native': 0,
    'prefer-promise-reject-errors': 0,
    'standard/no-callback-literal': 0,
    // vue
    'vue/order-in-components': ['error', {
      'order': [
        "el",
        "name",
        "parent",
        "functional",
        ["delimiters", "comments"],
        ["components", "directives", "filters"],
        "extends",
        "mixins",
        "inheritAttrs",
        "model",
        ["props", "propsData"],
        "data",
        "computed",
        "watch",
        "LIFECYCLE_HOOKS",
        "methods",
        ["template", "render"],
        "renderError"
      ]
    }]
  }
}

- .eslintignore

/build/
/config/
/dist/
/*.js

#### stylelint

yarn add -D stylelint stylelint-config-prettier stylelint-config-sass-guidelines stylelint-config-standard stylelint-order stylelint-scss pre-commit

> pre-commit 主要是應用於 git commit 的前處理。
- 設定規則 .stylelintrc.js

{
  "extends": "stylelint-config-standard",
  "plugins": [
    "stylelint-order",
    "stylelint-scss"
  ],
  "rules": {
    "number-leading-zero": "never",
    "at-rule-no-unknown": null,
    "order/properties-order": [
      "position",
      "top",
      "right",
      "bottom",
      "left",
      "z-index",
      "display",
      "align-items",
      "justify-content",
      "float",
      "clear",
      "overflow",
      "overflow-x",
      "overflow-y",
      "margin",
      "margin-top",
      "margin-right",
      "margin-bogttom",
      "margin-left",
      "padding",
      "padding-top",
      "padding-right",
      "padding-bottom",
      "padding-left",
      "width",
      "min-width",
      "max-width",
      "height",
      "min-height",
      "max-height",
      "font-size",
      "font-family",
      "font-weight",
      "text-align",
      "text-justify",
      "text-indent",
      "text-overflow",
      "text-decoration",
      "white-space",
      "color",
      "background",
      "background-position",
      "background-repeat",
      "background-size",
      "background-color",
      "background-clip",
      "border",
      "border-style",
      "border-width",
      "border-color",
      "border-top-style",
      "border-top-width",
      "border-top-color",
      "border-right-style",
      "border-right-width",
      "border-right-color",
      "border-bottom-style",
      "border-bottom-width",
      "border-bottom-color",
      "border-left-style",
      "border-left-width",
      "border-left-color",
      "border-radius",
      "opacity",
      "filter",
      "list-style",
      "outline",
      "visibility",
      "box-shadow",
      "text-shadow",
      "resize",
      "transition"
    ]
  }
}

- 新增指令
package.json

{
 "scripts": {
    "lint": "stylelint app/scss/**/*.scss --syntax scss",
    "lint:fix": "stylelint app/scss/**/*.scss --syntax scss --fix"
  },
  "pre-commit": [
    "lint"
  ],
}

- lint：語法為 stylelint [目錄] --syntax [語法種類]，也可以直接省略 --syntax 不寫，自動偵測檔案。
- 目錄其實可以根據您的環境進行修改，由於避免目錄很多層而漏掉，因此用了許多 /**/。
- lint:fix：這個指令與上一個沒有多大差別，但最重要的是多了 --fix，顧名思義就是可以自動修正錯誤（謹慎使用）。
- pre-commit：當我們進行 git commit 的時候，會先執行 lint 檢測，如果沒有通過，則會被阻擋下來拒絕提交。

---
### 4 vue.config.js設定
- vue.config.js [文件](https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE)

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      ...
    },
    host: process.env.HOST,
    port: process.env.PORT,
  },
}

---
### 5 serve安裝
- [deployment說明](https://cli.vuejs.org/guide/deployment.html#general-guidelines)

# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist

---
### 6 browserlist設定
[說定說明] (https://github.com/browserslist/browserslist)
以下方法都可達到
- package.json

{
  "private": true,
  "dependencies": {
    "autoprefixer": "^6.5.4"
  },
  "browserslist": {
    "production": [
      "> 1%",
      "ie 10"
    ],
    "modern": [
      "last 1 chrome version",
      "last 1 firefox version"
    ],
    "ssr": [
      "node 12"
    ]
  }
}

- Or in .browserslistrc config:

last 1 version
> 1%
IE 10 # sorry