VUE学习:一.开发工具

sadwind2024-02-29笔记200

前言

了解前端项目开发中环境的相关配置,工具的相关使用技巧等,有助于快速解决开发时遇到的各种问题,提高开发效率

#1.Node.js

注意

实际开发中团队中 node 版本最好保持一致,包括各种环境(dev、sit、uat、生产)中

  • 1.官网下载 Node.js (opens new window)(以 windows 系统 64 位为例)

  • 2.安装 Node.js(注意有时有问题需要注意环境变量的配置)

  • 3.cmd 中查看 node 版本,校验安装成功后,升级 npm

    node -vnpm install -g npm@latest # npm i npm -g
    1
    2

#2.版本控制

注意

目前推荐使用Git及相关插件,不推荐 SVN 管理代码,但是推荐管理相关技术文档资料

  • 版本规范 挑选稳定版本 记录版本号 如果版本升级,需要总结版本差异

#2.1 安装 Git

苹果系统中使用 homebrew 安装 git



#3.编辑器

注意

不推荐使用 hbuilder、sublime text、WebStorm、Atom,推荐使用Visual Studio Code,重点关注一些常见的功能(终端、代码对比、批量替换、代码调试)

#3.1 安装配置 vscode

  • 1.官网下载:https://code.visualstudio.com(opens new window)

  • 2.安装时勾选选项后,不需要拖动代码文件、或项目目录到编辑器,就可以直接用鼠标右键打开目标

  • 3.使用自带的终端 + bash 运行命令

    建议使用 vscode 自带的终端,快捷键ctl+,右边下角操作完成后可以直接运行命令(同 cmd 上操作)

  • 4.安装插件

    • Vue 2 Snippets:Vue2 代码片段补全

    • Document This: 能够一键给代码中的类、函数加上注释,支持函数声明、函数表达式、箭头函数等

    • Auto Close Tag:自动添加 HTML / XML 关闭标签

    • Auto Rename Tag:自动重命名配对的 HTML / XML 标签

    • Beautify:格式化代码

    • Bracket Pair Colorizer:颜色识别匹配括号

    • Code Runner:运行多种语言的代码片段或代码文件

    • Chinese (Simplified) Language Pack for Visual Studio Code:中文简体语言包

    • Color Info:提供你在 CSS 中使用颜色的相关信息

    • CSS Peek:使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码

    • Debugger for Chrome:前端调试

    • ESLint:EsLint 可以帮助我们检查 Javascript 编程时的语法错误

    • filesize:在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

    • Git History:以图表的形式查看 git 日志

    • GitLens — Git supercharged:显示文件最近的 commit 和作者,显示当前行 commit 信息

    • HTML CSS Support:html 代码自动补全以及 class 智能提示

    • HTMLHint:HTML 代码格式检测

    • HTML Snippets:代码自动填充

    • Image Preview:鼠标移到路径里显示图像预览

    • JavaScript (ES6) code snippets:es6 代码片段

    • Live Server:浏览器实时刷新

    • Vetur:Vue 语法高亮显示, 语法错误检查, 代码自动补全

    • vscode-fileheader:顶部注释模板,可定义作者、时间等信息,并会自动更新最后修改时间,快捷键: Ctrl+Alt+i (默认信息可在 文件 → 首选项 → 设置 中修改)

  • 5.配置参数

    settins.json

    {
      "editor.quickSuggestions": {
        //开启自动显示建议
        "other": true,
        "comments": true,
        "strings": true
      }, // vscode默认启用了根据文件类型自动设置tabsize的选项
      "editor.detectIndentation": false, // 重新设定tabsize
      "editor.tabSize": 2, // 每次保存的时候自动格式化
      "editor.formatOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
      "eslint.autoFixOnSave": true, // 添加 vue 支持
      "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
          "language": "html",
          "autoFix": true
        },
        {
          "language": "vue",
          "autoFix": true
        }
      ], // 让prettier使用eslint的代码格式进行校验
      "prettier.eslintIntegration": true, // 去掉代码结尾的分号
      "prettier.semi": false, // 使用单引号替代双引号
      "prettier.singleQuote": true, // 让函数(名)和后面的括号之间加个空格 // "javascript.format.insertSpaceBeforeFunctionParenthesis": false, // html格式化,这个按用户自身习惯选择
      "vetur.format.defaultFormatter.html": "js-beautify-html", // 让vue中的js按编辑器自带的ts格式进行格式化
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "force-aligned" // vue组件中html代码格式化样式
        }
      },
      "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
      },
      "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
      }, // 设置字体 // "editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", // vscode 程序title位置显示内容,这里设置了显示路径
      "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", // 编辑器建议 显示在头部
      "editor.snippetSuggestions": "top",
      "editor.suggestSelection": "first",
      "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "beautify.ignore": "",
      "editor.fontSize": 20}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53

