安装electron-vue遇到的问题
1.执行vue init simulatedgreg/electron-vue xxx(project)
命令太慢。
推荐解决方法:
1.1、将electron-vue项目先下载下来
- electron-vue国内码云地址,直接下载到本地。
- 或通过git直接克隆到本地
git clone https://gitee.com/mirrors/electron-vue.git
1.2安装样板代码
- F:\privateProjects\workspace\project\Elc\ele-vue\electron-vue 是下载下来后的项目路径(根 据 自 己 下 载 的 位 置 自 行 调 整),my-project 是项目名称。
- 之后根据如下代码,即可快速构建项目模板。
vue init F:\privateProjects\workspace\project\Elc\ele-vue\electron-vue my-project
1.3运行项目
npm install
npm run dev
2.运行npm run dev 报错
Electron-vue运行时报错“ReferenceError:process is not defined”
解决方案:
修改.electron-vue/webpack.web.config.js和.electron-vue/webpack.renderer.config.js文件的HtmlWebpackPlugin,添加templateParameters,如下:
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({filename: 'styles.css'}),
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
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
],
然后重新npm run dev 就可以了
3.如何集成 Element ui
3.1安装: npm i element-ui -S
3.2 在main.js中 添加
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3.3 在main.js中 添加
<template>
<div id="app">
<router-view></router-view>
<el-button type="info">信息按钮</el-button>
</div>
</template>
4. DevTools was disconnected from the page Once page id reloaded,DevTools will
未完待续…