init

.env.development

@@ -0,0 +1 @@
+VITE_APP_API_BASE_URL = /dev

.env.production

@@ -0,0 +1 @@
+VITE_APP_API_BASE_URL = /prd

.env.test

@@ -0,0 +1 @@
+VITE_APP_API_BASE_URL = /test

.eslintrc.js

@@ -0,0 +1,149 @@
+//vue eslint url https://eslint.vuejs.org/rules
+
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    'vue/setup-compiler-macros': true
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly'
+  },
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended'
+  ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  rules: {
+    '@typescript-eslint/no-explicit-any': ['off'],
+    'vue/comment-directive': 'off',
+    'no-console': 'off',
+    'generator-star-spacing': 'off',
+    'no-mixed-operators': 0,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }], // 要求箭头函数的箭头之前或之后有空格
+    'block-spacing': [2, 'always'], // 禁止或强制在代码块中开括号前和闭括号后有空格
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true // 允许块的开括号和闭括号在 同一行
+    }], // 大括号的风格统一使用one true brace style
+    'vue/max-attributes-per-line': [
+      2,
+      {
+        singleline: 5, // 配置单行能够防止的属性个数, 和多行的配置是二选一的
+        multiline:2 // 配置单行能够防止的属性个数，和单行的配置是二选一的
+      }
+    ],
+    quotes: [2, 'single', { // js代码中，必须使用单引号
+      'avoidEscape': true, // 允许字符串使用单引号或双引号，只要字符串中包含了一个其它引号，否则需要转义
+      'allowTemplateLiterals': true // 允许字符串使用反勾号
+    }], // 强制使用一致的反勾号、双引号或单引号
+    'semi': [ // 末尾不用出现分号
+      2,
+      'never',
+      {
+        beforeStatementContinuationChars: 'never'  //"never" 如果该语句不会因为ASI而带来风险，那么即使它的下一行语句以 [，(，/，+，或 - 开头，也不允许在语句末尾添加分号。
+      }
+    ],
+
+    'no-delete-var': 2,  // 禁止对变量使用 delete 操作符。
+    'vue/v-on-event-hyphenation': ['error', 'always', { //组件参数规范，always使用-分隔，never使用驼峰分隔
+      'autofix': false, //自动修复，Vue2不建议使用，可能会有问题
+      'ignore': []    //忽略的名称数组
+    }],
+    'vue/no-multi-spaces': 2, //不允许多个空格
+    'vue/no-spaces-around-equal-signs-in-attribute':2,  //属性中的等号周围不允许有空格
+    'vue/require-explicit-emits': ['error', {  //要求emits必须命名
+      'allowProps': false
+    }],
+    'vue/attributes-order': ['error', {     // 属性顺序强制执行属性顺序
+      'order': [
+        'DEFINITION',
+        'LIST_RENDERING',
+        'CONDITIONALS',
+        'RENDER_MODIFIERS',
+        'GLOBAL',
+        ['UNIQUE', 'SLOT'],
+        'TWO_WAY_BINDING',
+        'OTHER_DIRECTIVES',
+        'OTHER_ATTR',
+        'EVENTS',
+        'CONTENT'
+      ],
+      'alphabetical': false
+    }],
+    'vue/html-closing-bracket-spacing': ['error', {   //vue标签闭合间距
+      'startTag': 'never',
+      'endTag': 'never',
+      'selfClosingTag': 'always'    //单标签需要空格
+    }],
+    'prefer-const': [ // 要求使用 const 声明那些声明后不再被修改的变量
+      2,
+      {
+        ignoreReadBeforeAssign: false   //忽略声明和第一次赋值之间的变量
+      }
+    ],
+    'vue/script-indent': [   //vue script缩进
+      'error',
+      2, //缩进的类型。默认为2。如果这是一个数字，它是一个缩进的空格数。如果是"tab"，它使用一个制表符进行一个缩进。
+      {
+        'baseIndent': 1   //基础缩进
+      }
+    ],
+    'vue/html-quotes': 2, //html属性引号，默认双引号
+    'vue/html-indent': [    //vue template缩进
+      'error',
+      2,
+      {
+        'baseIndent': 1
+      }
+    ],
+    'operator-linebreak': [2, 'after', { // 要求把换行符放在操作符后面
+      'overrides': {
+        '?': 'before', // 问号置于操作数之前
+        ':': 'before'  // 冒号置于操作数之前
+      }
+    }],
+    'space-before-blocks': [2, 'always'], // 强制代码块之前出现空格
+    'template-curly-spacing': 'off',
+    'space-before-function-paren': [2, 'never'], //关闭函数圆括号之前有一个空格，这个会和prettier冲突，暂未找到解决方法
+    'require-await': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    'vue/custom-event-name-casing': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^h$',
+        varsIgnorePattern: '^h$'
+      }
+    ],
+
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^h$',
+        varsIgnorePattern: '^h$'
+      }
+    ],
+    'comma-dangle': ['error', 'never'],  // 对象字面量项尾不能有逗号
+    'no-proto': 2,//禁止使用__proto__属性
+    'no-redeclare': 2,//禁止重复声明变量
+    'no-trailing-spaces': 2, // 禁止使用行尾空白（空格、tab 和其它 Unicode 空白字符）。
+    'no-undef': 2,//不能有未定义的变量
+    'eol-last': 2 // 文件末尾需存在至少一行空行
+  }
+}

