init project

c3e78185 · 郭铭瑶 · c3e78185 · c3e78185 · c3e78185 · c3e78185
Commit c3e78185 authored Aug 11, 2021 by 郭铭瑶 🤘
16 changed files
--- a/.eslintrc.js
+++ b/.eslintrc.js
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  rules: {
+    'vue/no-multiple-template-root': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/html-self-closing': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, // 生产环境禁止debugger
+    'no-console': process.env.NODE_ENV === 'production' ? 2 : 0, // 生产环境禁止console
+    'no-alert': process.env.NODE_ENV === 'production' ? 2 : 0, // 生产环境禁止alert
+    'no-shadow-restricted-names': 2, // 禁用关键字及保留字等
+    'dot-notation': 1, // 尽可能使用 . 来访问对象属性
+    'no-multi-spaces': 1, // 禁止使用多个空格
+    'brace-style': 1, // 大括号风格 - one true brace style
+    'no-var': 1, // 禁用var声明
+    'no-new-object': 1, // 禁止new Object
+    'no-array-constructor': 1, // 禁止new Array
+    'prefer-const': 1, // 要求使用 const 声明那些声明后不再被修改的变量
+    'prefer-destructuring': 1, // 优先使用数组和对象解构
+    'no-param-reassign': 1, // 禁止在函数中对函数参数重新赋值
+    'no-extra-semi': 1, // 禁用不必要的分号
+    // "no-unused-vars": 1, // 禁止已声明但未使用的变量
+    // "indent": [1, 2], // 使用2个空格缩进
+    'no-multiple-empty-lines': [1, { max: 1 }], // 禁止连续出现2个及以上空行
+    'default-case': 1, // 要求switch语句必须有default分支
+    'key-spacing': [1, { beforeColon: false, afterColon: true }], // 冒号前不要空格，后需要空格
+    'comma-spacing': [1, { before: false, after: true }], // 逗号前不要空格，后需要空格
+    'arrow-spacing': [1, { before: true, after: true }], // 箭头函数中的箭头前后需要留空格
+    quotes: [1, 'single'], // 字符串使用单引号
+    semi: [1, 'never'], // 禁止使用分号
+  },
+}
--- a/.gitignore
+++ b/.gitignore
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
\ No newline at end of file
--- a/.prettierrc.js
+++ b/.prettierrc.js
+module.exports = {
+  tabWidth: 2,
+  useTabs: false,
+  singleQuote: true,
+  semi: false,
+}
\ No newline at end of file
--- a/LICENSE
+++ b/LICENSE
+MIT License
+
+Copyright (c) 2021 Max Kwok
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
+# my-vite-app
+
+vite + vue 项目自用模板
+
+
--- a/index.html
+++ b/index.html
+<!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>My Vite App</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "relation-graph",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "start": "node node_modules/esbuild/install.js && npm run dev",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "d3": "^5.15.0",
+    "vue": "^3.0.5"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.1.5",
+    "@vue/compiler-sfc": "^3.0.5",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.17.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.4.1",
+    "prettier": "^2.2.1",
+    "stylus": "^0.54.8",
+    "vite": "^2.1.0"
+  },
+  "description": "关系图工具",
+  "author": "Guo"
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+  <Main />
+</template>
+
+<script>
+import Main from './components/main.vue'
+export default {
+  name: 'App',
+  components: { Main },
+}
+</script>
+
+<style lang="stylus">
+html,
+body
+  margin 0
+  padding 0
+#app
+  font-family Avenir, Helvetica, Arial, sans-serif
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+  color #2c3e50
+</style>
--- a/src/components/d3.vue
+++ b/src/components/d3.vue
+<template>
+  <div ref="container" />
+</template>
+
+<script>
+import RelationGraph from '@/util/useD3.js'
+import { ref } from '@vue/reactivity'
+import { nextTick, onMounted, watch } from '@vue/runtime-core'
+export default {
+  name: 'D3',
+  props: {
+    data: {
+      type: Object,
+      required: true,
+    },
+    config: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
+  setup(props) {
+    let instance = null
+    const container = ref(null)
+    onMounted(async () => {
+      if (!props.data.nodes || !props.data.links) return
+      await nextTick()
+      init()
+    })
+    function init() {
+      if (instance) {
+        instance.selectAll('*').remove()
+      } else {
+        instance = new RelationGraph(container.value, props.data, props.config)
+      }
+    }
+    watch(() => props.data, init)
+    return {
+      container,
+    }
+  },
+}
+</script>
+
+<style lang="stylus">
+.relation-tooltip {
+  position: fixed;
+  padding: 0.5rem 1rem;
+  background-color: rgba(0,0,0,0.5);
+  border-radius: 0.5rem;
+  color: #fff;
+  backdrop-filter: blur(0.5rem);
+  -webkit-backdrop-filter: blur(0.5rem);
+}
+</style>
--- a/src/components/main.vue
+++ b/src/components/main.vue
+<template>
+  <D3
+    :data="data"
+    :config="config"
+    style="background: #fff; width: 100%; height: 100vh"
+  />
+</template>
+
+<script>
+import D3 from './d3.vue'
+import mockData from '@/util/mock.js'
+import { ref } from '@vue/reactivity'
+export default {
+  name: 'Main',
+  components: { D3 },
+  setup() {
+    const data = ref(mockData)
+    const config = ref({
+      config: {
+        strokeColor: 'skyblue',
+      },
+    })
+    return {
+      data,
+      config,
+    }
+  },
+}
+</script>
+
+<style lang="stylus" scoped></style>
--- a/src/main.js
+++ b/src/main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- a/src/util/mock.js
+++ b/src/util/mock.js
--- a/src/util/useD3.js
+++ b/src/util/useD3.js
--- a/vite.config.js
+++ b/vite.config.js
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: './',
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@images': resolve(__dirname, './src/assets/images'),
+    },
+  },
+})