🚀 feat: Init monorepo

.eslintignore

@@ -0,0 +1,5 @@
+build
+dist
+tmp
+node_modules
+coverage

.eslintrc.js

@@ -0,0 +1,82 @@
+module.exports = {
+  'root': true,
+  'env': {
+    'node': true,
+    'es6': true,
+    'browser': true,
+    'jest': true
+  },
+  'globals': {
+    'defineProps': 'readonly',
+    'defineEmits': 'readonly',
+    'defineExpose': 'readonly',
+    'withDefaults': 'readonly'
+  },
+  'extends': [
+    'eslint:recommended',
+    'plugin:vue/base',
+    'plugin:vue/vue3-essential',
+    'plugin:vue/vue3-strongly-recommended',
+    'plugin:vue/vue3-recommended'
+  ],
+  'parserOptions': {
+    'requireConfigFile': false,
+    'ecmaFeatures': {
+      'legacyDecorators': true
+    },
+    'parser': '@babel/eslint-parser'
+  },
+  'rules': {
+    'vue/multi-word-component-names': 0,
+    'vue/no-unused-components': 1,
+    'vue/no-mutating-props': 0,
+    'vue/script-setup-uses-vars': 'error',
+    'vue/v-on-event-hyphenation': ['warn', 'always', {
+      'autofix': true
+    }],
+    'vue/valid-template-root': 'off',
+    'vue/no-multiple-template-root': 'off',
+    'vue/html-self-closing': ['error', {
+      'html': {
+        'void': 'never',
+        'normal': 'never',
+        'component': 'always'
+      },
+      'svg': 'always',
+      'math': 'always'
+    }],
+    'no-unused-vars': 1,
+    'no-undef': 1,
+    'no-var': 'error',
+    'no-trailing-spaces': 2,
+    'comma-style': ['error', 'last'],
+    'comma-dangle': ['error', 'never'],
+    'no-irregular-whitespace': 2,
+    'no-multi-spaces': 1,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'eol-last': 2,
+    'quotes': ['error', 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'prefer-const': 2,
+    'camelcase': ['error', {
+      'properties': 'never'
+    }],
+    'indent': ['error', 2, {
+      'SwitchCase': 1
+    }],
+    'semi': ['error', 'never'],
+    'space-before-function-paren': 'error'
+  },
+  'settings': {
+    'import/parsers': {
+      'espree': [
+        '.js',
+        '.jsx'
+      ]
+    }
+  }
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -0,0 +1,19 @@
+# Docx Preview Demo
+
+* 基于 docx-preview + Vue 3 的 word 文档在线预览示例
+
+## 1、安装
+
+```
+pnpm install
+```
+
+## 2、运行
+
+```
+pnpm start
+```
+
+## 3、访问
+
+http://localhost:4500/

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ]
+}

jsconfig.json

@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+  },
+  "exclude": ["node_modules"]
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "docx-preview-demo",
+  "version": "1.0.0",
+  "description": "Docx Preview Demo",
+  "scripts": {
+    "start": "concurrently 'pnpm frontend' 'pnpm backend'",
+    "frontend": "pnpm --filter \"frontend\" dev",
+    "backend": "pnpm --filter \"backend\" dev"
+  },
+  "author": "Wisdom",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.17.9",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "concurrently": "^7.1.0",
+    "eslint": "^8.14.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^8.7.1"
+  }
+}

packages/backend/index.js

@@ -0,0 +1,33 @@
+const fs = require('fs')
+const path = require('path')
+
+const express = require('express')
+const app = express()
+const port = 4000
+
+const docPath = path.resolve(process.cwd(), '..', 'doc')
+console.log('docPath', docPath)
+
+const fileName = '职场新人必读书5本推荐.docx'
+
+app.get('/getDoc', (req, res) => {
+
+  const docxUrl = `${docPath}/${fileName}`
+
+  res.header('Access-Control-Allow-Origin', '*')
+  res.header('Access-Control-Expose-Headers', '*')
+
+  res.writeHead(200, {
+    'Content-Disposition': 'attachment; filename=' + encodeURI(fileName),
+    'Content-Type': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+  })
+
+  const readStream = fs.createReadStream(docxUrl)
+
+  readStream.pipe(res)
+
+})
+
+app.listen(port, () => {
+  console.log(`App listening on port ${port}`)
+})

packages/backend/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "backend",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "node index.js"
+  },
+  "keywords": [],
+  "author": "Wisdom",
+  "license": "MIT",
+  "dependencies": {
+    "express": "^4.18.0"
+  }
+}

packages/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/frontend/README.md

@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

packages/frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

packages/frontend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "docx-preview": "^0.1.10",
+    "vue": "^3.2.33"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.1",
+    "sass": "^1.51.0",
+    "vite": "^2.9.6",
+    "vite-plugin-commonjs": "^0.2.6"
+  }
+}

packages/frontend/src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <img
+    alt="Vue logo"
+    src="@/assets/logo.png"
+  >
+  <!-- <HelloWorld msg="Hello Vue 3 + Vite" /> -->
+  <PreviewDemo />
+</template>
+
+<script setup>
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
+import HelloWorld from '@/components/HelloWorld.vue'
+import PreviewDemo from '@/components/PreviewDemo.vue'
+
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

packages/frontend/src/components/HelloWorld.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  msg: {
+    type: String,
+    default: ''
+  }
+})
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a
+      href="https://code.visualstudio.com/"
+      target="_blank"
+    >VS Code</a>
+    +
+    <a
+      href="https://github.com/johnsoncodehk/volar"
+      target="_blank"
+    >Volar</a>
+  </p>
+
+  <p>
+    <a
+      href="https://vitejs.dev/guide/features.html"
+      target="_blank"
+    >
+      Vite Documentation
+    </a>
+    |
+    <a
+      href="https://v3.vuejs.org/"
+      target="_blank"
+    >Vue 3 Documentation</a>
+  </p>
+
+  <button
+    type="button"
+    @click="count++"
+  >
+    count is: {{ count }}
+  </button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>