electronic-vue имитирует работу облачного настольного приложения NetEase.

Vue.js Electron
electronic-vue имитирует работу облачного настольного приложения NetEase.

Введение

Как говорится на официальном сайте, electronic-vue — это шаблонный код для создания электронных приложений на основе vue. Разработка electronic-vue такая же, как и разработка Vue, за исключением того, что если есть особые потребности в изменении приложения, необходимо использовать связанный с электроном API.Данные в проекте взяты изздесь, Спасибо, что поделился. адрес проектаgit-адрес

electron

Electron разработан Github и использует HTML, CSS и JavaScript дляСоздавайте кроссплатформенные настольные приложенияБиблиотека с открытым исходным кодом . Electron делает это, объединяя Chromium и Node.js в одну среду выполнения и упаковывая ее в виде приложения для Mac, Windows и Linux. (извлеченоОфициальный сайт)

vue

Я не буду много говорить о vue,Веб-сайт

предварительный просмотр

  • Обновление 18.11.05

  • 18.11.10 Обновление

  • Обновление 18.11.12

Воспроизвести макет страницы временно

  • 19/02/18

Рефакторинг страницы воспроизведения

  • 19/02/19

Рефакторинг страницы, добавление страницы личной информации

  • 19/02/20

Некоторые оптимизации, рефакторинг страницы сведений о плейлисте

Ход проекта

может идти первымЭлектронный официальный сайтУзнайте о процессе его разработки и узнайте, на что он похож в целом.Вы можете взглянуть на его API, когда будете использовать его позже.

строить

npm install -g vue-cli  
vue init simulatedgreg/electron-vue ele-vue
cd ele-vue
npm install
npm run dev

В процессе установки просто нажмите Enter до упора.В середине будет время, чтобы выбрать плагин, а также установить его вручную позже.Здесь вы можете выбрать в соответствии с вашими потребностями.

electron-packager

Если вы только начинаете создавать электронные приложения или вам просто нужно создать простые исполняемые файлы, вам поможет электронный упаковщик.

electron-builder

Если вам нужен полноценный установщик, поддержка автоматических обновлений, сборка CI с использованием Travis CI и AppVeyor или автоматическая пересборка собственных модулей узлов, вам понадобится электрон-билдер.

или выберите в соответствии с вашими потребностями

После того, как они будут выполнены, вы можете разрабатывать проект так же, как Vue.

Внешний вид плагина

Интерфейсные компоненты пользовательского интерфейса также можно использовать в electronic-vue, взяв в качестве примера element-ui.

npm i element-ui -S
然后在main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

electron

一点自己的配置
mainWindow = new BrowserWindow({
    height: 670,//窗口高度
    width: 1000,//窗口宽度
    frame: false,//是否显示窗口边框
    resizable: false,//可否缩放
    movable: false//可否移动
  })
//设置不可移动以后
单独在组件中在设置某个区域可移动，添加
  -webkit-app-region: drag;
//自定义边框以后使用
  //组件中
  const { ipcRenderer: ipc } = require("electron");

  <span @click="send('close')">×</span>
  
  send(type) {
      ipc.send(type);
  },

  // src/main/index.js

  import { app, BrowserWindow, ipcMain } from 'electron'
  ipcMain.on('min', e=> mainWindow.minimize());
  ipcMain.on('max', e=> mainWindow.maximize());
  ipcMain.on('close', e=> mainWindow.minimize());

iconfont

Иконка элемента может не соответствовать нашим потребностям. В настоящее время мы можем использовать иконочный шрифт Али.
иди первыйiconfontВыберите нужную иконку на официальном сайте,

Возможность добавить в свой проектЗатем вы можете выбрать генерацию в своем собственном проекте, скопировать код в index.ejs проекта electronic-vue и обычно ссылаться на css.<link rel="stylesheet" href="//at.alicdn.com/t/font_883876_bfzwywhpal.css">использовать<i class="iconfont icon-play-circle"></i>

Глобальное внедрение scss

```
新建 src/renderer/globals.scss
$brand-primary: blue;

然后在 .electron-vue/webpack.renderer.config.js 里编辑 vue-loader 的配置
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/renderer/globals"',
scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/renderer/globals"',

最后修改
{
    test: /\.scss$/,
    use: ['vue-style-loader', 'css-loader', {
      loader: 'sass-loader',
      options: {
        data: '@import "./src/renderer/globals";'
      }
    }]
  },
别忘了";"
```

Бэйл

Использовать напрямуюnpm run buildВы можете упаковать его. Если вы хотите ориентироваться на разные платформы, добавьте необходимые параметры. Упакованный установочный пакет находится в папке сборки проекта.

Наконец

Интерфейс был разработан за два дня. . Поэтому некоторые стили не очень красивы. Есть проблема, что после упаковки не отображается iconfont.Эта проблема будет решена позже.Самый прямой способ-загрузить его на локальную ссылку.

Категории