[DONT MERGE] fix vue-markdown #15
Conversation
| @@ -27,3 +27,4 @@ go.work | |||
| # Autogenerated files from goplus generate | |||
| # gop_autogen.go | |||
| dist/ | |||
| node_modules/ | |||
There was a problem hiding this comment.
跟修复问题无关，单纯避免本地 node_modules/ 被 git 识别
| @@ -1,9 +1,10 @@ | |||
| <!doctype html> | |||
| <meta charset="utf-8"> | |||
| <title>communityeditor demo</title> | |||
| <script type="module" src="./dist/goplusMarkdown.js"></script> | |||
| <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> | |||
There was a problem hiding this comment.
把 vue 的引入往上挪了，使不同 script 的引入顺序跟依赖关系一致（goplusMarkdown 的实现依赖 vue），不一定对代码的执行结果有影响
| @@ -1,9 +1,10 @@ | |||
| <!doctype html> | |||
| <meta charset="utf-8"> | |||
| <title>communityeditor demo</title> | |||
| <script type="module" src="./dist/goplusMarkdown.js"></script> | |||
| <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> | |||
| <script src="./markdown-vue/dist/goplusMarkdown.umd.cjs"></script> | |||
There was a problem hiding this comment.
- 这里本来的路径有问题，我不清楚是为什么
- 通过 module 的方式引入
goplusMarkdown.js是可以的，不过姿势有问题；这里用 umd 的版本会更简单一点
| <!-- <script src="F:\实习\七牛云\go for engineering\community\cmd\gopcomm\yap\markdown-vue\dist\water-marker.js"></script> --> | ||
| <link rel="stylesheet" href="./dist/style.css"> | ||
| <link rel="stylesheet" href="./markdown-vue/dist/style.css"> |
| @@ -30,6 +30,6 @@ | |||
| // message: 'Hello Vue!' | |||
| } | |||
| }, | |||
| // components: {goplusMarkdown: goplusMarkdown}, | |||
| components: { Cherry: window.goplusMarkdown.Cherry }, | |||
There was a problem hiding this comment.
- 注册
components是需要的 - 读取全局变量最好明确地通过
window.xxx，这样可以避免误解（阅读代码的人可能会误以为存在一个名为xxx的局部变量） - 基于
cmd/gopcomm/yap/markdown-vue/src/library.js的内容，这里使用window.goplusMarkdown.Cherry获得到Cherry这个自定义组件的定义
|
|
||
| <div id="app"> | ||
| <!-- <community-editor></community-editor> --> | ||
| <GoplusMarkdown></GoplusMarkdown> | ||
| <cherry></cherry> |
There was a problem hiding this comment.
在 HTML 模板中使用 vue 自定义组件应当使用 kebab case 而不是 pascal / camel case，详见 https://vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats
| @@ -0,0 +1,3 @@ | |||
| import Cherry from './components/Cherry.vue' | |||
There was a problem hiding this comment.
作为一个库跟作为一个项目是不一样的，库应当有明确的导出供使用方使用，这里新建一个文件（library.js）作为 markdown-vue 这个库的对外导出，library.js 这个 module 的 exports 也就是这个库对外的接口
因此在 cmd/gopcomm/yap/edit_yap.html 页面上我们通过 umd 格式引入这个库之后，对应的 window.goplusMarkdown 的值就是这里这个 module 的 exports（{ Cherry }）
如果上面说得不清楚，可以再去看下 https://vitejs.dev/guide/build.html#library-mode 这里说得还蛮详细的
| @@ -44,7 +44,7 @@ export default defineConfig({ | |||
| build: { | |||
| lib: { | |||
| // Could also be a dictionary or array of multiple entry points | |||
| entry: "src/main.js", | |||
| entry: "src/library.js", | |||
There was a problem hiding this comment.
上面提到，在构建库的时候，entry 对应的文件应当是这个库的导出
| @@ -55,7 +55,8 @@ export default defineConfig({ | |||
| output: { | |||
| // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量 | |||
| globals: { | |||
| waterMarker: "goplusMarkdown", | |||
| // TODO: naive-ui? | |||
| vue: "Vue", | |||
There was a problem hiding this comment.
这里需要去搞清楚 output.globals 这个配置项是做什么的，然后就能理解这里应该怎么配置了
另外需要考虑下 naive-ui 以及其他依赖是否需要配置到这里
No description provided.