#3.2 实用功能

  • 代码对比

    • 右键需要比较的文件弹框选择选择以进行比较

    • 右键目标文件弹框选择与已选项目进行比较

#3.3 批量替换

支持使用正则方式进行复杂场景的替换,对大型项目中批量修改非常高效

#3.4 调试代码

可以直接在 vscode 中 debugger,更加直观感受整个代码运行流程

#4.谷歌浏览器

  • 跨域,方便本地开发解决跨域问题参考资料(opens new window)

  • 相关调试技巧:developer tool

  • 查看页面性能:LightHouse

  • vue 代码调试插件:vue-devtools

  • vue 页面性能测试插件:Vue performance Devtool

#5.npm

注意

推荐在 vscode bash 中运行相关命令

rm -rf node_modules #一些常见的命令操作需不能在cmd中执行,如删除依赖这个命令需要在bash中使用
1

#5.1 npm

  • npm(node package manage)是 nodejs 自带的包管理工具。

  • package.json

    • ~会匹配最近的小版本依赖包,比如~1.2.3 会匹配所有 1.2.x 版本,但是不包括 1.3.0

    • ^会匹配最新的大版本依赖包,比如^1.2.3 会匹配所有 1.x.x 的包,包括 1.3.0,但是不包括 2.0.0

    • *这意味着安装最新版本的依赖包

#5.2 cnpm

npm i --registry=https://registry.npm.taobao.org #可以在安装包的时候指定下载源npm config set registry https://registry.npm.taobao.org #改变全局默认下载地址npm install cnpm -g --registry=https://registry.npm.taobao.org
1
2
3
  • cnpm 不受 package-lock.json 影响,只会根据 package.json 进行下载

#5.3 yarn

  • 有时候通过 cnpm 下载的包莫名不能用, 可以换用 yarn 解决这个问题

#5.4 pnpm

  • pnpm 速度快

总结

熟悉常用的 vue 项目开发工具,以及常见的配置,保障项目的一致性


relate content

使用字符串匹配 屏蔽一下搜索关键词

总是有些不怀好意的人,使用一些SQL注入词来尝试搜索,真想对这些人说一句,去你妈的。网站会记录搜索词,我不想记录这些数据,同时也想单独对这些人做一个提示页面,就将一些常用SQL注入字符做个数组,然后跳...

VUE学习:四.环境配置

前言前端项目开发中,一般会有几个环境:dev:是程序员们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告sit:dev 环境完成需求开发就可以将代码打包到 sit 环境...

VUE学习:十.编码技巧

前言总结一些开发中常见的问题,优化改善编码技巧,提高代码质量#1.条件判断常见条件判断iflet name = "case1"if (nam...

TP6实现添加数据功能,重复提交问题

这是在使用一个基于TP6的开源的、名为FunAdmin的后台管理系统时,在此系统上二次开发时,自己新建一个应用,在实现添加数据功能时,总是出现重复提交,添加一次数据,实现添加了两条,代码也没啥问题。经...

VUE学习:十三.代码管理

前言前端开发中对代码的处理:代码的存储、代码的管控、代码的提交与合并#1.代码仓库以gitlab 为例配置 ssh权限#2.代码管理简单项目分支dev:开发分支,直接在 dev 上进行开发,测试环境没...

【编程达人】火哥Windows内核课程(上+下)

【编程达人】火哥Windows内核课程(上+下)

描述:本套课程来自编程达人:课程官方售价上下(5499+5499)元,由编程达人一线老师主讲,主要讲解windows的保护模式,系统调试,异常发现及处理等等。本课程包含内核上下两部分,内核课程上11节...

Post Reply    

◎Welcome to participate in the discussion.