Electron开发实战之记账软件3——使用UI框架vuetify实现页面
2019-04-22 10:14
260 查看
原文链接:https://my.oschina.net/u/3667677/blog/3040223
先来张图
1.为什么用Vuetify?
https://vuetifyjs.com/zh-Hans/getting-started/quick-start
Vuetify完全根据Material Design规范开发。每个组件都是手工制作的,做桌面端非常好看。vuetify是一个渐进式的框架,试图推动前端开发发展到一个新的水平。Vuetify 支持SSR(服务端渲染),SPA(单页应用程序),PWA(渐进式Web应用程序)和标准HTML页面。
官网主要介绍的是使用vue cli3,但我们还在使用vue cli2,所以手动引入。
2.引入Vuetify
npm install vuetify --save // 安装依赖
在src/renderer/main.js中引入
import Vue from 'vue' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' // 引入Vuetify的css文件 Vue.use(Vuetify)
3.引入Material Design图标
npm install material-design-icons-iconfont --save // 安装依赖 import 'material-design-icons-iconfont/dist/material-design-icons.css' // 引入Material Desgin Icon的css文件
4.目录结构
├── .electron-vue // 配置及构建脚本 │ ├── build.js // 生产环境构建脚本 │ ├── dev-client.js // 开发服务器热重载脚本,主要用来实现开发阶段的页面自动刷新 │ ├── dev-runner.js // 运行本地开发服务器 │ ├── webpack.main.config.js // 主进程webpack配置文件 │ ├── webpack.renderer.config.js // 渲染进程webpack配置文件 │ └── webpack.web.config.js // ├── assets // 其他资源 ├── build // 构建 │ └── icons // 图标 │ └── win-unpacked // 未打包资源 ├── dist // 静态资源 │ ├── electron │ │ └── main.js │ └── web ├── src // 源码目录 │ ├── main // 主进程 │ │ ├── index.dev.js │ │ └── index.js // 入口文件 │ ├── renderer // 渲染进程 │ │ ├── assets // 资源 │ │ ├── components // 公共组件目录 │ │ ├── router // 前端路由 │ │ ├── store // 状态管理 │ │ ├── views // 页面目录 │ │ ├── App.vue // 根组件 │ │ └── main.js // 入口文件 │ └── index.ejs ├── static // 纯静态资源 ├── .babelrc ├── .travis.yml // Windows和Linux持续集成配置文件 ├── appveyor.yml // Mac持续集成配置文件 ├── package-lock.json ├── package.json // 包配置文件 └── README.md // 项目介绍
转载于:https://my.oschina.net/u/3667677/blog/3040223
相关文章推荐
- Electron开发实战之记账软件16——使用Docsify生成文档网站
- Electron开发实战之记账软件17——使用Lowdb存储数据
- iOS项目开发实战——使用三种方式实现页面跳转与参数传递(二)
- 响应式开发从原理到实战案例(八):使用bootstrap V3.3.7实现响应式页面
- Electron开发实战之记账软件6——自定义系统托盘菜单、闪烁
- 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能
- Electron开发实战之记账软件10——保证只有一个实例
- Electron开发实战之记账软件7——开机自动启动
- Electron开发实战之记账软件12——通过CI系统自动构建与发布
- Electron开发实战之记账软件19——通过协议唤起Electron应用
- Electron开发实战之记账软件14——自动更新
- Electron开发实战之记账软件18——备份、恢复、导入、导出
- iOS项目开发实战——使用代码实现页面跳转
- 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
- 实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI
- Electron开发实战之记账软件4——无边框、窗口关闭、最大最小化、隐藏右键菜单...
- Electron开发实战之记账软件9——禁用一些事件
- Electron开发实战之记账软件8——消息通知
- 响应式开发从原理到实战案例(七):使用bootstrap V2.3.2实现响应式页面
- Electron开发实战之记账软件13——添加Github徽章