.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?

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}

README.md

@@ -0,0 +1,11 @@
+# Vue 3 + Typescript + Vite
+
+This template should help get you started developing with Vue 3 and Typescript 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
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's `.vue` type support plugin by running `Volar: Switch TS Plugin on/off` from VSCode command palette.

config.ts

@@ -0,0 +1,28 @@
+/*
+ * @Author: 文帅
+ * @Date: 2022-03-08 16:37:24
+ * @LastEditTime: 2022-03-08 17:35:36
+ * @LastEditors: 文帅
+ * @Description:
+ */
+
+
+
+const developmentConfig = {
+  name: 'development',
+  baseUrl: 'https://twww.winhc.net/api'
+}
+const testConfig = {
+  name: 'test',
+  baseUrl: 'https://twww.winhc.net/api'
+}
+const productionConfig = {
+  name: 'production',
+  baseUrl: 'https://www.winhc.net/api'
+}
+
+const env = [developmentConfig, testConfig, productionConfig]
+
+export const config = env.find(item =>
+  item.name === import.meta.env.MODE
+)!

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.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "winhc-h5-dimension-vue3",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite --mode development",
+    "build": "vue-tsc --noEmit && vite build",
+    "build:test": "vue-tsc --noEmit && vite build --mode test",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^2.x.x",
+    "vant": "^3.4.5",
+    "vue": "^3.2.25",
+    "vue-router": "^4.0.13"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.14.0",
+    "@typescript-eslint/parser": "^5.14.0",
+    "@vitejs/plugin-vue": "^2.2.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "axios": "^0.26.0",
+    "eslint": "^8.10.0",
+    "eslint-plugin-vue": "^8.5.0",
+    "typescript": "^4.5.4",
+    "vite": "^2.8.0",
+    "vite-plugin-style-import": "1.4.1",
+    "vite-plugin-windicss": "^1.8.3",
+    "vue-tsc": "^0.29.8",
+    "windicss": "^3.5.1"
+  }
+}

src/App.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
+</template>
+
+<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>

src/api/index.ts

