vue-parsing-url-contentn

This is a simple URL parsing component based on Cheerio and dompurify. Users can try to create a better component to share on their own.

Project install

npm i vue-parsing-url-contentn

Global usage examples

import ParsingURLContent from "vue-parsing-url-contentn";
Vue.use(ParsingURLContent);

<template>
  <div>
    <ParsingURLContent :url="xxx" />
  </div>
</template>

Example of standalone use

<template>
  <div class="container">
    <h1>parsedContent</h1>
    <p v-html="editor"></p>
    <input type="text" v-model="editor" placeholder="Enter webpage URL">
    <ParsingURLContent :url="editor" @parsedContent="parsedContent"></ParsingURLContent>
  </div>
</template>
<script>

import ParsingURLContent from "vue-parsing-url-contentn";
export default {
  components: {
    ParsingURLContent
  },
  data () {
    return {
      editor: null,
      testUrls: [
        'https://www.npmjs.com/package/gif',
        'https://webpack.js.org/concepts/#loaders',
      ]
    }
  },
  mounted () {

    this.editor = this.testUrls[0]

  },
  methods: {
    parsedContent (content) {
      // console.log(content)
    }
  },
}
</script>
<style scoped></style>

JS function

 import { ParsURLJS } from "vue-parsing-url-contentn";
    ParsURLJS(this.editor).then(res => {
    console.log(res) ;//{response , parseContent}
 });

使用提醒

（Resolve cross domain issues on their own）
1.按照代码示例进行编写 传入正确的url 即可
2.该组件可能会提示配置loader的错误  需要在vue.config.js配置 示例
 // 添加对htmlparser2模块的处理
    config.module
      .rule("htmlparser2")
      .test(/htmlparser2[\\/]lib[\\/]esm[\\/]index\.js$/)
      .use("babel-loader")
      .loader("babel-loader")
      .options({
        presets: ["@babel/preset-env"],
      });

    // 添加对parse5模块的处理
    config.module
      .rule("parse5")
      .test(/parse5[\\/]dist[\\/]index\.js$/)
      .use("babel-loader")
      .loader("babel-loader")
      .options({
        presets: ["@babel/preset-env"],
      });

      babel.config.js :
      module.exports = {
        presets: ["@vue/cli-plugin-babel/preset"],
      };