Блог

Главная - Вопросы по программированию - Как применить модуль vue без CDN к html

Как применить модуль vue без CDN к html

#html #node.js #vue.js

#HTML #node.js #vue.js

Вопрос:

Я хочу добавить страницу, состоящую из Vue, в проект, реализованный на JavaScript. Говорят, что вы можете добавить его, используя адрес CDN, но функция Vue, которую я хочу использовать, похоже, не поддерживает ее. Мы хотим использовать элемент-tiptap .

Это адрес функции, которую вы хотите использовать.

https://github.com/Leecason/element-tiptap

Указанные выше адреса не предоставляют CDN.

Вам нужно использовать element-ui и установить element-tiptap. Но я не знаю, как это реализовать с помощью установки npm.

Приведенный ниже код является базовым примером настройки el-tiptap.

App.vue

 <template>
<div id="app">
<header>
  <img
    src="https://github.com/Leecason/element-tiptap/raw/master/examples/assets/logo_for_github.png?raw=true"
    height="50"
    class="logo"
  >
  
  <iframe
    src="https://ghbtns.com/github-btn.html?user=Leecasonamp;repo=element-tiptapamp;type=staramp;count=true"
    frameborder="0"
    scrolling="0"
    width="95"
    height="20px"
  ></iframe>
</header>

<Editor/>
</div>
</template>

<script>
import Editor from "./components/Editor";

export default {
    name: "App",
    components: {
        Editor
    }
};
</script>

<style>
    #app {
     font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
     color: #2c3e50;
     margin: 40px;
    }

header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    width: 100%;
}
</style>

Editor.vue

 <template>
  <el-tiptap :extensions="extensions" :content="content" placeholder="Write something ..."/>
</template>

<script>
import {
  // all extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Italic,
  Strike,
  Underline,
  Link,
  Image,
  Blockquote,
  ListItem,
  BulletList, // use with ListItem
  OrderedList, // use with ListItem
  TodoItem,
  TodoList, // use with TodoItem
  TextAlign,
  Indent,
  HorizontalRule,
  HardBreak,
  History
} from "element-tiptap";

import codemirror from "codemirror";
import "codemirror/lib/codemirror.css"; // import base style
import "codemirror/mode/xml/xml.js"; // language
import "codemirror/addon/selection/active-line.js"; // require active-line.js
import "codemirror/addon/edit/closetag.js"; // autoCloseTags

export default {
  name: "Editor",

  data: () => ({
    extensions: [
      new Doc(),
      new Text(),
      new Paragraph(),
      new Heading({ level: 5 }),
      new Bold({ bubble: true }),
      new Underline({ bubble: true }),
      new Italic({ bubble: true }),
      new Strike({ bubble: true }),
      new Link({ bubble: true }),
      new Image(),
      new Blockquote(),
      new TextAlign(),
      new ListItem(),
      new BulletList({ bubble: true }),
      new OrderedList({ bubble: true }),
      new TodoItem(),
      new TodoList(),
      new Indent(),
      new HardBreak(),
      new HorizontalRule({ bubble: true }),
      new Fullscreen(),
      new CodeView({
        codemirror,
        codemirrorOptions: {
          styleActiveLine: true,
          autoCloseTags: true
        }
      }),
      new History()
    ],

    content: ``
  })
};
</script>

main.js

 import Vue from 'vue';
import App from './App.vue';

import ElementUI from 'element-ui';
import { ElementTiptapPlugin } from 'element-tiptap';
import 'element-tiptap/lib/index.css';

Vue.use(ElementUI);
Vue.use(ElementTiptapPlugin, {
  // lang: "ko",
  // spellcheck: false,
});

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount('#app');

И я хочу реализовать вышеуказанную функцию здесь.

editor.ejs

 <html> 
<head> 
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #2c3e50;
      margin: 40px;
    }
    
    header {
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      width: 100%;
    }
    </style>
    
</head> 
<body> 
<div id="app">
    <header>
      <img
        src="https://github.com/Leecason/element-tiptap/raw/master/examples/assets/logo_for_github.png?raw=true"
        height="50"
        class="logo"
      >
      
      <iframe
        src="https://ghbtns.com/github-btn.html?user=Leecasonamp;repo=element-tiptapamp;type=staramp;count=true"
        frameborder="0"
        scrolling="0"
        width="95"
        height="20px"
      ></iframe>
    </header>
    <div>
        <!-- I would like to use this part. -->
        <el-tiptap :extensions="extensions" :content="content" placeholder="Write something ..."/>    
    </div>
  </div>
</body> 
<script> 
        //Something
</script> 
</html>

Я хочу, чтобы это работало так

введите описание изображения здесь

Как я должен это реализовать? Заранее благодарю вас за любезный ответ.

Комментарии:

1. Большинство библиотек в npm имеют доступные версии cdn. Просто найдите <имя_библиотеки> cdn, убедитесь, что он правильный, и используйте его. Если нужная вам библиотека является проектом Vue, вы также можете клонировать ее и использовать vue-cli для создания собственной версии, которую вы можете разместить самостоятельно. cli.vuejs.org/guide/build-targets.html

2. @Chirag Ravindra Подсказка по указанному выше адресу отличается от подсказки элемента. библиотека element-tiptap, похоже, не предоставляет CDN

3. вы правы. Вам нужен element-tiptap только в том случае, если вы уже используете element (включение элемента для использования tip-tap может быть излишним). Если он вам необходим, вы можете самостоятельно создать версию из кода, используя vue-cli. Кроме того, приведенные здесь примеры являются официальными примерами — это поможет нам понять вашу настройку, если вы можете поделиться своим кодом, который пытается воспроизвести этот сценарий минимально (например, в codepen или jsbin)

4. @Chirag Ravindra спасибо за ваш ответ. Могу ли я использовать vue с этим cdn в существующем html?