VUE环境搭建

前言

前段时间在研究React，然后费了很大的功夫来集成TypeScript和SCSS，然后发现vue3已经都整合好了，于是果断使用vue了。

安装vue

这里我使用的vue3版本，安装方式如下：

npm install -g @vue/cli@3.11.0

如果大家之前安装了vue低版本，需要先卸载，命令如下：

npm uninstall vue-cli -g

创建项目

vue create myvueapp

执行上面命令之后，会出现两个选项，第一个是默认选项，第二个是自定义选项，我们选择自定义选项。

然后会弹出插件选项，注意，这里使用上下按钮控制移动，使用空格进行选择。我这里选择了Babel, TypeScript, Router, Vuex, CSS Pre-processors, Linter。当然，大家也可以按需选择。选好之后，点击回车确定。

然后是一些sass/scss，jsx等插件的支持情况，大家可以自行选择，然后继续等待安装完成即可。

执行完毕后进入myvueapp目录，执行如下命令：

npm run serve

然后访问 http:// localhost:8080/ 能看到页面，就表示创建成功了。

OK，TypeScriot，SCSS，TSX等等一系列我们想用的技术就已经集成好了，就是这么简单。

配置Electron

vue3集成Electron有一些不同，它借助于vue-cli-plugin-electron-builder插件，我们先安装它：

npm install -D vue-cli-plugin-electron-builder@1.4.0

然后利用vue add命令增加electron-builder，命令如下：

vue add electron-builder

然后启动就可以啦：

npm run electron:serve

如果是最终构建，则执行下面命令：

npm run electron:build

友情提示：Electron入口文件为src/background.ts

关闭tslint

tslint就是eslint的TypeScript版本，它的作用相信大家都知道了，但JavaScript是一个自由的语言，不该受到过多的束缚，私以为有了TypeScript的类型检查就够了。那么我们怎么关闭它呢？

如果根目录下已经有了vue.config.js文件，我们只要设置lintOnSave属性为false即可；而如果没有这个配置文件，我们需要手动增加一个，配置代码为：

module.exports = {
    lintOnSave: false