electron+elementui

下载electron-vue

vue init simulatedgreg/electron-vue admin

 npm installnpm run dev

此时的目录结构如下：

安装elementui

cnpm install --save element-ui
cnpm install --save-dev node-sass
cnpm install --save-dev sass-loader
cnpm install --save font-awesome

在main.js中引用element-ui

import Vue from 'vue'import App from './App'import 'font-awesome/css/font-awesome.min.css'import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
//原始风格
// import 'element-ui/lib/theme-chalk/index.css'
//自定义风格
// import './assets/theme/element-#09345f/index.css'
Vue.use(ElementUI)Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({components: { App },template: '<App/>'
}).$mount('#app')

在LandingPage.vue里测试elementui组件

<template><div id="wrapper"><img id="logo" src="~@/assets/logo.png" alt="electron-vue"><main><div class="left-side"><span class="title">Welcome to your new project!</span><system-information></system-information></div><div class="right-side"><div class="doc"><div class="title">Getting Started</div><p>electron-vue comes packed with detailed documentation that covers everything frominternal configurations, using the project structure, building your application,and so much more.</p><button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs</button><br><br></div><div class="doc"><div class="title alt">Other Documentation</div><el-button type=danger plain>测试</el-button><button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button><button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button></div></div></main></div>
</template><script>import SystemInformation from './LandingPage/SystemInformation'export default {name: 'landing-page',components: { SystemInformation },methods: {open (link) {require('electron').shell.openExternal(link)}}}
</script>

页面成功

electron+elementui相关推荐

spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏，electron+vue桌面应用项目框架搭建
1.与普通vue项目一样安装node.淘宝源等,然后再 electron官网:https://www.electronjs.org/ 安装electron: npm install electron ...
Vue 全家桶 + Electron 开发的一个跨三端的应用
GitHub Repo:vue-objccn Follow: halfrost · GitHub 项目地址:https://github.com/halfrost/vue-objccn 利用 Vue. ...
pyqt 获取 UI 中组件_一起学Vue：UI框架(elementui)
目标使用Vue+ElementUI构建一个非常简单CRUD应用程序,以便您更好地了解它的工作方式. 效果页面比如我们要实现这样列表.新增.编辑三个页面: 列表页面新增页面编辑页面安装elem ...
editor修改样式 vue_手摸手Electron + Vue实战教程（三）
系列文章: 手摸手Electron + Vue实战教程(一) 手摸手Electron + Vue实战教程(二) ❝ 上一篇我们已经完成了左侧菜单栏的基本样式功能,这一篇我们就主要来开发右侧的Markd ...
spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子感觉还是可以用的第一步是完成了果断拿过来放到我这里这下面直接是连接点进去就可以用啊本想着不用vue 直接导入连接 ...
app头像上传vue_Vue+Electron开发跨平台桌面应用实践
总篇43篇 2019年第17篇背景公司去年对 CDN 资源服务器进行了迁移,由原来的通过 FTP 方式的文件存储改为了使用 S3 协议上传的对象存储,部门内 @柴俊堃同学开发了一个命令行脚本工具 ...
Vue 全家桶 + Electron 开发的一个跨三端的应用 1
代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
使用electron和vue，以ipc通信的方式构建客户端版本的掘金首页
1. 使用electron-vue新建基于vue的electron环境,更多配置请访问源项目 npm i -g vue-cli vue init simulatedgreg/electron-vue ...

electron+elementui

electron+elementui相关推荐

最新文章

热门文章