# 項目目錄
```
node_modules
public
|-favicon.ico
|-index.html
src
|-assets
|-App.vue
|-main.js
.browserslistrc
.eslintrc.js
.gitignore
babel.config.js
package-lock.json
package.json
postcss.config.js
README.md
vue.config.js
.editorconfig
```
# IDE編輯器配置文件
>[danger] 注意 自行添加一個IDE配置文件`.editorconfig`，這個文件對不同的IDE編輯器可以做到代碼風格統一
配置信息如下
```
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
```
> root=true 對所有文件生效
> end\_of\_line= lf 不同操作系統換行符不同
> insert\_final\_newline = true 代碼最后新增一行
> trim\_trailing\_whitespace = true 修剪尾隨空格
```
Unix每行結尾為"\n",
Windows系統每行結尾是“\r\n”，
Mac OS在 OS X以前每行結尾是"\r"， 現在每行結尾是 "\n".
```
| 中文名 | 英文名 | 英文縮寫 | 英文解釋 | C語言中表示 | ASCII碼 |
| --- | --- | --- | --- | --- | --- |
| 回車 | carriage return | CR | return | \\n | 0x0a |
| 換行 | line feed | LF | new line | \\r | 0x0d |
參考文檔：[https://editorconfig.org/](https://editorconfig.org/)
# ESLint代碼風格檢測
[ESLint](https://link.juejin.im/?target=https%3A%2F%2Feslint.org%2F)是一款開源的 JavaScript[lint](https://link.juejin.im/?target=https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2FLint)工具，由 Nicholas C. Zakas 于2013 年創建。
借助 ESLint，可將 **靜態代碼分析** 和 **問題代碼協助修復** 集成到 **編碼**、**提交** 和 **打包** 過程中，及早發現并協助修復代碼中：
* 有語法錯誤的部分
* 不符合約定的樣式準則的部分
* 不符合約定的最佳實踐的部分
在項目開發中獲得如下收益：
* 在執行代碼之前發現并修復語法錯誤，減少調試耗時和潛在 bug
* 保證項目的編碼風格統一，提高可維護性
* 督促團隊成員在編碼時遵守約定的最佳實踐，提高代碼質量
參考資料：[https://cn.eslint.org/docs/user-guide/getting-started](https://cn.eslint.org/docs/user-guide/getting-started)
# vue.config.js
有些針對 @vue/cli 的全局配置，例如你慣用的包管理器和你本地保存的 preset，都保存在 home 目錄下一個名叫 .vuerc 的 JSON 文件。你可以用編輯器直接編輯這個文件來更改已保存的選項。
你也可以使用 vue config 命令來審查或修改全局的 CLI 配置。
## webpack中添加別名
```
module.exports = {
lintOnSave: false
}
const path = require('path')
function resolve(dir) {
return path.join(__dirname,dir)
}
module.exports = {
//1.基礎的配置方式
configureWebpack:{
resolve:{
alias:{
'components':'@/components',
'pages':'@/pages'
}
}
},
//2.利用webpack4的webpack-chain來配置
chainWebpack:(config)=>{
config.resolve.alias
.set('@',resolve('src'))
.set('components',resolve('src/components'))
}
}
```
參考資料：[https://cli.vuejs.org/zh/guide/webpack.html](https://cli.vuejs.org/zh/guide/webpack.html)
# 樣式轉換配置
## postcss.config.js
```
module.exports = {
plugins: {
autoprefixer: {}
}
}
```
添加插件`autoprefixer`可以對一些css3新增樣式增加前綴。
參考資料：[https://www.postcss.com.cn/](https://www.postcss.com.cn/)
