Browse Source

更新readme
Signed-off-by: Caner <5658514@qq.com>

Caner 3 years ago
parent
commit
45dc162971
6 changed files with 119 additions and 56 deletions
  1. 1 0
      .env
  2. 0 1
      .env.development
  3. 0 1
      .env.production
  4. 58 2
      README.md
  5. 1 0
      package.json
  6. 59 52
      vite.config.ts

+ 1 - 0
.env

@@ -0,0 +1 @@
+VITE_PROXY_URL=http://114.114.114.114:28181

+ 0 - 1
.env.development

@@ -1 +0,0 @@
-#VITE_SERVER_URL=http://20.20.20.4:8762

+ 0 - 1
.env.production

@@ -1 +0,0 @@
-VITE_SERVER_URL=https://****.com:8765

+ 58 - 2
README.md

@@ -14,6 +14,7 @@
 4. 子页面全局ui组件引用 /pages/*/assets/js/nativeUiPluginPublic.ts
 4. 子页面全局ui组件引用 /pages/*/assets/js/nativeUiPluginPublic.ts
 5. 本项目配置全局动态路由(各子页面单独添加route.ts)参考/pages/index/views/*/route.ts
 5. 本项目配置全局动态路由(各子页面单独添加route.ts)参考/pages/index/views/*/route.ts
 6. 多入口无法同时使用web模式
 6. 多入口无法同时使用web模式
+7. 注意组件化
 ```
 ```
 ## use
 ## use
 ```
 ```
@@ -33,12 +34,14 @@ yarn build
 |           - `components`        子组件
 |           - `components`        子组件
 |           - `store`             子存储
 |           - `store`             子存储
 |           - `views`             子页面
 |           - `views`             子页面
+|           - `service`           子服务
 |           - `App.vue`           子模板
 |           - `App.vue`           子模板
 |           - `main.ts`           子入口文件
 |           - `main.ts`           子入口文件
 |       - `admin`                 后台管理html入口目录
 |       - `admin`                 后台管理html入口目录
 |           - `assets`            子静态文件
 |           - `assets`            子静态文件
 |           - `components`        子组件
 |           - `components`        子组件
 |           - `store`             子存储
 |           - `store`             子存储
+|           - `service`           子服务
 |           - `views`             子页面
 |           - `views`             子页面
 |           - `App.vue`           子模板
 |           - `App.vue`           子模板
 |           - `main.ts`           子入口文件
 |           - `main.ts`           子入口文件
@@ -46,6 +49,7 @@ yarn build
 |           - `assets`            子静态文件
 |           - `assets`            子静态文件
 |           - `components`        子组件
 |           - `components`        子组件
 |           - `store`             子存储
 |           - `store`             子存储
+|           - `service`           子服务
 |           - `views`             子页面
 |           - `views`             子页面
 |           - `App.vue`           子模板
 |           - `App.vue`           子模板
 |           - `main.ts`           子入口文件
 |           - `main.ts`           子入口文件
@@ -58,6 +62,8 @@ yarn build
 ```
 ```
 import { onMounted, ref, computed} from 'vue'
 import { onMounted, ref, computed} from 'vue'
 <script setup>
 <script setup>
+    <!-- 函数new区       -->
+    const test = new DataServer()
     <!-- data 数据声明区 -->
     <!-- data 数据声明区 -->
       exp:
       exp:
         const test=ref(1)
         const test=ref(1)
@@ -65,7 +71,7 @@ import { onMounted, ref, computed} from 'vue'
 
 
     <!-- function 调用区 -->
     <!-- function 调用区 -->
       exp:
       exp:
-       const test= ()=>{
+       function name(){
           console.log(123)
           console.log(123)
         }
         }
 
 
@@ -73,6 +79,56 @@ import { onMounted, ref, computed} from 'vue'
       exp:
       exp:
         onMounted(() => {test()})
         onMounted(() => {test()})
 </script>
 </script>
-
+<template></template>
+<style></style>
 ```
 ```
+## 编写规范
+### typescript 脚本
+* 不允许的操作
+  * 使用 `any` 类型
+  * 使用 `JSON.parse` 等危险操作时不嵌套异常处理
+  * 单个文件中的脚本代码总行数不允许超过`1024`行
+* 命名
+  * 文件 小写字母命名,多个词之间以 `-`连接,不允许大写字母及驼峰式
+  * 变量
+    * 小写字母开头的驼峰式,如 `userName`
+    * 必须使用英文单词或有意义的拼音
+    * 单字符变量名只允许在循环、循环回调中使用,可使用 `i,j,k,m,n,t,v`等
+  * 函数
+    * 小写字母开头的驼峰式,如 `shouUserName`
+    * `.service.ts` 文件中方法命名建议:
+      * 集合类数据获取采用 `loadUsers` 之类的命名,即以 `load`开头并以获取数据名结尾
+      * 单个数据获取采用 `fetchTemplate` 之类的命名,以`fetch`开头并以数据名结尾
+      * 保存数据采用 `saveFlow` 之类的命名
+      * 删除数据采用 `removeTemplate` 之类的命名
+  * 类及类型
+    * 大写字母开头的驼峰式,如 `UserService`
+    * 私有变量以下划线接小写字母开头的驼峰式,如 `_innerType`
+  * 全局常量,下划线连接大写字母,如 `GROUP_TYPES`
+* 类型及注释
+  * 所有需要在外部被调用的接口需明确定义参数及返回值类型,直接使用`typescript`类型系统即可
+  * 所有需要公共使用(即除了本模块使用,其他模块也会涉及到)的类型,主要是接口返回的数据定义类型,需要放在 `src/types` 目录中
+  * 注释写法分以下几类
+  ```ts
+  /** 这种用于简单描述函数作用 或 类成员变量用处 */
+  // 这种用于描述函数内变量或代码段作用
+  /**
+   * 这种用于描述类、复杂函数用途及参数等
+   */
+  ```
+### scss 样式
+* 不允许使用无封装或不唯一的全局类样式,必须使用时需备注说明并慎重选择类名
+* 颜色赋值使用 `var(--color-a)` 写法,无特殊说明不允许直接赋值
+* `class, id` 命名必须使用短线连接单词方式,如 `form-label`, `list-item-title` 等
+* 多层级类名嵌套时,必须使用`scss`嵌套写法,以免污染其他样式,如
+```scss
+.user-info {
+  .pamel {
+    .heaer {
+      .title {
 
 
+      }
+    }
+  }
+}
+```

