Merge branch 'master' of http://47.107.61.133:3000/chinaweal/public
This commit is contained in:
commit
0382c55735
|
|
@ -1 +1,136 @@
|
|||
新兵作战指南（前端篇）
|
||||
# 新兵作战指南（前端篇）
|
||||
|
||||
## 目录
|
||||
|
||||
- [新兵作战指南（前端篇）](#新兵作战指南（前端篇）)
|
||||
- [武器准备（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）
|
||||
下面都是Visual Studio Code的插件
|
||||
|
||||
### 必要插件
|
||||
|
||||
#### ESLint
|
||||
|
||||
提供按照指定的eslint规则格式化代码的功能
|
||||
|
||||
|
||||
#### Vetur
|
||||
|
||||
.vue文件解析
|
||||
|
||||
### 推荐插件
|
||||
|
||||
#### Prettier - Code formatter
|
||||
|
||||
其他文件的代码格式化插件
|
||||
|
||||
## 军规（规范）
|
||||
|
||||
### 代码格式
|
||||
|
||||
前端项目模板已配置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
|
||||
|
|
|
|||
Loading…
Reference in New Issue