【面试系列】=＞补充 以及ESLint

专业技能

1.倒排，把最有价值的排到最上面，如Vue、React，微信小程序等应该排前2位，其它往后排

岗位职责
1.开发相关的描述（分析项目需求和产品原型（axure是产品原型工具，墨刀），搭建项目及设计组件，进行相应的业务逻辑编码和接口调用，配合前端组长对项目代码进行优化，提高代码质量）
2.配合测试相关的描述（配合测试修改Bug，配合产品经理（或者UI工程师）对页面进行优化，对用户体验进行优化）
3.对已经上线项目进行相关的维护（包括添加新功能、新页面、修改线上页面细节问题及bug（Bug从哪里来？从项目管理软件中提交的。比如：禅道））
4.参加各种会议（如项目需求评审会、服务端接口设计评审会议，日常项目管理会议(一般项目增加新功能，改动的业务逻辑过大)）
5.研究学习类工作（难题/关键技术验证、组件库等技术选型、公司公用代码(公司积累的常用功能代码，比如：各种数据验证插件，权限控制，登录，注册)/开发规范（个人的编码风格：css规范，JS规范）等学习改进）
6.非开发其它配合类工作（带新人类工作、配合产品经理画原型，配合产品经理或测试写文档（用接口文档工具生成也行，比如：swaggers）等）

项目
1.注意问题1：应用形态（PC页面、手机内嵌页面（Web App，移动端项目）、微信小程序、公众号等，为啥要做成这种形态？）原因：不同的程序有不同的宿主环境，适应的操作系统也不一样，所以有不同的叫法。

2.注意问题2：项目背景（公司名称、公司为啥要做这个项目？<这种10年前流行，这种项目能买到现成的产品，这种项目没有商业价值>）

从项目名称中和项目描述中看出你的项目是10年前的项目，你的项目市场上能直接买到现成的源码，不需要开发，你的项目没有商业价值

3.按时间顺序倒排，最近做的项目在最前面（强制要求：目的重点突出，面试官相对关注最近的项目。）

项目描述：

1.项目的类型（XXX公司的XXX，XXX行业的XXX，针对XXX类用户的XXX）

2.开发工具和技术栈：WebStorm、VS Code、Vue全家桶、pxCook（标注工具，比如：马克鳗）、Git、YAPI（为API开发者设计的管理平台）、PostMan（调试接口的工具）、Bug管理系统

3.是否独立或合作完成

项目职责

1.负责搭建项目，负责XXXX等模块的需求分析、实现页面、公共组件设计（所谓设计就是决定开发什么组件、组件叫什么名字、组件有哪些属性、插槽、事件等）及实现，业务逻辑编码、接口调用等；

2.配合测试修改bug，配合产品经理优化用户界面和用户体验；

3.项目难点的解决<难点是什么、怎么解决的>备注：不要站在上帝视角审视项目，上帝眼里没有难题，要站到菜鸟的角度仰视项目，把学过的知识变成难点描述出来；甚至首次使用Vue、首次做小程序，多页应用都可以

4.项目特色亮点；备注：只要不是常规的框架内的技术都是特色亮点，如画统计图、地图、音视频播放，动画效果比较多，响应式的，可以与手机App原生代码相互调用的，定位，使了本地存储，支付（相对难），需要与其它应用协作

5.自己在本项目中的贡献（参与技术验证、技术选型、公共组件库设计与开发、参与接口设计）

6.项目的成就（项目是否按时完成，顺利完式并上线、领导客户评价）；

7.项目收获（技术上的大大小小的收获、项目流程上的改进<评审、CodeReview、每天坚持项目例会>、软能力<沟通能力、带人、前端项目组长>上等）。

备注：5、6、7只需要挑2个写在最近的2个项目里就行了。

面试问题

eslint
1.怎么启用eslint
2.怎么配置eslint
3.用哪一套eslint规则？airbnb
4.常见eslint警告或错误有哪些？
5.Vue脚手架内置eslint规则有几个级别 recommended

常用的git分支

• 新项目
  master（受保护的分支）
  dev（develop）开发分支（只有一个人写项目）
  多人合作，每个人建一个自己名字为名称的分支
• 老项目
  dev用来写下一个版的代码
  fix-xxxx 用来修复线上版本的bug
  new-feature-xxxx 用来快速给线上版本增加新功能
  参考资料git-flow

知道WebStorm吗？
1.激活
2.设置字体和字号
3.启动项目、怎么执行npm中的脚本
4.怎么使用git的各种高级功能
a)指定文件提交
b)比较文件差异
c)管理分支
d)push
e)合并及解决冲突
5.重构代码（重命名<哪些文件排除>等，全局搜索替换）
6.ESLint一键修复、代码格式化

