From c2be8bbe006ef01697b00717c29b8b0e159ec25a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=92=83=E7=99=BD?= <18511759309@163.com> Date: Tue, 1 Jun 2021 19:49:57 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E7=BC=96=E8=BE=91=E5=99=A8=E4=B8=BB?= =?UTF-8?q?=E4=BD=93=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 + components/index.vue | 0 main.js | 0 package.json | 15 ++++ src/App.vue | 60 ++++++++++++++ src/assets/img/icon-bold.svg | 1 + src/assets/style/global.less | 31 +++++++ src/assets/style/iconfont.less | 57 +++++++++++++ src/assets/style/iconfont.ttf | Bin 0 -> 4276 bytes src/assets/style/variable.less | 4 + src/components/md-footer.vue | 27 ++++++ src/components/md-header.vue | 143 ++++++++++++++++++++++++++++++++ src/components/md-preview.vue | 26 ++++++ src/components/tool-button.vue | 27 ++++++ src/components/upload-files.vue | 31 +++++++ src/main.js | 21 +++++ webpack.config.js | 37 +++++++++ 17 files changed, 483 insertions(+) delete mode 100644 components/index.vue delete mode 100644 main.js create mode 100644 src/App.vue create mode 100644 src/assets/img/icon-bold.svg create mode 100644 src/assets/style/global.less create mode 100644 src/assets/style/iconfont.less create mode 100644 src/assets/style/iconfont.ttf create mode 100644 src/assets/style/variable.less create mode 100644 src/components/md-footer.vue create mode 100644 src/components/md-header.vue create mode 100644 src/components/md-preview.vue create mode 100644 src/components/tool-button.vue create mode 100644 src/components/upload-files.vue create mode 100644 src/main.js diff --git a/.gitignore b/.gitignore index 9ea23f0..1e3e341 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,5 @@ node_modules node_modules/* +dist +.vscode +*.css diff --git a/components/index.vue b/components/index.vue deleted file mode 100644 index e69de29..0000000 diff --git a/main.js b/main.js deleted file mode 100644 index e69de29..0000000 diff --git a/package.json b/package.json index 41a1ffe..f52d470 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,22 @@ { + "scripts": { + "dev": "webpack serve --mode=development", + "build": "webpack" + }, "devDependencies": { + "css-loader": "^5.2.6", + "less": "^4.1.1", + "less-loader": "^9.0.0", + "style-loader": "^2.0.0", + "url-loader": "^4.1.1", + "vue-loader": "^15.9.7", + "vue-template-compiler": "^2.6.12", "webpack": "^5.38.1", "webpack-cli": "^4.7.0", "webpack-dev-server": "^3.11.2" + }, + "dependencies": { + "marked": "^2.0.6", + "vue": "^2.6.12" } } diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..b492281 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,60 @@ + + + diff --git a/src/assets/img/icon-bold.svg b/src/assets/img/icon-bold.svg new file mode 100644 index 0000000..400b713 --- /dev/null +++ b/src/assets/img/icon-bold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/style/global.less b/src/assets/style/global.less new file mode 100644 index 0000000..b8e4449 --- /dev/null +++ b/src/assets/style/global.less @@ -0,0 +1,31 @@ +@import "./variable.less"; +@import "./iconfont.less"; + +* { + padding: 0; + margin: 0; +} + +html, +body, +#app { + padding: 0; + margin: 0; + min-height: 100vh; +} + +ul, +ol, +li, +input, +textarea { + list-style: none; + outline: none; + border: none; + padding: 0; +} + +img { + display: block; + margin: 0; +} diff --git a/src/assets/style/iconfont.less b/src/assets/style/iconfont.less new file mode 100644 index 0000000..d293a53 --- /dev/null +++ b/src/assets/style/iconfont.less @@ -0,0 +1,57 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1622541171105') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-baojiaquotation:before { + content: "\e63a"; +} + +.icon-renwu:before { + content: "\e63f"; +} + +.icon-youxuliebiao:before { + content: "\e6f0"; +} + +.icon-bold:before { + content: "\e678"; +} + +.icon-biaoge:before { + content: "\e615"; +} + +.icon-lianjie:before { + content: "\e645"; +} + +.icon-unorderedList:before { + content: "\e620"; +} + +.icon-code:before { + content: "\e625"; +} + +.icon-fullScreen:before { + content: "\e627"; +} + +.icon-italic:before { + content: "\eaef"; +} + +.icon-tupian:before { + content: "\e607"; +} + diff --git a/src/assets/style/iconfont.ttf b/src/assets/style/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..c38c2b749614c2a4ea8c5806f3f2b1553ae6172d GIT binary patch literal 4276 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 literal 0 HcmV?d00001 diff --git a/src/assets/style/variable.less b/src/assets/style/variable.less new file mode 100644 index 0000000..7e73aae --- /dev/null +++ b/src/assets/style/variable.less @@ -0,0 +1,4 @@ +:root { + --md-editor-theme-color: #dbdbdb; + --md-editor-theme-color-active: #409eff; +} diff --git a/src/components/md-footer.vue b/src/components/md-footer.vue new file mode 100644 index 0000000..0978a52 --- /dev/null +++ b/src/components/md-footer.vue @@ -0,0 +1,27 @@ + + + diff --git a/src/components/md-header.vue b/src/components/md-header.vue new file mode 100644 index 0000000..b7332f3 --- /dev/null +++ b/src/components/md-header.vue @@ -0,0 +1,143 @@ + + + diff --git a/src/components/md-preview.vue b/src/components/md-preview.vue new file mode 100644 index 0000000..f3354e6 --- /dev/null +++ b/src/components/md-preview.vue @@ -0,0 +1,26 @@ + + + diff --git a/src/components/tool-button.vue b/src/components/tool-button.vue new file mode 100644 index 0000000..e60cd26 --- /dev/null +++ b/src/components/tool-button.vue @@ -0,0 +1,27 @@ + + + diff --git a/src/components/upload-files.vue b/src/components/upload-files.vue new file mode 100644 index 0000000..4016d63 --- /dev/null +++ b/src/components/upload-files.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..c209aa1 --- /dev/null +++ b/src/main.js @@ -0,0 +1,21 @@ +import Vue from "vue"; +import App from "./App"; +import "@/assets/style/global.less"; + +function MdEditor(obj) { + const { el, onChange } = obj; + if (!el || !document.querySelector(el)) throw new Error("请指定容器"); + + new Vue({ + render: h => + h(App, { + on: { + change(val) { + onChange(val); + } + } + }) + }).$mount(el); +} + +window.MdEditor = MdEditor; diff --git a/webpack.config.js b/webpack.config.js index e69de29..a121d8a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -0,0 +1,37 @@ +const path = require("path"); +const VueLoaderPlugin = require("vue-loader/lib/plugin"); +module.exports = { + entry: path.resolve(__dirname, "./src/main.js"), + output: { + filename: "bundle.js", + path: path.resolve(__dirname, "dist") + }, + devServer: { + contentBase: path.resolve(__dirname, "dist"), + open: true + }, + resolve: { + extensions: [".js", ".vue", ".json"], + alias: { + "@": path.resolve(__dirname, "./src") + } + }, + module: { + rules: [ + { + test: /\.vue$/, + loader: "vue-loader" + }, + { + test: /\.less$/i, + use: ["style-loader", "css-loader", "less-loader"] + }, + + { + test: /\.ttf$/, + loader: "url-loader" + } + ] + }, + plugins: [new VueLoaderPlugin()] +}; -- GitLab