xiguaxigua · lq782655835 · Apr 8, 2020 · Apr 9, 2020 · Apr 9, 2020 · Apr 14, 2020
diff --git a/README.md b/README.md
@@ -1,58 +1,37 @@
-# vuepress-plugin-demo-block
+# vuepress-plugin-leo-demo-block
 
-![download](https://img.shields.io/npm/dm/vuepress-plugin-demo-block.svg)
-[![version](https://img.shields.io/npm/v/vuepress-plugin-demo-block.svg)](https://www.npmjs.com/package/vuepress-plugin-demo-block)
-![language](https://img.shields.io/badge/language-javascript-yellow.svg)
-![License](https://img.shields.io/badge/license-MIT-000000.svg)
-[![](https://img.shields.io/circleci/project/github/xiguaxigua/vuepress-plugin-demo-block/master.svg)](https://circleci.com/gh/xiguaxigua/vuepress-plugin-demo-block)
+扩展markdown语法，可动态插件Vue代码，使得一边预览，一边查看源代码。特别适合配合VuePress框架进行组件库文档书写。
 
-## Introduction
+该插件实际项目案例预览可看：[vuele - 基于ElementUI的业务组件库](https://lq782655835.github.io/vuele/)
 
-The Demo Block is used to help you add vue, react or native js examples when writing a document. When writing component documentation, you usually need to add some related examples to the document. These examples can usually be implemented using JSFiddle or Codepen's Iframe, but the maintenance cost will be relatively high. You can quickly add examples by using Demo Block, and it is very convenient to modify.
+## 介绍
 
-> To show how to write the example, the three points used to mark the end of the code section are separated by spaces, and the spaces need to be removed when used.
+版本fork自 [vuepress-plugin-demo-block](https://github.com/xiguaxigua/vuepress-plugin-demo-block)，跟原版比较，解决一些实际场景中遇到的bug以及易用性问题。主要表现在以下：
 
-![demo](./demo.png)
+### 1. 易用性
 
-## Feature
+原版书写markdown，必需写template/script/style标签，不得省略。而在实际场景中缺省script标签是常有的场景，所以此处进行了默认处理。提的pr在[这里](https://github.com/xiguaxigua/vuepress-plugin-demo-block/pull/23).
 
-- Elegant display code and examples
-- Support vue, react and native js
-- Support codepen and jsfiddle online demo
+### 2. bugfix
 
-## Install
+原版本需要引入额外的vue包，配合其他vuepress插件/主题时会报错，表现不正常（这是fork的主要原因），故此该版本解决这些问题，同时在基础上进行丰富。
 
-### install vuepress
-
-Reference official document [Vuepress](https://vuepress.vuejs.org)
-
-### install plugin
+## 安装
 
 ```
-npm i vuepress-plugin-demo-block --save-dev
+npm i vuepress-plugin-leo-demo-block -D
 ```
 
-### set vuepress config
+## 使用
 
-config.js
+在项目.vuepress/config.js中加入以下配置：
 ```js
 module.exports = {
-  head: [
-    ['script', { src: 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js' }],
-    ['script', { src: 'https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js' }],
-    ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
-    ['script', { src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js' }],
-  ],
-  plugins: [
-    'demo-block'
-  ]
+  plugins: ['leo-demo-block']
 }
-
 ```
 
-## Start
-
-Write the following code in the Markdown file:
+接着就可以扩展markdown语法了：
 
 ### Vue Demo
 
@@ -70,51 +49,11 @@ export default {
 <style>
 .box-vue { color: red; }
 </style>
-` ` `  <= delete spaces here
+\```
 :::
 ```
 
-### React Demo
-```js
-::: demo [react]
-```js
-export default class App extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = { message: 'Hello World' }
-  }
-  render () {
-    return (
-      <div className="box-react">
-        React {this.state.message}
-      </div>
-    )
-  }
-}
-App.__style__ = `
-  .box-react { color: red; }   
-`
-` ` `  <= delete spaces here
-:::
-```
+## 预览
 
-### VanillaJs Demo
+![image](https://user-images.githubusercontent.com/6310131/79427654-9b74e380-7ff7-11ea-83f5-d4af5e3c3aed.png)
 
-```html
-::: demo [vanilla]
-```html
-<html>
-  <div id="vanilla-box"></div>
-</html>
-<script>
-  var box = document.getElementById('vanilla-box')
-  box.innerHTML = 'Hello World!'
-</script>
-<style>
-#vanilla-box {
-  color: red;
-}
-</style>
-` ` `
-:::
-```
diff --git a/deploy.sh b/deploy.sh
@@ -10,7 +10,7 @@ git init
 git add -A
 git commit -m 'deploy docs'
 
-git push -f git@github.com:xiguaxigua/vuepress-plugin-demo-block.git master:gh-pages
+git push -f git@github.com:lq782655835/vuepress-plugin-demo-block.git master:gh-pages
 
 cd -
 rm -rf docs/.vuepress/dist
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -14,7 +14,7 @@ module.exports = {
   ga: 'UA-122325348-1',
   serviceWorker: true,
   themeConfig: {
-    repo: 'xiguaxigua/vuepress-plugin-demo-block',
+    repo: 'lq782655835/vuepress-plugin-demo-block',
     editLinks: true,
     docsDir: 'docs',
     locales: {
@@ -54,7 +54,7 @@ module.exports = {
   head: [
     ['script', { src: 'https://cdn.jsdelivr.net/npm/react@16.6.3/umd/react.production.min.js' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/react-dom@16.6.3/umd/react-dom.production.min.js' }],
-    ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
+    // ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/numerify/lib/index.umd.min.js' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js' }],
@@ -64,11 +64,7 @@ module.exports = {
     ['script', { src: '/bt.js' }],
   ],
   plugins: [
-    [require('../../lib/index.js'), {
-      settings: {
-        codepen: true
-      }
-    }]
+    require('../../lib/index.js')
   ]
 }
 function genSidebarConfig (title) {

diff --git a/docs/README.md b/docs/README.md
@@ -15,7 +15,7 @@ Reference official document [Vuepress](https://vuepress.vuejs.org)
 ### install plugin
 
 ```
-npm i vuepress-plugin-demo-block --save-dev
+npm i vuepress-plugin-leo-demo-block --save-dev
 ```
 
 ### set vuepress config
@@ -26,15 +26,17 @@ module.exports = {
   head: [
     ['script', { src: 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js' }],
-    ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
+    // ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js' }],
   ],
-  plugins: [
-    'demo-block'
-  ]
+  plugins: [ 'demo-block' ]
 }
 ```
 
+:::tip
+auto import vue from vuepress，do not import vue again from head
+:::
+
 ## Start
 
 Write the following code in the Markdown file:

diff --git a/docs/zh/README.md b/docs/zh/README.md
@@ -15,7 +15,7 @@ Demo Block 用于帮助你在编写文档时增加 vue ,react, 原生js 示例
 ### 安装插件
 
 ```
-npm i vuepress-plugin-demo-block
+npm i vuepress-plugin-leo-demo-block
 ```
 
 ### 配置 vuepress config
@@ -26,15 +26,17 @@ module.exports = {
   head: [
     ['script', { src: 'https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js' }],
-    ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
+    // ['script', { src: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js' }],
     ['script', { src: 'https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js' }],
   ],
-  plugins: [
-    'demo-block'
-  ]
+  plugins: ['demo-block']
 }
 ```
 
+:::tip
+vue自动引入自vuepress，不需要再手动引入
+:::
+
 ## 开始使用
 
 在 Markdown 文件中编写以下代码：

diff --git a/lib/clientRootMixin.js b/lib/clientRootMixin.js
@@ -1,3 +1,5 @@
+import Vue from 'vue';
+
 function styleInject(css, ref) {
   if (ref === void 0) ref = {};
   var insertAt = ref.insertAt;
@@ -122,7 +124,7 @@ var getVueDetail = function getVueDetail(code, config) {
   var result = {
     css: cssBlock && cssBlock[1].replace(/^\n|\n$/g, ''),
     html: htmlBlock && htmlBlock[1].replace(/^\n|\n$/g, ''),
-    js: jsBlock && jsBlock[1].replace(/^\n|\n$/g, ''),
+    js: jsBlock && jsBlock[1] && jsBlock[1].replace(/^\n|\n$/g, '') || 'export default {}',
     jsLib: config.jsLib || [],
     cssLib: config.cssLib || []
   };
@@ -140,7 +142,7 @@ var getVanillaDetail = function getVanillaDetail(code, config) {
   var result = {
     css: cssBlock && cssBlock[1].replace(/^\n|\n$/g, ''),
     html: htmlBlock && htmlBlock[1].replace(/^\n|\n$/g, ''),
-    js: jsBlock && jsBlock[1].replace(/^\n|\n$/g, ''),
+    js: jsBlock && jsBlock[1] && jsBlock[1].replace(/^\n|\n$/g, '') || 'export default {}',
     jsLib: config.jsLib || [],
     cssLib: config.cssLib || []
   };

diff --git a/lib/index.js b/lib/index.js
@@ -17,6 +17,9 @@ module.exports = function (options, context) {
     define: {
       SETTINGS: options.settings || {}
     },
+    chainWebpack: function chainWebpack(config) {
+      config.resolve.alias.set('vue', 'vue/dist/vue.common.js');
+    },
     clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js'),
     extendMarkdown: function extendMarkdown(md) {
       md.use(require('markdown-it-container'), 'demo', {

diff --git a/package.json b/package.json
@@ -1,32 +1,34 @@
 {
-  "name": "vuepress-plugin-demo-block",
-  "version": "0.7.2",
+  "name": "vuepress-plugin-leo-demo-block",
+  "version": "0.1.1",
   "description": "demo block for vuepress both support vue and react",
   "main": "lib/index.js",
   "scripts": {
     "dev": "vuepress dev docs",
     "build": "vuepress build docs",
     "comp": "rollup -c rollup.config.js",
-    "watch": "rollup -wc rollup.config.js"
+    "watch": "rollup -wc rollup.config.js",
+    "gh-pages": "npm run build && gh-pages -d docs/.vuepress/dist"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/xiguaxigua/vuepress-plugin-demo-block.git"
+    "url": "git+https://github.com/lq782655835/vuepress-plugin-demo-block.git"
   },
   "keywords": [
     "vuepress-plugin",
     "demo-block"
   ],
-  "author": "xiguaxigua",
+  "author": "springleo",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/xiguaxigua/vuepress-plugin-demo-block/issues"
+    "url": "https://github.com/lq782655835/vuepress-plugin-demo-block/issues"
   },
-  "homepage": "https://github.com/xiguaxigua/vuepress-plugin-demo-block#readme",
+  "homepage": "https://github.com/lq782655835/vuepress-plugin-demo-block#readme",
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/preset-env": "^7.2.3",
     "autoprefixer": "^9.4.5",
+    "gh-pages": "^2.2.0",
     "less": "^3.9.0",
     "markdown-it-container": "^2.0.0",
     "rollup": "^1.0.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -21,6 +21,7 @@ export default [
       file: "lib/clientRootMixin.js",
       format: "esm"
     },
+    external: ['vue'],
     plugins: [
       postcss({ plugins: [autoprefixer] }),
       babel(),

diff --git a/src/common/utils.js b/src/common/utils.js
@@ -71,7 +71,7 @@ export const getVueDetail = (code, config) => {
   const result = {
     css: cssBlock && cssBlock[1].replace(/^\n|\n$/g, ''),
     html: htmlBlock && htmlBlock[1].replace(/^\n|\n$/g, ''),
-    js: jsBlock && jsBlock[1].replace(/^\n|\n$/g, ''),
+    js: jsBlock && jsBlock[1] && jsBlock[1].replace(/^\n|\n$/g, '') || 'export default {}',
     jsLib: config.jsLib || [],
     cssLib: config.cssLib || []
   }
@@ -90,7 +90,7 @@ export const getVanillaDetail = (code, config) => {
   const result = {
     css: cssBlock && cssBlock[1].replace(/^\n|\n$/g, ''),
     html: htmlBlock && htmlBlock[1].replace(/^\n|\n$/g, ''),
-    js: jsBlock && jsBlock[1].replace(/^\n|\n$/g, ''),
+    js: jsBlock && jsBlock[1] && jsBlock[1].replace(/^\n|\n$/g, '') || 'export default {}',
     jsLib: config.jsLib || [],
     cssLib: config.cssLib || []
   }

diff --git a/src/index.js b/src/index.js
@@ -14,6 +14,9 @@ module.exports = (options, context) => ({
   define: {
     SETTINGS: options.settings || {}
   },
+  chainWebpack(config) {
+    config.resolve.alias.set('vue', 'vue/dist/vue.common.js')
+  },
   clientRootMixin: path.resolve(__dirname, 'clientRootMixin.js'),
   extendMarkdown: md => {
     md.use(require('markdown-it-container'), 'demo', {

diff --git a/src/main.js b/src/main.js
@@ -20,6 +20,7 @@ import {
 } from './common/utils';
 import codepen from './online/codepen';
 import jsfiddle from './online/jsfiddle';
+import Vue from 'vue'
 
 export default function webController() {
   const nodes = $(document, CLASS_WRAPPER, true);