3.7 KiB
新兵作战指南（前端篇）
目录
武器准备（ENV）
NodeJs
现代前端项目必备，提供本地环境中和操作系统交互的接口。
因为node-sass对node版本有要求(非要求版本可能会重新编译node-sass)，公司的前端项目模板使用的node-sass版本为^4.x.x，最后一个版本为4.14.1，所以对应推荐使用的node版本为14.x.x及以下。
如果你使用linux操作系统或拥有WSL(适用于Linux的Windows子系统，WSL1性能差不推荐，WSL2看自己情况)，建议使用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扩展商店安装
2、离线安装
下载源码编译，打开chrome扩展页面右上角的开发者模式，加载已解压的扩展程序
ESLint(Visual Studio Code)
提供按照指定的eslint规则格式化代码的功能
Vetur(Visual Studio Code)
.vue文件解析
推荐插件
Prettier - Code formatter(Visual Studio Code)
其他文件的代码格式化插件
军规（规范）
代码格式
前端项目模板已配置ESLint规则，按照ESLint进行格式化即可
编写规范
1、禁止在任何组件中编写不带作用域的样式
<!-- good -->
<style lang="scss" scoped>
</style>
<!-- bad -->
<style lang="scss">
</style>
如果需要全局生效的样式，请在src/styles/文件夹里编写然后在src/styles/index.scss或组件中导入
如果需要改变element等外部组件的组件内样式，请使用/deep/语法
<style lang="scss" scoped>
.el-input{
/deep/ .input{
color: red;
}
}
</style>
依赖管理
npm or yarn
随便，一般用npm
依赖安装
任何新增的项目依赖，安装时都需要添加--save参数写入package.json
npm install axios --save
如果是打包、webpack等插件则添加到开发依赖(一般用不到)
npm install compressing --save-dev
常见问题
npm install失败
先删除node_modules
1、使用淘宝源
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