列出你最熟悉的组件库及其组件名
列出这些组件哪些有插槽

最常的Webpack的插件及其功能
1.HtmlWebpackPlugin
2.CopyWebpackPlugin

怎么实现Vue多页应用，React呢？
Vue脚手架是怎么实现多页应用的？
https://www.jianshu.com/p/48cc261ac9e0

Vue脚手架项目怎么查看原始的Webpack配置？怎么修改module等配置？

Babel的功能可以分为哪2类？怎么针对浏览器生成最优代码？

提测和项目的测试的流程是什么？你们用哪个bug管理工具？如果你不认某个bug是bug怎么办？如果是其他人的bug分配给你了怎么办？

你们在哪里查看项目的需求和接口文档（用什么项目管理及接口管理工具）？

你们平时都参加什么会议？

各类工作时间占比？

岗位职责：
1.分析项目需求和产品原型
2.设计组件及搭建项目进行相关业务逻辑的开发（一定要了解原型图和modao的基本使用和接口的调用）
3.配合测试修复bug，配合产品经理进行页面效果优化
4.对已经上线的项目进行维护（包括添加新功能，新页面，修改线上bug）
5.参加项目需求、设计、评审会议（参加日常项目管理会议）
6.研究学习类的工作（收集各种组件库的资料、查找某种效果的实现方法）
7.带实习生、帮产品经理画原型图、配合产品经理/测试、写文档（用户说明）

技能问题：
把最熟练最具有价值的写在上面

项目介绍：
1.合作开发还是独立完成
2.列出自己所做的模块
3.共用组件的功能及实现，接口的调用
4.配合测试解决bug，对页面和用户体验进行优化
5.分析响应的需求和效果图（选择使用的组件，通过查找npm或者github等技术网站解决了什么需求）
6.参与本项目的接口设计（配合服务端完成接口设计）
7.项目的难点和亮点
8.项目的成就（是否按时完成，是否顺利上线）
9.项目的收获（项目流程、熟悉的组件库、技术性/非技术性）

技术：
1.ESLint的airbnb规范
2.vue-cli4个校验规则（recommend）
3.vscode中
：在vue项目中运行npm run lint
：安装ESLint插件
4.Git的常用分支
git->master主分支->开发人员1/开发人员2
git->master主分支->Bug分支->
5.webstorm
：了解怎么激活
：设置字体字号
：怎样运行vue项目
：如何运行npm脚本
：如何使用git，怎样push代码，怎样合并代码，怎样解决代码冲突
：如何使用代码重构功能
6.了解webpack插件：html-webpack-plugin、copy-webpack-plugin

