electron-vue构建桌面应用（一）

electron-vue，作者为我们封装好了一个基于vue框架的脚手架，包括electron所有基本的开发构建工具和vue配套的请求，路由以及vuex等插件。通过脚手架我们可以直接进入开发阶段。
官网：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/
以下是具体步骤：
一、node -v(小写v) ；如果没有显示node版本，先去官网下载安装node(node自带npm，npm是nodejs的包管理器,只有下载了node才能用npm把依赖包下载并管理起来)
二、electron -v；如果没有执行npm install -g electron安装（electron如果没有全局安装时，每次新建项目都需要重新安装）
三、vue -V(大写V) ；如果没有显示vue版本，npm install -g vue-cli（vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
四、创建脚手架（模板）： vue init simulatedgreg/electron-vue my-project
如果报错： vue-cli · Failed to download repo simulatedgreg/electron-vue: end of central directory record signature not found，就webpack -v检查是否装了webpack(如果没有全局安装时，每次新建项目都需要重新安装)，执行npm install webpack -g即可。
然后一路回车即可：
在这里插入图片描述
其中这段

 vue init simulatedgreg/electron-vue my-project
? Use linting with ESLint? (Y/n) n

如果选了Y,想在项目初始化完成后禁用eslint，解决办法：
把
.electron-vue/webpack.main.config.js
.electron-vue/webpack.renderer.config.js
.electron-vue/webpack.web.config.js
这三个文件中的这段代码注释掉即可：

{
        test: /\.(js|vue)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: {
          loader: 'eslint-loader',
          options: {
            formatter: require('eslint-friendly-formatter')
          }
        }
      },

五：yarn # 或者 npm install（下载依赖）
yarn run dev 或者 npm run dev（运行项目）
运行报错了：
在这里插入图片描述
查了下原因是：高版本的node，大于12的版本时候。使用electron-vue项目时候会报错！
解决办法：把.electron-vue\webpack.renderer.config.js中的

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

改为：

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),

把.electron-vue\webpack.web.config.js中的：

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: path.resolve(__dirname, '../src/index.ejs'),
  minify: {
    collapseWhitespace: true,
    removeAttributeQuotes: true,
    removeComments: true
  },
  nodeModules: false
}),

改为：

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, '../src/index.ejs'),
      templateParameters(compilation, assets, options) {
        return {
          compilation: compilation,
          webpack: compilation.getStats().toJson(),
          webpackConfig: compilation.options,
          htmlWebpackPlugin: {
            files: assets,
            options: options
          },
          process,
        };
      },
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: false
    }),

六、选择前端UI框架：Element ui
可参考Element ui官网
1、npm i element-ui -S
2、在src\renderer\main.js中引入（全局引入）：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

然后就可以在页面中使用了

electron-vue构建桌面应用（一）

猜你喜欢