144 lines
3.7 KiB
Markdown
144 lines
3.7 KiB
Markdown
# 新兵作战指南（前端篇）
|
||
|
||
## 目录
|
||
|
||
- [新兵作战指南（前端篇）](#新兵作战指南（前端篇）)
|
||
- [武器准备（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
|