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

Это первый проект по сертификации визуализации данных от FreeCodeCamp. FCC рекомендует использовать для этого ReactJS. Но я использовал VueJS в этом проекте, потому что это было проще и быстро справлялось. Я использовал Bootstrap для стилизации и создания адаптивного дизайна.

Посмотреть проект вживую можно здесь.

Это первый раз, когда я использую VueJS самостоятельно без помощи какого-либо учебника. В этой статье я постараюсь подробно объяснить, как создать это приложение.

1. Строительные леса - настройка приложения

Инструмент Vue CLI очень полезен для настройки приложения. Он автоматически создает package.json, .gitignore, assets, index.html и другие необходимые файлы для проекта.

Сначала установите vue и vue-cli:

npm install --save vue

npm install --save vue-cli

Инициализируйте проект, используя простой шаблон webpack.

vue init webpack-simple md-viewer и следуйте инструкциям

После создания проекта

cd md-viewer
npm install

Вы можете увидеть проект, запущенный на локальном сервере, используя

npm run dev

Преимущество использования vue-cli с шаблоном webpack заключается в том, что он автоматически перезагружается после изменений в коде.

Теперь установите модуль npm, помеченный, который представляет собой библиотеку синтаксического анализатора уценки.

npm install --save marked

2. Создание компонентов Vue

Компоненты Vue можно использовать повторно, что делает наш код СУХИМ. Для этого проекта я создал 3 компонента - заголовок, основное приложение и нижний колонтитул. Верхний и нижний колонтитулы также можно использовать для других проектов.

Компоненты верхнего и нижнего колонтитула - это простые шаблоны, содержащие элементы верхнего и нижнего колонтитула соответственно. Обратитесь к репо проекта, чтобы увидеть шаблоны. Они очень простые, поэтому я не буду вдаваться в подробности.

Чтобы использовать шаблоны верхнего и нижнего колонтитула в главном App.vue, импортируйте шаблоны из script части App.vue—

import header from './header.vue'
import footer from './footer.vue'

Затем экспортируйте их как компоненты для использования в шаблоне приложения -

export default {
  name: 'app',
  data () {
    //data objects here
  },
  computed: {
     //methods to modify the data objects here, dealt with later
  },
  components: {
    'app-header': header,
    'app-footer': footer
  }
}

Теперь мы можем использовать компоненты app-header и app-footer в шаблоне App.vue:

<template>
  <div id="app">
   <app-header></app-header>
   <div class = "container">
     <!--The main App-->
   </div>
   <app-footer></app-footer>
  </div>
</template>

3. Основные функции приложения.

Шаблон приложения состоит из двух div элементов - одной текстовой области для ввода текста и одной для отображения предварительного просмотра. Директива v-model используется для хранения текста, введенного в textarea.

Ключевой частью этого проекта является преобразование текста уценки в форматированный предварительный просмотр с использованием отмеченной библиотеки. В свойстве computed компонента App выполните функцию преобразования введенного текста (который сохраняется в переменной с помощью v-модели):

computed: {
 previewText() {
  marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: true,
    pedantic: false,
    sanitize: true,
    smartLists: true,
    smartypants: false
  });
  return marked(this.md_text)
 }
}

previewTextсодержит проанализированный текст HTML. Затем он отображается в предварительном просмотре div с использованием директивы v-html. Эта директива интерпретирует необработанный текст HTML и отображает форматированный текст.

4. Демо-версия приложения

Репозиторий проекта находится здесь.

Ведется прямой эфир на всплеске здесь.

В итоге проект выглядит так -