+ 1 - 0
package.json

@@ -19,6 +19,7 @@
     "vue-router": "^4.1.3"
     "vue-router": "^4.1.3"
   },
   },
   "devDependencies": {
   "devDependencies": {
+    "@types/node": "^18.15.3",
     "@typescript-eslint/parser": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
     "@vitejs/plugin-vue": "^3.1.2",
     "@vitejs/plugin-vue": "^3.1.2",
     "eslint": "^8.25.0",
     "eslint": "^8.25.0",

+ 59 - 52
vite.config.ts

@@ -1,60 +1,67 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vue from '@vitejs/plugin-vue'
 import eslint from 'vite-plugin-eslint'
 import eslint from 'vite-plugin-eslint'
 import viteCompression from 'vite-plugin-compression'
 import viteCompression from 'vite-plugin-compression'
-import path from 'path'
+import { resolve } from 'path'
 
 
 // https://vitejs.dev/config/
 // https://vitejs.dev/config/
-export default defineConfig({
-  base: './',
-  resolve: {
-    alias: {
-      /*
-        路径别名
-        若为文件系统路径必须是绝对路径的形式,否则将以别名原样呈现,不会解析为文件系统路径路径
-      */
-      '@': path.resolve(__dirname, './src')
-    }
-  },
-  plugins: [vue(), viteCompression(), eslint({ fix: true, include: ['**/*.ts', '**/*.vue'] })],
-  server: {
-    host: '0.0.0.0',
-    port: 5888,
-    open: true,
-    strictPort: false,
-    https: false
-    // 反向代理
-    // proxy: {
-    //   '/': {
-    //     target: 'http://172.16.1.215:5000',
-    //     changeOrigin: true,
-    //     rewrite: (path) => path.replace(/^\//, '')
-    //   },
-    // }
-  },
-  esbuild: {
-    drop: ['console', 'debugger'] //build 移除打印
-  },    
-  build: {
-    rollupOptions: {
-      input: {
-        index: path.resolve(__dirname, 'index.html'),
-        login: path.resolve(__dirname, 'login.html')
-      },
-      output: { // 静态资源分类打包
-        chunkFileNames: 'js/[hash].js',
-        entryFileNames: 'js/[hash].js',
-        assetFileNames: 'assets/[ext]/[hash].[ext]',
-        // 拆分node_modules包
-        manualChunks: (id: any) => {
-          if (id.includes("node_modules")) {
-            return id.toString().split("node_modules/")[1].split("/")[0].toString()
+export default ({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  return defineConfig({
+    base: './',
+    resolve: {
+      alias: {
+        /*
+          路径别名
+          若为文件系统路径必须是绝对路径的形式,否则将以别名原样呈现,不会解析为文件系统路径路径
+        */
+        '@': resolve(__dirname, './src')
+      }
+    },
+    plugins: [ vue(), viteCompression(), eslint({ fix: true, include: [ '**/*.ts', '**/*.vue' ] }) ],
+    server: {
+      host: '0.0.0.0',
+      port: 5888,
+      open: true,
+      strictPort: false,
+      https: false,
+      proxy: {
+        '/api': {
+          target: env.VITE_PROXY_URL,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+          secure: false,
+          headers: {
+            Referer: 'https://example.com'
+          }
+        }
+      }
+    },
+    esbuild: {
+      drop: [ 'console', 'debugger' ] // build 移除打印
+    },
+    build: {
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, 'index.html'),
+          login: resolve(__dirname, 'login.html')
+        },
+        output: { // 静态资源分类打包
+          chunkFileNames: 'js/[hash].js',
+          entryFileNames: 'js/[hash].js',
+          assetFileNames: 'assets/[ext]/[hash].[ext]',
+          // 拆分node_modules包
+          manualChunks: (id: any) => {
+            if (id.includes('node_modules')) {
+              return id.toString().split('node_modules/')[1].split('/')[0].toString()
+            }
+            return ''
           }
           }
-        }          
+        }
       }
       }
+    },
+    define: {
+      __VUE_OPTIONS_API__: false
     }
     }
-  },
-  define: {
-    __VUE_OPTIONS_API__: false
-  }  
-})
+  })
+}