public/技术规范/新兵作战指南（前端篇）.md

# 新兵作战指南（前端篇）

## 目录

- [新兵作战指南（前端篇）](#新兵作战指南（前端篇）)
  - [武器准备（ENV）](#武器准备（ENV）)
    - [NodeJs](#NodeJs)
    - [IDE](#IDE)
    - [Git](#Git)
    - [SVN](#SVN)
  - [配件准备（plugin）](#配件准备（plugin）)
    - [必要插件](#必要插件)
    - [推荐插件](#推荐插件)
  - [军规（规范）](#军规（规范）)
    - [代码格式](#代码格式)
    - [编写规范](#编写规范)
    - [依赖管理](#依赖管理)
  - [常见问题](#常见问题)

## 武器准备（ENV）

### NodeJs

现代前端项目必备，提供本地环境中和操作系统交互的接口。  
因为node-sass对node版本有要求(非要求版本可能会重新编译node-sass)，公司的前端项目模板使用的node-sass版本为^4.x.x，最后一个版本为4.14.1，所以对应推荐使用的node版本为[14.x.x](https://nodejs.org/download/release/v14.18.2/)及以下。  
如果你使用linux操作系统或拥有WSL(适用于Linux的Windows子系统，WSL1性能差不推荐，WSL2看自己情况)，建议使用[NVM](https://github.com/nvm-sh/nvm)来管理/安装nodejs，nvm-windows自行斟酌。

### IDE

建议Visual Studio Code，公司的前端基础模板上带有Visual Studio Code的默认配置文件

### GIT

新项目都使用git进行版本控制，一般安装官方的命令行版本即可，Visual Studio Code自带操作界面。  
https://git-scm.com/downloads

### SVN

旧项目会用到SVN  
https://tortoisesvn.net/downloads.zh.html


## 配件准备（plugin）

### 必要插件

#### Vue.js devtools(Chrome Extension)

vue应用调试
1、[使用google扩展商店安装](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)  
2、离线安装  
[下载源码](https://github.com/vuejs/devtools)编译，打开chrome扩展页面右上角的开发者模式，加载已解压的扩展程序  

#### ESLint(Visual Studio Code)

提供按照指定的eslint规则格式化代码的功能


#### Vetur(Visual Studio Code)

.vue文件解析

### 推荐插件

#### Prettier - Code formatter(Visual Studio Code)

其他文件的代码格式化插件

## 军规（规范）

### 代码格式

前端项目模板已配置ESLint规则，按照ESLint进行格式化即可

### 编写规范

#### 1、禁止在任何组件中编写不带作用域的样式

```html
<!-- good -->
<style lang="scss" scoped>
    
</style>

<!-- bad -->
<style lang="scss">
  
</style>
```

如果需要全局生效的样式，请在src/styles/文件夹里编写然后在src/styles/index.scss或组件中导入  

如果需要改变element等外部组件的组件内样式，请使用/deep/语法  
```html
<style lang="scss" scoped>
  .el-input{
    /deep/ .input{
      color: red;
    }
  }
</style>
```

### 依赖管理

#### npm or yarn

随便，一般用npm

#### 依赖安装

任何新增的项目依赖，安装时都需要添加--save参数写入package.json

```bash
npm install axios --save
```

如果是打包、webpack等插件则添加到开发依赖(一般用不到)
```bash
npm install compressing --save-dev
```


## 常见问题

### npm install失败

先删除node_modules

1、使用淘宝源
```bash
npm install --registry=https://registry.npm.taobao.org 
```

2、不要使用管理员权限打开终端

### npm install 提示 node-sass 编译失败

正常情况下会优先下载，下载失败或找不到对应的版本时再进行编译

解决方法一: 将node版本升级/降级到14.x.x或以下版本(因为公司项目默认node-sass版本为4.x.x，其他版本对应的node版本可以在node-sass的Releases页面找到)  

解决方法二（不推荐）: 补全编译环境python2