第一次提交

d290c8bf · huangqy · d290c8bf · d290c8bf · d290c8bf · d290c8bf
Commit d290c8bf authored Apr 24, 2022 by huangqy
--- a/.gitignore
+++ b/.gitignore
+# 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?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
--- a/README.md
+++ b/README.md
+# 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 Take Over mode by following these steps:
+
+1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
--- 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>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <!-- 全局配置 -->
+    <script>
+      window._CONFIG = {};
+      window._CONFIG['domianURL'] = 'http://192.168.3.130:10026';
+    </script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "vite-vue-three-app",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@types/node": "^17.0.23",
+    "ant-design-vue": "^3.2.0",
+    "axios": "^0.26.1",
+    "lodash": "^4.17.21",
+    "vue": "^3.2.25",
+    "vue-ls": "^4.2.0",
+    "vue-router": "^4.0.14",
+    "vuex": "^4.0.2"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.0",
+    "typescript": "^4.5.4",
+    "vite": "^2.9.0",
+    "vue-tsc": "^0.29.8"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
+<script setup lang="ts">
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+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>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>See <code>README.md</code> for more information.</p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">
+      Vite Docs
+    </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</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;
+}
+
+label {
+  margin: 0 0.5em;
+  font-weight: bold;
+}
+
+code {
+  background-color: #eee;
+  padding: 2px 4px;
+  border-radius: 4px;
+  color: #304455;
+}
+</style>
--- a/src/env.d.ts
+++ b/src/env.d.ts
+/// <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
+}
--- a/src/main.ts
+++ b/src/main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
+import {
+  createRouter, createWebHashHistory, RouteRecordRaw,
+} from 'vue-router';
+
+export const constantRouterMap: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'helloWorld',
+    component: () => import('@/components/HelloWorld.vue'),
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(), // hash模式：createWebHashHistory，history模式：createWebHistory
+  scrollBehavior: () => ({ // 切换路由, 始终滚动到顶部
+    top: 0
+  }),
+  routes: constantRouterMap
+});
+
+export default router;
--- a/src/store/index.ts
+++ b/src/store/index.ts
+import { InjectionKey } from 'vue'
+import { createStore, useStore as baseUseStore, Store } from 'vuex'
+import RootStateTypes, { AllStateTypes } from './types';
+
+const defaultState = {
+  count: 0
+};
+// 新建store 实例
+export const store = createStore({
+  state() {
+    return defaultState;
+  },
+  mutations: {
+    increment(state: typeof defaultState) {
+      // eslint-disable-next-line no-plusplus
+      state.count++;
+    },
+  },
+  actions: {
+    increment(context) {
+      context.commit('increment');
+    },
+  },
+  getters: {
+    count(state: typeof defaultState) {
+      return state.count;
+    },
+  },
+  modules: {
+      
+  }
+})
+// 定义 injection key
+export const key: InjectionKey<Store<RootStateTypes>> = Symbol('vue3-store')
+
+// 定义自己的 `useStore` 组合式函数
+export function useStore<T = AllStateTypes> () {
+    return baseUseStore<T>(key)
+}
\ No newline at end of file
--- a/src/store/types.ts
+++ b/src/store/types.ts
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
+import Vue from 'vue'
+import Axios, { Method, ResponseType, AxiosResponse } from 'axios'
+
+import { message } from 'ant-design-vue';
+import 'ant-design-vue/es/message/style/css'; //vite只能用 ant-design-vue/es 而非 ant-design-vue/lib
+
+interface axiosData {
+  url: string
+  method: Method
+  headers?: any
+  json: boolean
+  contentType?: string
+  data?: any
+  params?: any
+  responseType?: ResponseType
+}
+
+let apiBaseUrl = (window as any)._CONFIG['domianURL'] || '/'
+const axios = Axios.create({
+  baseURL: apiBaseUrl,
+  timeout: 3000
+})
+
+// 允许携带cookie
+axios.defaults.withCredentials = true
+
+// 默认使用 application/json 形式
+axios.defaults.headers.post['Content-Type'] = 'application/json'
+
+// 请求拦截器
+axios.interceptors.request.use(
+  (config) => {
+    const token = Vue.ls.get(ACCESS_TOKEN)
+    if (token) {
+        config.headers[ 'X-Access-Token' ] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
+    }
+    return config;
+  },
+  (err) => Promise.reject(err)
+)
+  
+// 响应拦截器
+axios.interceptors.response.use(
+  (res) => res,
+  (err) => {
+    if (err.response && err.response.data) {
+      const code = err.response.status
+      const msg = err.response.data.message
+      message.error(`Code: ${code}, Message: ${msg}`)
+    } else {
+        message.error(`${err}`)
+    }
+    return Promise.reject(err)
+  }
+)
+
+export default function request(arr: axiosData) {
+  return new Promise<any>((resolve, reject) => {
+    axios({
+      url: arr.url,
+      method: arr.method || 'POST',
+      headers: {
+        'content-type': arr.contentType ? arr.contentType : arr.json ? 'application/json; charset=UTF-8' : 'application/x-www-form-urlencoded; charset=UTF-8'
+      },
+      params: arr.params || '',
+      data: arr.data || '',
+      responseType: arr.responseType || 'json'
+    })
+      .then((response: AxiosResponse<any>) => {
+        if (response.data.code == 99200) {
+          message.error(response.data)
+          reject(response.data)
+          return
+        }
+        resolve(response.data)
+      })
+        .catch((err) => {
+          message.error(err.message)
+          reject(err)
+        })
+  })
+}
\ No newline at end of file
--- a/src/utils/validate.ts
+++ b/src/utils/validate.ts
+/**
+ * 邮箱
+ * @param {*} s
+ */
+ export function isEmail (str: string) {
+  return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(str)
+}
+
+/**
+ * 手机号码
+ * @param {*} s
+ */
+export function isMobile (str: string) {
+  return /^1[0-9]{10}$/.test(str)
+}
+
+/**
+ * 电话号码
+ * @param {*} s
+ */
+export function isPhone (str: string) {
+  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(str)
+}
+
+/**
+ * URL地址
+ * @param {*} s
+ */
+export function isURL (str: string) {
+  return /^http[s]?:\/\/.*/.test(str)
+}
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: 9504,
+    open: true
+  },
+  resolve: {
+    alias: {
+      // 如果报错__dirname找不到，需要安装node,执行yarn add @types/node --save-dev
+      '@': resolve(__dirname, 'src')
+    }
+  },
+  plugins: [vue()]
+})