Code repository: https://github.com/hilanmiao/LanMiaoDesktop
Take a picture first
1. Why use Vuetify?
https://vuetifyjs.com/zh-Hans/getting-started/quick-start
Vuetify is developed entirely according to the Material Design specification. Every component is handcrafted and looks great on the desktop. vuetify is a progressive framework that tries to push front-end development to the next level. Vuetify supports SSR (Server Side Rendering), SPA (Single Page Application), PWA (Progressive Web Application) and standard HTML pages.
The official website mainly introduces the use of vue cli3, but we are still using vue cli2, so we introduce it manually.
2. Introduce Vuetify
npm install vuetify --save // 安装依赖
Introduced in src/renderer/main.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' // 引入Vuetify的css文件
Vue.use(Vuetify)
3. Introduce Material Design icons
npm install material-design-icons-iconfont --save // 安装依赖
import 'material-design-icons-iconfont/dist/material-design-icons.css' // 引入Material Desgin Icon的css文件
4. Directory structure
├── .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 // 项目介绍
{{o.name}}
{{m.name}}