用vue手脚架生成项目后,修改.Vue文件后,直接保存编译报一大堆错误,解决办法如下

用vue手脚架生成项目后,修改.Vue文件后,直接保存编译报一大堆错误,解决办法如下:

显示错误截图如下:

在这里插入图片描述
因为直接用vue脚手架初始化创建项目,会选择是否选用eslint语法检查,选择了之后,修改.vue文件报以上截图错误
解决办法如下:

  1. 直接重新初始化关掉eslint语法,但是这样子做的话,有点麻烦。
  2. 直接在文件根目录下的.eslintrc.js文件加入如下代码,直接忽略掉就行了
      rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-trailing-spaces': 'off',
    'indent': 'off',
    'spaced-comment': 'off',
    'no-trailing-spaces': 'off',
    'no-new': 'off',
    'key-spacing': 'off',
    'comma-dangle': 'off',
    'eol-last': 'off',
    'quotes': 'off',
    'semi': 'off',
    'keyword-spacing': 'off',
    'space-before-blocks': 'off',
    'comma-spacing': 'off',
    'space-before-function-paren': 'off',
    'space-infix-ops': 'off',
    'no-multiple-empty-lines': 'off',
    'block-spacing': 'off',
    'padded-blocks': 'off',
    'arrow-spacing': 'off',
    'no-sequences': 'off',
    'no-unused-expressions': 'off',
    'no-multi-spaces': 'off',
    'no-unused-vars': 'off',
    'camelcase ': 'off',
    }
    
具体截图如下:

在这里插入图片描述

关于开发Vue项目格式化问题配置

大家用VSCode开发vue项目格式化的时候总是有一些行尾加;,空格等问题,其实下载插件直接解决就OK了,给你一个清爽的代码体验,具体步骤如下:
  1. 下载插件vetur(开发vue必备)、prettier(代码洁癖必备)、beautify
  2. Ctrl+Shift+p 找到用户设置 -----> setting.json中设置
  3. 直接把下面的json格式代码复制即可
 {
 "files.autoSave": "off",
  //是让vue后缀的文件就当作vue文件格式来解析
  "files.associations": {
    "*.vue": "vue"
  },
  //eslint代码格式化相关配置
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  // 重新设定tabsize
  "editor.tabSize": 2,
  // 保存自动化
  "editor.formatOnSave": true,
  // 保存时自动fix
  "eslint.autoFixOnSave": true,
  "eslint.run": "onSave",
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  // 使用插件格式化 html
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "force-aligned"
      // #vue组件中html代码格式化样式
    }
  },
  //  #去掉代码结尾的分号 
  "prettier.semi": false,
  //  #使用带引号替代双引号 
  "prettier.singleQuote": true,
  //默认浏览器为chrome浏览器打开
  "open-in-browser.default": "chrome",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro",
  "code-runner.runInTerminal": true,
  "vsicons.dontShowNewVersionMessage": true,
  // "[html]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  "workbench.activityBar.visible": true,
  // "workbench.colorCustomizations": {
  //   // 设置guide线高亮颜色
  //   "editorIndentGuide.activeBackground": "#e82d6b"
  // },
  "workbench.sideBar.location": "left",
  "powermode.enabled": true, //是否开启
  "powermode.enableShake": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "previewServer.port": 9030, //动画效果
  //git配置文件,路径是git.exe绝对路径
  "git:path": "E:\\software\\Git-2.21.0\\Git\\bin\\git.exe",
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "svn.enableProposedApi": "none",
  //敲代码的爆炸效果的设置                         
  "powermode.presets": "exploding-rift",
  "powermode.comboThreshold": 1,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "editor.mouseWheelZoom": true,
  "terminal.integrated.rendererType": "dom",
  "explorer.confirmDragAndDrop": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "explorer.confirmDelete": false,
  // Bracket-Pair-Colorizer-2括号着色自定义
  "bracket-pair-colorizer-2.activeScopeCSS": [
    "borderStyle : solid",
    "borderWidth : 2px",
    "borderColor : {#f22f75}",
    "opacity: 1"
  ],
  // 在装订线中显示活动范围括号
  "bracket-pair-colorizer-2.showBracketsInGutter": true,
  }
具体的详细配置在上面了,大家自己看需求配置就OK了!
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你使用的是 GoFrame 框,并且想要将 Vue 编译好的文件打包到 Go 程序,可以使用 Gres 工具来完成这个目标。 Gres 是一个开源的 CLI 工具,可以将文件嵌入到 Go 程序。它支持将任何类型的文件嵌入到 Go 程序,包括图片、CSS、JavaScript、HTML、JSON 等等。 下面是一个简单的例子,展示了如何使用 Gres 工具将 Vue 编译好的文件打包到 Go 程序: 1. 安装 Gres 工具 在终端输入以下命令来安装 Gres 工具: ``` go get -u github.com/UnnoTed/fileb0x go get -u github.com/UnnoTed/gres/cmd/gres ``` 2. 创建一个 Vue 项目编译 在终端创建一个 Vue 项目,并使用 `npm run build` 命令编译项目生成编译好的文件。 3. 创建 Gres 文件 在终端使用 `gres init` 命令创建一个 Gres 文件: ``` gres init ``` 然后你可以编辑生成的 `gres.yml` 文件配置需要嵌入的文件。 例如,如果你想要将 `dist` 文件夹下的所有文件嵌入到 Go 程序,可以在 `gres.yml` 文件添加以下配置: ```yaml files: - src: dist dest: vue ``` 这个配置将 `dist` 文件夹下的所有文件嵌入到 Go 程序,并将它们放在 `vue` 目录下。 4. 生成 Go 代码 在终端使用 `gres generate` 命令生成 Go 代码: ``` gres generate ``` 这个命令将生成一个 Go 文件,其包含了你在 `gres.yml` 文件配置的所有文件。你可以在你的 Go 代码使用这些文件。 5. 使用 Gres 文件 在你的 Go 代码导入生成的 Gres 文件,并使用 `Load` 函数来加载需要的文件: ```go package main import ( "github.com/UnnoTed/gres" "net/http" ) func main() { http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { data, _ := gres.Get("vue/index.html") w.Write(data) }) http.ListenAndServe(":8080", nil) } ``` 在上面的例子,我们使用 `gres.Get` 函数获取嵌入到 Go 程序的 `index.html` 文件,并将它返回给客户端。 希望这个例子能够帮助你将 Vue 编译好的文件打包到 Go 程序
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值