软件：modao/墨刀、禅道、YAPI
A：ESLint的airbnb规范
1、简介：
eslint检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具。
JSHint 和 JSLint 也是静态代码检查工具，但伴随着发展，他们已经无法满足需求，于是ESlint 诞生了，因次ESlint比它们功能更强大也更灵活。
ESLint 是用 Node.js 写的，可以通过 npm 来安装。ESLint 也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。
2、作用：
ESlint作为代码检查工具，其作用主要有以下几点：
– 统一代码风格规则，如：缩进用几个空格；是否用驼峰命名法来命名变量和函数名等。
– 减少错误， 如：相等比较必须用 =，变量在使用前必须被声明，在条件语句中不能使用赋值语句等。
– 提高代码质量，如：函数最多有多少条件分支；最多有几个参数，代码块最多能嵌套多少层等。
– 其他。如： 禁用alert。这可以提高用户体验，因为 alert 框的外观不是那么好看，而且往往与网站的风格不搭，一般都会自定义 alert 框。
3、eslint官方提供了3种预安装包：
– eslint-config-google
Google标准
执行安装： npm install eslint eslint-config-google –g
– eslint-config-standard
Standard标准，它是一些前端工程师自定的标准。
执行安装：npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise –g
– eslint-config-airbnb
Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件，并且对各个插件的版本有所要求。
你可以执行以下命令查看所依赖的各个版本：npm info “eslint-config-airbnb@latest” peerDependencies
知道了每个plugins的版本要求后，代入以下命令执行安装即可使用：npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g
4、airbnb规范：
– 不使用分号/使用分号
– 不使用逗号结尾/使用逗号结尾
– 使用let，const，摒弃var
– 使用字面量创建Object和Array
** 使用空格的规范 **
{}前后要空格、 []前后无需空格、注释符号后面要空格、逗号之后要空格、冒号之后要空格、使用空格把运算符隔开、在控制语句（if、while 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格、在大括号前放置 1 个空格
– 使用对象方法和属性速记语法
– 使用表达式创建funtion
– 只用引号引无效标识符的属性
– 使用展开符…复制数组（代替 Array.from）
– 在数组方法回调中使用 return 语句。如果函数体由一个返回无副作用的表达式的单个语句组成，那么可以省略返回值
– 当访问和使用对象的多个属性时，请使用对象解构
– 使用数组解构
– 字符串使用单引号 ‘’
– 以编程方式构建字符串时，请使用模板字符串而不是字符串连接
– 不要使用 arguments，可以选择 rest 语法 … 替代
– 使用默认参数语法，而不要使用一个变化的函数参数
– 不要改变参数
– 参数不要重新赋值
– 如果你的函数只有一个参数并且不使用大括号，则可以省略参数括号。否则，为了清晰和一致性，总是给参数加上括号
– 一个地方只在一个路径中 import(导入)（将所有 import 导入放在非导入语句的上面）
– 不要使用 iterators（迭代器） 。请使用高阶函数，例如 map() 和 reduce() 等，而不是像 for-in 或 for-of 这样的循环
– 避免使用一元递增和递减运算符(++, --)
– 尽量使用 === 和 ! 而非 == 和 !=
– 在 case 和 default 子句中，使用大括号来创建包含词法声明的语句块
– 三元表达式不应该嵌套，通常写成单行表达式（避免不必要的三元表达式语句）
– 当运算符混合在一个语句中时，请将其放在括号内。混合算术运算符时，不要将 和 % 与 + ， -，*，/ 混合在一起
– 如果一个 if 块总是执行一个 return 语句，后面的 else 块是不必要的。在 else if 块中的 return，可以分成多个 if 块来 return
– 在文件末尾插入一个空行
– 数字: 使用 Number 进行转换，而 parseInt 则始终以基数解析字串
5、eslint在webpack中的配置（使用Airbnb编码规则）：
– 安装eslint-loader：npm install --save-dev eslint-loader
– 安装eslint：npm install --save-dev eslint
– webpack.config.js下添加代码
{
test: /.js$/,
loader: ‘eslint-loader’,
enforce: “pre”,
include: [path.resolve(__dirname, ‘src’)], // 指定检查的目录
options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine
formatter: require(‘eslint-friendly-formatter’) // 指定错误报告的格式规范
}
}
– 新建配置文件.eslintrc.js
module.exports = {
root: true,
parserOptions: {
sourceType: ‘module’
},
env: {
browser: true,
},
rules: {
“indent”: [“error”, 2],
“quotes”: [“error”, “double”],
“semi”: [“error”, “always”],
“no-console”: “error”,
“arrow-parens”: 0
}
}
– 在package.json中添加
“scripts”: {
“dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”,
“start”: “npm run dev”,
“build”: “node build/build.js”,
“lint”: “eslint --ext .js,.vue src”,//添加此行
“test”: “npm run lint”//添加此行
},
– 置Airbnb校验规则及其依赖
npm install eslint-plugin-jsx-a11y --save
npm install eslint-plugin-react --save
npm install eslint-plugin-import --save
npm install --save-dev eslint-config-airbnb
– 在配置文件.eslintrc.js中添加
extends: ‘airbnb’,

B：Vue-cli的4个校验规则（formatter config）
vue-cli eslint 规则（https://www.cnblogs.com/changhuanran/p/9840581.html）
a．ESLint with error prevention only
b．ESLint + Airbnb config
c．ESLint + Standard config
d．ESLint + Prettier

C：VSCode中配置ESLint
1.下载ESLint 和 vetur插件：在vscode插件中搜索 ESLint 和 vetur
2.安装eslint：npm i eslint –g
3. 打开vs设置：
“extensions.ignoreRecommendations”: false,
“editor.wordWrap”: “on”,
“git.autofetch”: true,

"files.autoSave": "onFocusChange",

"eslint.validate": [
   "javascript",
   "javascriptreact",
   "html",
   { "language": "vue", "autoFix": true }
 ],
 "eslint.options": {
    "plugins": ["html"]
},
"eslint.autoFixOnSave": true,
"workbench.startupEditor": "newUntitledFile",
"explorer.confirmDragAndDrop": false,

"emmet.triggerExpansionOnTab": true,
"explorer.confirmDelete": false,
"vetur.format.defaultFormatter.html": "js-beautify-html",

“vetur.validation.template”: false,