@@ -0,0 +1,32 @@
+import { config } from './../../config'
+import axios, { AxiosResponse } from 'axios'
+import { headerData } from './reqHeaders'
+
+const axiosIns = axios.create({
+  baseURL: config.baseUrl,
+  timeout: 60000
+})
+
+console.log(config)
+
+
+
+// 添加请求拦截器
+axiosIns.interceptors.request.use(
+  (config: any) => {
+    Object.assign(config.headers, headerData)
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// 添加响应拦截器
+axiosIns.interceptors.response.use(
+  (response: AxiosResponse) => {
+    console.log(response)
+  }
+)
+
+export default axiosIns

src/api/reqHeaders.ts

@@ -0,0 +1,18 @@
+/*
+ * @Author: 文帅
+ * @Date: 2022-03-08 17:08:19
+ * @LastEditTime: 2022-03-08 17:27:41
+ * @LastEditors: 文帅
+ * @Description:
+ */
+export const headerData = {
+  'Accept': 'application/json; charset=utf-8',
+  'appid': 'WEB_SITE',
+  'apiVersion': '1.0',
+  'osType': '',
+  'deviceId': '',
+  'brand': '',
+  'osVersion': '',
+  'appVersion': '',
+  'sessionId': localStorage.getItem('qccSessionId') ? localStorage.getItem('qccSessionId') : ''
+}

src/components/HelloWorld.vue

@@ -0,0 +1,24 @@
+
+
+<template>
+  <van-button>123</van-button>
+  <div class="bg-black w-16 h-16"></div>
+</template>
+<script setup lang="ts">
+  import axiosIns from '@/api'
+  import { onMounted, ref } from 'vue'
+  console.log(import.meta.env)
+  defineProps<{ msg: string }>()
+
+  const count = ref(0)
+  console.log(count.value)
+
+  onMounted(async() => {
+    const res = axiosIns('lawyer-workbench/risk/dimension/page?dimensionCode=court_announcement&pageNum=1&pageSize=10&deleted=0&announcementType=&year=&entityType=2&entityName=%E5%AE%81%E5%BE%B7%E6%97%B6%E4%BB%A3%E6%96%B0%E8%83%BD%E6%BA%90%E7%A7%91%E6%8A%80%E8%82%A1%E4%BB%BD%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&entityId=76d4d8ae15b063986d88abe92a5efe83')
+    console.log(res)
+
+  })
+
+</script>
+<style scoped>
+</style>

src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createPinia } from 'pinia'
+import router from './router'
+import 'virtual:windi.css'
+// import 'virtual:windi-devtools'
+
+import { useVant } from './plugins/vant'
+
+
+const app = createApp(App)
+
+
+useVant(app)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')
+

src/plugins/vant.ts

@@ -0,0 +1,7 @@
+import { Button } from 'vant';
+import { App } from 'vue';
+
+export const useVant = (app: App<Element>) => {
+  app.use(Button);
+
+}

src/router/index.ts

@@ -0,0 +1,18 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+const routes: Array<RouteRecordRaw> = [
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+
+// router.beforeEach((to, from, next) => {
+
+// })
+
+// router.afterEach((to) => {
+// })
+
+export default router

src/utils/app.ts

@@ -0,0 +1,47 @@
+/* eslint-disable no-undef */
+/*
+ * @Author: 文帅
+ * @Date: 2022-03-08 15:35:36
+ * @LastEditTime: 2022-03-08 16:02:08
+ * @LastEditors: 文帅
+ * @Description:
+ */
+declare const window: Window & { WebViewJavascriptBridge: any, WVJBCallbacks: any }
+
+class h5JumpApp {
+  ocMethod = (method: any, data: any) => {
+    this.setupWebViewJavascriptBridge((bridge: any) => {
+      bridge.callHandler(method, data || {},
+        function callback(response: unknown) {
+          // eslint-disable-next-line no-undef
+          log('JS got response', response)
+        }
+      )
+    })
+  }
+  systemJudge = () => {
+    let systemFlag = ''
+    const u = navigator.userAgent
+    const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android终端
+    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
+    if (isAndroid) {
+      systemFlag = 'Android'
+    } else if (isiOS) {
+      systemFlag = 'IOS'
+    }
+    return systemFlag
+  }
+
+  setupWebViewJavascriptBridge = (callback: { (bridge: any): void; (arg0: any): any }) => {
+    if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge) }
+    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback) }
+    window.WVJBCallbacks = [callback]
+    const WVJBIframe = document.createElement('iframe')
+    WVJBIframe.style.display = 'none'
+    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__'
+    document.documentElement.appendChild(WVJBIframe)
+    setTimeout(() => { document.documentElement.removeChild(WVJBIframe) }, 0)
+  }
+}
+
+export default h5JumpApp

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    // "module": "es2020",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "baseUrl": "./",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import styleImport, { VantResolve } from 'vite-plugin-style-import'
+import WindiCSS from 'vite-plugin-windicss'
+import * as path from 'path'
+
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    WindiCSS(),
+    styleImport({
+      resolves: [VantResolve()]
+    })
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'), //使用@来代表src目录
+      components: path.resolve(__dirname, 'src/components'),
+      styles: path.resolve(__dirname, 'src/styles'),
+      plugins: path.resolve(__dirname, 'src/plugins'),
+      views: path.resolve(__dirname, 'src/views'),
+      layouts: path.resolve(__dirname, 'src/layouts'),
+      utils: path.resolve(__dirname, 'src/utils'),
+      apis: path.resolve(__dirname, 'src/apis'),
+      dirs: path.resolve(__dirname, 'src/directives')
+    }
+  }
+})

windi.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite-plugin-windicss'
+
+export default defineConfig({
+  extract: {
+    include: ['index.html', 'src/**/*.{vue,jsx,tsx,html}']
+  },
+  theme: {
+    extend: {
+      colors: {
+        dark: '#303030',
+        light: '#ebebeb',
+        blue: {
+          b: '#0059DD'
+        }
+      }
+    }
+  }
+})