---
tags: 專案
---
# [開新專案] 專案建置 vue3
以`gura`為例
- vue3
- twind

#### 1. [專案ENV配置](http://hackmd.cqcp.corp/s/rywkEc8yd)

yarn add -D yargs btoa chalk atob

- scripts安裝
- scripts/env
- package.json

"env": "node scripts/env/index.js"

#### 2. 安裝submodule
[submodule筆記](https://blog.puckwang.com/post/2020/git-submodule-vs-subtree/)

git submodule add <repo url> <folder>

- 範例

git submodule add https://gitlab.com/xxxx/common-logic submodules/common-logic    

- .gitmodules

[submodule "submodules/common-logic"]
	path = submodules/common-logic
	url = ../../common-logic
	branch = develop

- 設定錯誤時：git submodule修改

.git/config

- 其他人 Clone SuperRepo

clone時，加上 `--recurse-submodules`，把submodules一起clone下來

git clone <repo url> --recurse-submodules

或是

git submodule update --init

#### 3. 設定vue.config.js
#### 4. 安裝 共用邏輯 所需套件

如

yarn add axios dayjs

#### 5. 設定vs code .editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

#### 6. 新增 `.eslintrc.js` 移除package.json的`eslintConfig`

#### 7. lint-staged

yarn add -D lint-staged

  "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }

#### 8. 設定jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "~/*": ["./src/assets/*"],
      "@cologic/*": ["./submodules/common-logic/*"]
    }
  }
}

----
- editorconfig: 統一格式插件
- lint-staged: 僅過濾出 Git 程式碼暫存區檔案(被 git add 的檔案)的工具，對團隊專案和開源專案來說，是一個很好的工具，它是對個人要提交的程式碼的一個規範和約束。

#### [jsconfig.json說明](https://laravel-news.com/jsconfigjs-vscode)
- alias的auto complete
- 設定完需要重開專案