Electron Vue Element-ui 搭建桌面应用

view-source 爬代码 直接在想要的网站前加

搭建基本的Electron Vue Element-ui 搭建桌面应用

基本环境 : 有node.js

cmd查看电脑node版本号

node -v
npm -v

都装了就可以开始了

npm下载太慢了 50M平均速度7K左右

所以用淘宝镜像试试

获取cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli脚手架

cnpm install -g vue-cli

开始init项目

vue init simulatedgreg/electron-vue my-project

随后有很多需要选择的

Application Name：项目名称

Application Id： 项目标识Id（一般使用公司网址）

Application Version ：你的程序的版本号

Project description：项目描述

Use Sass / Scss ：Yes

Select which Vue plugins to install：要安装的插件，默认是全选的，按空格键取消选择，前面尖括号里有*号表示选中状态

Use linting with ESLint? ：是否使用ESLint插件做语法检查

Which ESLint config would you like to use?：如果使用上一步的ESLint，你希望用哪一种检查配置

Set up unit testing with Karma + Mocha?：是否使用 Karma 和 Mocha集成测试模块

What build tool would you like to use?：你喜欢用哪一种打包方式

项目构建出来成功以后

目录就是这样

然后cd进入目录用安装

cnpm install 
npm install 
两种都可以 建议用cnpm install

安装完成以后就可以试着打开看看

npm run dev

效果好像没有出来 查看了一下

说是在在 .electron-vue/webpack.renderer.config.js 和 .electron-vue/webpack.web.config.js 文件中找到 newHtmlWebpackPlugin({})

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
}),

啊 可以了 都加上以后就可以了

然后就是考虑加入element-ui了

先根据官网

cnpm i element-ui -S

快速上手的指示，在src/renderer/main.js中修改如下：

import Vue from 'vue'
import axios from 'axios'
import ElementUI from 'element-ui';  // 新添加
import 'element-ui/lib/theme-chalk/index.css';  //新添加

import App from './App'
import router from './router'
import store from './store'
Vue.use(ElementUI);  // 新添加

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

说是element-ui中的el-table表格不正常使用

网上查了一下说是什么element-ui需要加入到白名单里面，需要修改.electron-vue/webpack.renderer.config.js

把
let whiteListedModules = ['vue']
修改为
let whiteListedModules = ['vue', 'element-ui']

说是这样就正常了

然后就是怎么打包了

yarn build   //编译和打包

说是这样就正常了

然后就是怎么打包了

yarn build   //编译和打包

运行 build 之后，在 build 文件夹下会出现 Setup.exe 文件和 win-unpacked 文件夹