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)
然后就可以在页面中使用了