4. 项目package.json文件中：
   “scripts”: {
   …
   “lint”: “eslint --fix --ext .js,.vue src”,
   …
   },

5. 设立ilnt规则
   项目目录下建立.eslintrc.js文件
   module.exports = {
   root: true,
   parser: ‘babel-eslint’,
   parserOptions: {
   sourceType: ‘module’
   },
   env: {
   browser: true,
   node: true,
   es6: true,
   },
   extends: ‘eslint:recommended’,
   // required to lint *.vue files
   plugins: [
   ‘html’
   ],
   // check if imports actually resolve
   ‘settings’: {
   ‘import/resolver’: {
   ‘webpack’: {
   ‘config’: ‘build/webpack.base.conf.js’
   }
   }
   },
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue
   ‘rules’: {
   ‘accessor-pairs’: 2,
   ‘arrow-spacing’: [2, {
   ‘before’: true,
   ‘after’: true
   }],
   ‘block-spacing’: [2, ‘always’],
   ‘brace-style’: [2, ‘1tbs’, {
   ‘allowSingleLine’: true
   }],
   ‘camelcase’: [0, {
   ‘properties’: ‘always’
   }],
   ‘comma-dangle’: [2, ‘never’],
   ‘comma-spacing’: [2, {
   ‘before’: false,
   ‘after’: true
   }],
   ‘comma-style’: [2, ‘last’],
   ‘constructor-super’: 2,
   ‘curly’: [2, ‘multi-line’],
   ‘dot-location’: [2, ‘property’],
   ‘eol-last’: 2,
   ‘eqeqeq’: [2, ‘allow-null’],
   ‘generator-star-spacing’: [2, {
   ‘before’: true,
   ‘after’: true
   }],
   ‘handle-callback-err’: [2, ‘^(err|error)$’],
   ‘indent’: [2, 2, {
   ‘SwitchCase’: 1
   }],
   ‘jsx-quotes’: [2, ‘prefer-single’],
   ‘key-spacing’: [2, {
   ‘beforeColon’: false,
   ‘afterColon’: true
   }],
   ‘keyword-spacing’: [2, {
   ‘before’: true,
   ‘after’: true
   }],
   ‘new-cap’: [2, {
   ‘newIsCap’: true,
   ‘capIsNew’: false
   }],
   ‘new-parens’: 2,
   ‘no-array-constructor’: 2,
   ‘no-caller’: 2,
   ‘no-console’: ‘off’,
   ‘no-class-assign’: 2,
   ‘no-cond-assign’: 2,
   ‘no-const-assign’: 2,
   ‘no-control-regex’: 0,
   ‘no-delete-var’: 2,
   ‘no-dupe-args’: 2,
   ‘no-dupe-class-members’: 2,
   ‘no-dupe-keys’: 2,
   ‘no-duplicate-case’: 2,
   ‘no-empty-character-class’: 2,
   ‘no-empty-pattern’: 2,
   ‘no-eval’: 2,
   ‘no-ex-assign’: 2,
   ‘no-extend-native’: 2,
   ‘no-extra-bind’: 2,
   ‘no-extra-boolean-cast’: 2,
   ‘no-extra-parens’: [2, ‘functions’],
   ‘no-fallthrough’: 2,
   ‘no-floating-decimal’: 2,
   ‘no-func-assign’: 2,
   ‘no-implied-eval’: 2,
   ‘no-inner-declarations’: [2, ‘functions’],
   ‘no-invalid-regexp’: 2,
   ‘no-irregular-whitespace’: 2,
   ‘no-iterator’: 2,
   ‘no-label-var’: 2,
   ‘no-labels’: [2, {
   ‘allowLoop’: false,
   ‘allowSwitch’: false
   }],
   ‘no-lone-blocks’: 2,
   ‘no-mixed-spaces-and-tabs’: 2,
   ‘no-multi-spaces’: 2,
   ‘no-multi-str’: 2,
   ‘no-multiple-empty-lines’: [2, {
   ‘max’: 1
   }],
   ‘no-native-reassign’: 2,
   ‘no-negated-in-lhs’: 2,
   ‘no-new-object’: 2,
   ‘no-new-require’: 2,
   ‘no-new-symbol’: 2,
   ‘no-new-wrappers’: 2,
   ‘no-obj-calls’: 2,
   ‘no-octal’: 2,
   ‘no-octal-escape’: 2,
   ‘no-path-concat’: 2,
   ‘no-proto’: 2,
   ‘no-redeclare’: 2,
   ‘no-regex-spaces’: 2,
   ‘no-return-assign’: [2, ‘except-parens’],
   ‘no-self-assign’: 2,
   ‘no-self-compare’: 2,
   ‘no-sequences’: 2,
   ‘no-shadow-restricted-names’: 2,
   ‘no-spaced-func’: 2,
   ‘no-sparse-arrays’: 2,
   ‘no-this-before-super’: 2,
   ‘no-throw-literal’: 2,
   ‘no-trailing-spaces’: 2,
   ‘no-undef’: 2,
   ‘no-undef-init’: 2,
   ‘no-unexpected-multiline’: 2,
   ‘no-unmodified-loop-condition’: 2,
   ‘no-unneeded-ternary’: [2, {
   ‘defaultAssignment’: false
   }],
   ‘no-unreachable’: 2,
   ‘no-unsafe-finally’: 2,
   ‘no-unused-vars’: [2, {
   ‘vars’: ‘all’,
   ‘args’: ‘none’
   }],
   ‘no-useless-call’: 2,
   ‘no-useless-computed-key’: 2,
   ‘no-useless-constructor’: 2,
   ‘no-useless-escape’: 0,
   ‘no-whitespace-before-property’: 2,
   ‘no-with’: 2,
   ‘one-var’: [2, {
   ‘initialized’: ‘never’
   }],
   ‘operator-linebreak’: [2, ‘after’, {
   ‘overrides’: {
   ‘?’: ‘before’,
   ‘:’: ‘before’
   }
   }],
   ‘padded-blocks’: [2, ‘never’],
   ‘quotes’: [2, ‘single’, {
   ‘avoidEscape’: true,
   ‘allowTemplateLiterals’: true
   }],
   ‘semi’: [2, ‘never’],
   ‘semi-spacing’: [2, {
   ‘before’: false,
   ‘after’: true
   }],
   ‘space-before-blocks’: [2, ‘always’],
   ‘space-before-function-paren’: [2, ‘never’],
   ‘space-in-parens’: [2, ‘never’],
   ‘space-infix-ops’: 2,
   ‘space-unary-ops’: [2, {
   ‘words’: true,
   ‘nonwords’: false
   }],
   ‘spaced-comment’: [2, ‘always’, {
   ‘markers’: [‘global’, ‘globals’, ‘eslint’, ‘eslint-disable’, ‘*package’, ‘!’, ‘,’]
   }],
   ‘template-curly-spacing’: [2, ‘never’],
   ‘use-isnan’: 2,
   ‘valid-typeof’: 2,
   ‘wrap-iife’: [2, ‘any’],
   ‘yield-star-spacing’: [2, ‘both’],
   ‘yoda’: [2, ‘never’],
   ‘prefer-const’: 2,
   ‘no-debugger’: process.env.NODE_ENV === ‘production’ ? 2 : 0,
   ‘object-curly-spacing’: [2, ‘always’, {
   objectsInObjects: false
   }],
   ‘array-bracket-spacing’: [2, ‘never’]
   }
   }

