[Cree un editor Markdown simple usando Vue y Electron]

Electron es un marco de desarrollo de aplicaciones de escritorio popular, mientras que Vue es un marco de JavaScript popular. La combinación de estos dos marcos puede crear potentes aplicaciones de escritorio. En este artículo, crearemos una aplicación de edición Markdown sencilla utilizando Vue y Electron.

1. Instalar dependencias

Ejecute el siguiente comando en el directorio raíz del proyecto para instalar las dependencias requeridas:

npm install vue-electron marked --save

Entre ellos, vue-electron es una biblioteca puente entre Vue y Electron, y marcado es una biblioteca que se utiliza para convertir texto Markdown a HTML.

2. Configurar electrón

Cree un archivo llamado main.js en el directorio raíz del proyecto. Este archivo será nuestro proceso principal de Electron. En este archivo necesitamos agregar el siguiente código:

const {
    
     app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
    
    
  // 创建浏览器窗口
  const win = new BrowserWindow({
    
    
    width: 800,
    height: 600,
    webPreferences: {
    
    
      nodeIntegration: true      // 将contextIsolation设置为false，以便我们可以在渲染进程中使用Vue
      contextIsolation: false,
      // 允许使用remote模块
      enableRemoteModule: true,
    }
  })

  // 加载应用的index.html
  win.loadFile('dist/index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(() => {
    
    
  createWindow()
})

// 当所有窗口都关闭时退出应用程序
app.on('window-all-closed', () => {
    
    
  if (process.platform !== 'darwin') {
    
    
    app.quit()
  }
})

Este código creará una nueva ventana de Electron y cargará el archivo index.html de nuestro proyecto Vue. También habilitamos herramientas de desarrollador para facilitar la depuración.

3. Crear componente de editor Markdown

Cree un archivo llamado MarkdownEditor.vue en el directorio src/components. Este archivo será nuestro componente del editor Markdown. En este componente necesitamos agregar el siguiente código:

<template>
  <div>
    <textarea v-model="text" rows="10" cols="50"></textarea>
       <div v-html="markedText"></div>
  </div>
</template>

<script>
import marked from 'marked'

export default {
  data() {
    return {
      text: '',
      markedText: ''
    }
  },
  watch: {
    text() {
      this.markedText = marked(this.text)
    }
  }
}
</script>

<style>
textarea {
  font-family: Arial;
  font-size: 18px;
  padding: 10px;
  border: 1px solid #ccc;
}

div {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}
</style>

Este código crea un componente del editor Markdown que contiene un elemento de área de texto para ingresar y editar texto Markdown. Usamos la biblioteca marcada para convertir texto Markdown a HTML y usamos la directiva v-html de Vue para mostrar el HTML.

4. Usando el componente del editor Markdown en App.vue

Agregue el siguiente código en src/App.vue:

<template>
  <div id="app">
    <MarkdownEditor></MarkdownEditor>
  </div>
</template>

<script>
import MarkdownEditor from './components/MarkdownEditor.vue'

export default {
  name: 'App',
  components: {
    MarkdownEditor
  }
}
</script>

Este código agrega nuestro componente de editor Markdown a la aplicación Vue.

5. Construye la aplicación

Ahora podemos construir nuestra aplicación. Ejecute el siguiente comando en la terminal:

npm run build

Esto generará un directorio dist que contiene los archivos de nuestra aplicación.

6. Ejecutar aplicación

Finalmente, podemos ejecutar nuestra aplicación. Ejecute el siguiente comando en la terminal:

npm run electron:serve

Esto iniciará la aplicación Electron y mostrará nuestra aplicación Vue.

Resumir:

En este artículo, aprendimos cómo crear una aplicación de edición Markdown sencilla utilizando Vue y Electron. Creamos un proyecto Vue y agregamos el archivo de configuración de Electron. También creamos un componente de editor de Markdown para ingresar y editar texto de Markdown. Este componente utiliza el enlace de datos bidireccional de Vue para lograr actualizaciones del texto en tiempo real, usa la biblioteca marcada para convertir el texto Markdown a HTML y luego usa la directiva v-html de Vue para mostrar el HTML. Finalmente, agregamos el componente del editor Markdown a nuestra aplicación Vue y creamos y ejecutamos nuestra aplicación. Este sencillo ejemplo del editor Markdown puede ayudarle a comprender cómo combinar Vue y Electron para crear una potente aplicación de escritorio. Si desea ampliar esta aplicación, puede agregar más componentes de Vue y funcionalidad de Electron y empaquetarlos en una aplicación distribuible.