【原创】从零开始搭建Electron+Vue+Webpack项目框架，一套代码，同时构建客户端、
（一）Electron跑起来
（二）从零搭建Vue全家桶+webpack项目框架
（三）Electron+Vue+Webpack，联合调试整个项目（未完待续）
（四）Electron配置润色（未完待续）
（五）预加载及自动更新（未完待续）
（六）构建、发布整个项目（包括client和web）（未完待续）
摘要：上篇文章说到了如何新建工程，并启动一个最简单的Electron应用。“跑起来”了Electron，那就接着把Vue“跑起来”吧。有一点需要说明的是，webpack是贯穿这个系列始终的，我也是本着学习的态度，去介绍、总结一些常用到的配置及思路，有不恰当的地方，或者待优化的地方，欢迎留言。项目完整代码：https://github.com/luohao8023/electron-vue-template
下面开始~~~
一、安装依赖
vue、webpack：不多说了
vue-loader：解析、转换.vue文件
vue-template-compiler：vue-loader的依赖包，但又独立于vue-loader，简单的说，作用就是使用这个插件将template语法转为render函数
webpack-dev-server：快速搭建本地运行环境的工具
webpack-hot-middleware：搭配webpack-dev-server使用，实现热更新
chalk：命令行输出带有颜色的内容
依赖包就介绍这么多，后面需要什么可以自行下载，这里不多赘述了。
二、完善工程目录
webpack.render.config.js：渲染进程打包配置
dev.js：本地调试脚本
views：页面代码
index.js：vue工程入口文件
index.ejs：打包生成html文件时的模板
三、配置Vue工程
1、编写入口文件，render>index.js
import Vue from ‘vue‘; import index from ‘./views/index.vue‘; //取消 Vue 所有的日志与警告 Vue.config.silent = true; new Vue({ el: ‘#app‘, render: h => h(index) });
2、编写根组件，render>views>index.vue
<template> <div> <h1>Welcome to electron-vue-template!</h1> </div> </template> <script> export default {} </script> <style></style>
3、编写html模板文件，render>index.ejs，webpack解析、打包vue文件时，以此模板生成html文件
<!DOCTYPE html> <html lang="zh-CN"> <!--template for 2019年10月30日--> <!--<%= new Date().getFullYear()+‘/‘+(new Date().getMonth()+1)+‘/‘+new Date().getDate()+‘ ‘+new Date().getHours()+‘:‘+new Date().getMinutes() %>--> <head> <meta charset="UTF-8"> <title>模板文件</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"> <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> <meta HTTP-EQUIV="expires" CONTENT="0"> </head> <body> <div></div> </body> </html>
4、编写webpack配置文件，builder>webpack.render.config.js，建议按照本文这种方式，把配置文件单独抽出来，这样的话，本地调试和打包可以共用一套配置，只需要传递不同参数就可以了，不要把所有的配置和打包逻辑写在一个文件里，太长、太乱、太难维护
/* Name: 渲染进程配置 Author: haoluo Date: 2019-10-30 */ const path = require(‘path‘); const HtmlWebpackPlugin = require(‘html-webpack-plugin‘); const devMode = process.env.NODE_ENV === ‘development‘; module.exports = { mode: devMode ? ‘development‘ : ‘production‘, entry: { main: ‘./src/render/index.js‘ }, output: { path: path.join(__dirname, ‘../app/‘), publicPath: devMode ? ‘/‘ : ‘‘, filename: ‘./js/[name].[hash:8].js‘ }, module: { rules: [ { test: /\.vue$/, exclude: /node_modules/, loader: ‘vue-loader‘ } ] }, plugins: [ new HtmlWebpackPlugin({ template: ‘./src/render/index.ejs‘, filename: ‘./index.html‘, title: ‘electron-vue-template‘, inject: false, hash: true, mode: devMode }) ] }
适当解释一下：
mode：环境参数，针对不同的环境，webpack内部有一些不同的机制，并对相应环境做相应的优化
温馨提示: 本文由杰米博客推荐，转载请保留链接: https://www.jmwww.net/file/web/10094.html