这样，每次保存时就可以自动fix格式，运行npm run lint格式化整个工程代码

D：Git常用分支
每个公司都有自己的一套git操作模式，但git的各种规范都是相同，
分支命名

master - 主干（默认）
一般master位于线上正式服务器的版本，每一次在 master 上的提交或合并都应该伴随着版本号的变更。（这样会更好的记录和版本回退）
master 分支应保证是随时可发布的（可能包含Bug），每个发布的版本应打上 tag，便于回滚。对于有重大 Bug 的版本，应备注，避免回滚到错误的版本。

feature/* - 特性分支
Example: feature/this-is-a-feature-name，名称中间通过 - 分割。
该分支创建自 master 分支，充分测试后，合并到 master 分支
开发人员使用的分支，针对每一个功能点 issue 创建一个 feature，一般命名规范为 feature/<issue_number>-<feature_name>，该 feature 下的每次提交格式为 #<issue_number> <description>，当 feature 开发完毕后 merge 到 develop，并关闭 issue。
实际开发中，可能有些 feature 算不上什么功能上的需求，不太必要有 issue，所以命名时可以没有 <issue_number>。
实际开发中，每个新特征功能都应该进行独立的测试，所以可能需要发布到测试环境中供测试人员进行测试。目前开发流程不方便部署 feature 分支，所以目前不进行feature 的独立测试。

develop - 测试分支
该分支创建自 master 分支，定期与 master 分支同步，featrue 分支 在本 merge 到 develop 后 push 到 github 进行测试。
测试服运行此分支代码，作为开发环境中的主分支使用，任务是收集各个 feature 分支。
合并到 develop 分支的代码必须是已经完成开发并在本地进行过充分测试的 feature，即 能够交给测试人员测试的版本。
因该分支上可能包含多个 feature，且 多个 feature 可能处于不同阶段，所以该分支一般不合并的到 master

release/* - 预发布版本
预发布版本，当 develop 收集够了做一次版本发布所需的代码，就 checkout -b 出一个 release 分支，作为上线前的最后测试，除了 bugfix 外不接受任何提交。确认发布后分别 merge 到 master 和 develop。
如果能够明确定义版本，且明确定义 某版本包含哪些功能的情况下，可在 某版本 定义的功能全部开发完毕之后，创建 release 分支，进行 master + release 灰度部署。

hotfix/*
紧急修复分支，当 master 上出现 bug 需要修复时，基于 master 创建 hotfix 分支，修复完成后分别 merge 到 master 和 develop。
开发分支中可能存在Bug，直接修改就可以了，无须创建分支修复Bug，所以，hotfix/* 只针对发布的版本。

E：Webstorm
https://jingyan.baidu.com/article/1612d500ae3f98e20e1eee02.html
安装：点击下一步安装，选择32/64-bit launcher，选择.js.css.html，选择jetbrains，点击安装（不运行）。

点击电脑系统时间，修改成未来的某一天，点击软件运行，点击“Evaluate for free for 30 days”进行激活。进入webstorm使用，再把时间调回到当前时间，不影响webstrom的使用
或者去网上找一些激活： 6ZUMD7WWWU-eyJsaWNlbnNlSWQiOiI2WlVNRDdXV1dVIiwibGljZW5zZWVOYW1lIjoiSmV0cyBHcm91cCIsImFzc2lnbmVlTmFtZSI6IiIsImFzc2lnbmVlRW1haWwiOiIiLCJsaWNlbnNlUmVzdHJpY3Rpb24iOiIiLCJjaGVja0NvbmN1cnJlbnRVc2UiOmZhbHNlLCJwcm9kdWN0cyI6W3siY29kZSI6IklJIiwiZmFsbGJhY2tEYXRlIjoiMjAxOS0wOS0wMyIsInBhaWRVcFRvIjoiMjAyMC0wOS0wMiJ9LHsiY29kZSI6IkFDIiwiZmFsbGJhY2tEYXRlIjoiMjAxOS0wOS0wMyIsInBhaWRVcFRvIjoiMjAyMC0wOS0wMiJ9LHsiY29kZSI6IkRQTiIsImZhbGxiYWNrRGF0ZSI6IjIwMTktMDktMDMiLCJwYWlkVXBUbyI6IjIwMjAtMDktMDIifSx7ImNvZGUiOiJQUyIsImZhbGxiYWNrRGF0ZSI6IjIwMTktMDktMDMiLCJwYWlkVXBUbyI6IjIwMjAtMDktMDIifSx7ImNvZGUiOiJHTyIsImZhbGxiYWNrRGF0ZSI6IjIwMTktMDktMDMiLCJwYWlkVXBUbyI6IjIwMjAtMDktMDIifSx7ImNvZGUiOiJETSIsImZhbGxiYWNrRGF0ZSI6IjIwMTktMDktMDMiLCJwYWlkVXBUbyI6IjIwMjAtMDktMDIifSx7ImNvZGUiOiJDTCIsImZhbGxiYWNrRGF0ZSI6IjIwMTktMDktMDMiLCJwYWlkVXBUbyI6IjIwMjAtMDktMDIifSx7ImNvZGUiOiJSUzAiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiUkMiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiUkQiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiUEMiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiUk0iLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiV1MiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiREIiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiREMiLCJmYWxsYmFja0RhdGUiOiIyMDE5LTA5LTAzIiwicGFpZFVwVG8iOiIyMDIwLTA5LTAyIn0seyJjb2RlIjoiUlNVIiwiZmFsbGJhY2tEYXRlIjoiMjAxOS0wOS0wMyIsInBhaWRVcFRvIjoiMjAyMC0wOS0wMiJ9XSwiaGFzaCI6IjE0Mjg5NzUwLzAiLCJncmFjZVBlcmlvZERheXMiOjcsImF1dG9Qcm9sb25nYXRlZCI6ZmFsc2UsImlzQXV0b1Byb2xvbmdhdGVkIjpmYWxzZX0=-Gd8RATyTEnHcAydKuC7N1ZdeLaMP9IR+nlPyVxvLsczAUTGKxcuAYbfz/uVtepg8ey4NfJlPNS+AGcGz8x7ImkX9jEV9KElMxPu3tKSdF/WKo6JCONX7UtudYa/9EQum3banxci/qH7jejSrFZSN+YjWQiYTR0Q8gq4/a2RyQTgseZfpImY/nXkOWLwWArr/p+4ddp/bWQN4nLTW+Z4ZaQeLE96Z9viCdn62EKOcR02Hfr9Oju9VYQh1L8pGrTqNey5nUSv/LQUbVwo5qoYbBRos8l6ewkFNGsuC3vtOgGWSgkgChbDjWhW4Nkm4vDM2NFAphMsS1dgyPw3eJ3C+6A==-MIIElTCCAn2gAwIBAgIBCTANBgkqhkiG9w0BAQsFADAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBMB4XDTE4MTEwMTEyMjk0NloXDTIwMTEwMjEyMjk0NlowaDELMAkGA1UEBhMCQ1oxDjAMBgNVBAgMBU51c2xlMQ8wDQYDVQQHDAZQcmFndWUxGTAXBgNVBAoMEEpldEJyYWlucyBzLnIuby4xHTAbBgNVBAMMFHByb2QzeS1mcm9tLTIwMTgxMTAxMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxcQkq+zdxlR2mmRYBPzGbUNdMN6OaXiXzxIWtMEkrJMO/5oUfQJbLLuMSMK0QHFmaI37WShyxZcfRCidwXjot4zmNBKnlyHodDij/78TmVqFl8nOeD5+07B8VEaIu7c3E1N+e1doC6wht4I4+IEmtsPAdoaj5WCQVQbrI8KeT8M9VcBIWX7fD0fhexfg3ZRt0xqwMcXGNp3DdJHiO0rCdU+Itv7EmtnSVq9jBG1usMSFvMowR25mju2JcPFp1+I4ZI+FqgR8gyG8oiNDyNEoAbsR3lOpI7grUYSvkB/xVy/VoklPCK2h0f0GJxFjnye8NT1PAywoyl7RmiAVRE/EKwIDAQABo4GZMIGWMAkGA1UdEwQCMAAwHQYDVR0OBBYEFGEpG9oZGcfLMGNBkY7SgHiMGgTcMEgGA1UdIwRBMD+AFKOetkhnQhI2Qb1t4Lm0oFKLl/GzoRykGjAYMRYwFAYDVQQDDA1KZXRQcm9maWxlIENBggkA0myxg7KDeeEwEwYDVR0lBAwwCgYIKwYBBQUHAwEwCwYDVR0PBAQDAgWgMA0GCSqGSIb3DQEBCwUAA4ICAQAF8uc+YJOHHwOFcPzmbjcxNDuGoOUIP+2h1R75Lecswb7ru2LWWSUMtXVKQzChLNPn/72W0k+oI056tgiwuG7M49LXp4zQVlQnFmWU1wwGvVhq5R63Rpjx1zjGUhcXgayu7+9zMUW596Lbomsg8qVve6euqsrFicYkIIuUu4zYPndJwfe0YkS5nY72SHnNdbPhEnN8wcB2Kz+OIG0lih3yz5EqFhld03bGp222ZQCIghCTVL6QBNadGsiN/lWLl4JdR3lJkZzlpFdiHijoVRdWeSWqM4y0t23c92HXKrgppoSV18XMxrWVdoSM3nuMHwxGhFyde05OdDtLpCv+jlWf5REAHHA201pAU6bJSZINyHDUTB+Beo28rRXSwSh3OUIvYwKNVeoBY+KwOJ7WnuTCUq1meE6GkKc4D/cXmgpOyW/1SmBz3XjVIi/zprZ0zf3qH5mkphtg6ksjKgKjmx1cXfZAAX6wcDBNaCL+Ortep1Dh8xDUbqbBVNBL4jbiL3i3xsfNiyJgaZ5sX7i8tmStEpLbPwvHcByuf59qJhV/bZOl8KqJBETCDJcY6O2aqhTUy+9x93ThKs1GKrRPePrWPluud7ttlgtRveit/pcBrnQcXOl1rHq7ByB8CFAxNotRUYL9IF5n3wJOgkPojMy6jetQA5Ogc8Sm7RG6vg1yow==

– 设置字体字号：
1.webstorm默认的字体大小一般 ,不适合我,接着我就来修改一下。
2.点击“文件/file”——“设置/setting”,或者直接Ctrl+Alt+S快捷键。
3.然后用鼠标双击“编辑器/editor”——“颜色和字体/colors&fonts”。
4.接着找到“font”,并且用鼠标单击“font”选项。
5.如果是新安装的webstorm,是无法编辑字体大小的,接着我们点击”另存为。如果可以编辑字体，则忽略这一步。
6. 如图，点击另存为会弹出一个”配色方案“窗口，随便命名一下就可以了。
7. 最后预览字体大小效果，合适就点击”确定“即可。如果没有变大则重新启动即可。

– 运行vue项目：
准备工作：
1：webstorm的安装
2：node.js的安装
3：安装Git
4：vue-cli
Webstorm运行vue项目：
1.利用vue-cli初始化一个vue项目项目
2. 打开webstrom编辑器，选择file，选择open，打开上面创建的vue项目文件
3. Webstorm调用终端可以使用快捷键：Alt+F12，或者在View菜单手动调用view->tool windows -> terminal
4.输入命令：npm run serve

– Webstorm快速启动Vue项目配置
1：点击右上角，添加npm配置/或者下拉箭头。
2：点击加号，选择npm
3:命名并且填写运行命令。（name自定义 command run-script script serve）
4:可以看到控制台出现运行
5:点击绿色按钮，可以看到启动了端口（右上角绿色按钮）

– 如何使用git，怎么样push代码，怎样合并代码，怎样解决代码冲突
// git常用命令上课讲的很详细了
1、git冲突的场景
情景一：多个分支代码合并到一个分支时；
情景二：多个分支向同一个远端分支推送代码时；
实际上，push操作即是将本地代码merge到远端库分支上。
关于push和pull其实就分别是用本地分支合并到远程分支 和 将远程分支合并到本地分支
所以这两个过程中也可能存在冲突。
git的合并中产生冲突的具体情况：
　　<1>两个分支中修改了同一个文件（不管什么地方）
　　<2>两个分支中修改了同一个文件的名称
两个分支中分别修改了不同文件中的部分，不会产生冲突，可以直接将两部分合并。
2、冲突解决方法
情景一：在当前分支上，直接修改冲突代码—>add—>commit。
情景二：在本地当前分支上，修改冲突代码—>add—>commit—>push
注：借用vim或者IDE或者直接找到冲突文件，修改。

– webstorm中使用git
https://www.cnblogs.com/yesu/p/10642385.html

– webstorm重构
https://segmentfault.com/a/1190000016191409

F：webpack插件：html-webpack-plugin/copy-webpack-plugin
– webpack4 之html-webpack-plugin
html-webpack-plugin插件：
一、说明
webpack-dev-server实现了自动编译刷新浏览器，让编译出来的bundle.js托关于服务器根路径（电脑内存）中去。
使用–contentBase指令指定启动目录（物理磁盘中的页面路径），还需要修改此页面中script标签的src属性（指向url根路径，托管路径），麻烦。除了解决此问题，还需要实现页面也放到内存中，则可以借助于一个webpack插件：html-webpack-plugin，配置启动页面。
二、安装
npm i html-webpack-plugin --save-dev，再项目根目录执行，把插件安装到项目中。
三、基本操作
1、增加webpack配置文件配置（webpack.config.js）。
const htmlWebpackPlugin = require(‘html-webpack-plugin’); //导入插件
module.exports = {
plugins:[ //配置插件的节点
new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件
template:path.join(__dirname,’./src/index.html’), //指定模板页面
//将来会根据此页面生成内存中的页面
filename:‘index.html’ //指定生成页面的名称，index.html浏览器才会默认直接打开
})
]
}
2、运行webpack-dev-server，不需要手动处理bundle.js的引用了（托管于根路径页面需要修改引用路径），html-webpack-plugin插件生成的内存中的页面已帮我们创建并正确引用了打包编译生成的bundle.js的

– webpack拷贝插件 copy-webpack-plugin
安装
npm install --save-dev copy-webpack-plugin
作用：在webpack中拷贝文件和文件夹
from 定义要拷贝的源文件 from：__dirname+’/src/components’
to 定义要拷贝到的目标文件夹 to: __dirname+’/dist’
toType file 或者 dir 可选，默认是文件
force 强制覆盖前面的插件 可选，默认是文件
context 可选，默认base context可用specific context
flatten 只拷贝指定的文件 可以用模糊匹配
ignore 忽略拷贝指定的文件 可以模糊匹配

用法
import CopyWebpackPlugin=require(‘copy-webpack-plugin’);
new CopyWebpackPlugin([
{
from: __dirname+’/src/components’,
to: __dirname+’/dist’,
ignore: [’.*’]
}
])

G：modao、禅道、yapi软件的使用