electron-vue 开发(3) webpack和eslint的配置

electron官网

开发环境

• win10X64
• Vscode
• nodejs
• yarn

使用到的框架

• vue全家桶
• element-ui
• mui
• electron-vue

技术栈

• c++
• nodejs
• html+css+js

---

接上篇

现在我们介绍electron-vue框架的使用.这个框架是github别人搭建好的vue环境, 经过一系列默认的配置就可以使用了.

package.json

现在我们主要关注的是package.json.

• scripts标签

这里面就是我们执行 npm run XXX 命令 (或者 yarn run XXX) 的脚本.比如我们启动应用 , 输入的是

npm run dev

其实执行的就是 "dev": "node .electron-vue/dev-runner.js" 这一行的指令.

• devDependencies

  

  这里是包管理, node对其中插件的版本控制.比如其中electorn的版本, 我们可以这里修改其中的版本号,然后执行

npm install

就可以了

---

eslint配置

eslint 是很重要的配置, 作用就相当于帮你找出代码中的语法错误, 而且配置得当的话,还可以帮你在保存文件的时候自动帮你修复其中的语法错误,多么强大啊!

1. 先在vscode中安装eslint插件
2. vscode-文件-设置- 搜索 eslint

   

3. 编辑setting.json 添加如下代码

"eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",{
            "language": "vue",
            "autoFix": true
        },
        "html",
        "vue"
    ],

这样你就发现在你保存文件的时候就能够自动帮你修复文本格式和提示错误了.

eslintignore文件

在实际项目中, 我们有些文件不想让他进行错误检查, 这时候在根目录下.eslintignore 中添加对应的目录或者文件名,就可以了

test/unit/coverage/**
test/unit/*.js
test/e2e/*.js