前端桌面跨平台桌面应用程序electron-vue的安装
来源:未知 admin | 2020-01-04
electron-vue 安装
1、保证已经全局安装npm,安装 cnpm install -g electron 和vue脚手架cnpm install --global vue-cli
2、cd 到目录 vue init simulatedgreg/electron-vue electronproject(项目目录名称)
vuex 不安装 eslintn可以不安装
3、 sass安装
cnpm install sass-loader node-sass --save-dev
遇到错误解决方案
解决方案
修改.electron-vue/webpack.web.config.js和.electron-vue/webpack.renderer.config.js文件的HtmlWebpackPlugin,添加templateParameters,修改后如下:
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 }),
4、安装 element-ui (样式框架)
cnpm i element-ui -S
main.js li 里引入 element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
app.vue里 加入 <el-button type="primary">主要按钮</el-button> 测试安装是否成功
配置路由
配置路由
<router-link to="/">首页</router-link>
<router-link to="/report">报表</router-link>
<router-link to="/keywords">关键字</router-link>
<router-link to="/alarm">设置</router-link>