先來張圖

1.爲何用Vuetify？

https://vuetifyjs.com/zh-Hans/getting-started/quick-start前端

Vuetify徹底根據Material Design規範開發。每一個組件都是手工製做的，作桌面端很是好看。vuetify是一個漸進式的框架，試圖推進前端開發發展到一個新的水平。Vuetify 支持SSR（服務端渲染）,SPA（單頁應用程序）,PWA（漸進式Web應用程序）和標準HTML頁面。vue

官網主要介紹的是使用vue cli3,但咱們還在使用vue cli2，因此手動引入。webpack

2.引入Vuetify

npm install vuetify --save // 安裝依賴

在src/renderer/main.js中引入git

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 // 項目介紹