vue后台项目中常用小知识点总结

290 阅读2分钟

一、 语法校验修改

  • 新建.prettierrc文件夹, 书写如下代码:
    "semi": false,  //代表隐藏或取消分号;
    "singleQuote": true //代表用单引号表示一个字符串
    "printWidth": 200 //大于次宽度换行,避免格式化工具和eslint冲突
  • 在eslintrc.js文件中,可以修改eslint语法规则:
rules: {
    'space-before-function-paren' : 0 //复制警告语法规则到这里,禁用该警告
}

二、git 分支操作

git add . (将修改文件添加到暂存区)

git commit -m "xxxxxx" (将暂存区所有消息,提交到本地仓库)

git status (查看状态) 下图所示,表示当前分支干净

image.png

git checkout -b xxx (创建xxx分支,并切换到xxx分支)

git branch (查看当前项目所有分支及所在分支)

checkout xxx (切换到xxx分支)

git merge xxx (合并xxx分支)

git push (推送到远程分支)

git push -u origin xxx (将本地所在分支推送到远程分支并就叫做xxx)

基操:

  1. git checkout -b xxx (创建xxx分支,并切换到xxx分支,开发xxx功能)
  2. (开发完成后,完成本地操作)
  • git add .
  • git commit -m "完成了xxx功能"
  1. (切换到主分支,并在master分支上合并xxx分支的代码)
  • git checkout master
  • git merge xxx
  1. (在推送到远程分支之前,尽量拉一下,避免冲突)
  • git pull
  • git push

三、权限管理业务分析

image.png

四、项目优化策略

  1. 生成打包报告(打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告);
  • 通过命令行参数的形式生成报告
// 通过vue-cli的命令选项可以生成打包报告
// --report选项可以生成report.html 可以帮助分析包内容
vue-cli-service build --report
  • 通过可视化的UI面板直接查看报告(推荐) 在可视化的UI面板中,控制台分析面板,可以方便地看到项目中所存在的问题。
  1. 第三方库启用CDN;
  2. Element-ui组件按需加载;
  3. 路由懒加载; 当打包构建项目时,javaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
  4. 首页内容定制;