Vue 3 + Typescript + Vite

This template should help get you started developing with Vue 3 and Typescript in Vite.

Recommended IDE Setup

VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService in settings!

If Using <script setup>

<script setup> is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

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 use the following:

If Using Volar

Run Volar: Switch TS Plugin on/off from VSCode command palette.

If Using Vetur

1. Install and add @vuedx/typescript-plugin-vue to the plugins section in tsconfig.json
2. Delete src/shims-vue.d.ts as it is no longer needed to provide module info to Typescript
3. Open src/main.ts in VSCode
4. Open the VSCode command palette
5. Search and run "Select TypeScript version" -> "Use workspace version" test

目录结构

|-- build 构建相关 |-- hx-ai-intelligent AI智能BSA系统 |-- mock 定义模拟数据（登录/登出/获取用户信息等） |-- public 静态资源 |-- resources 资源文件 |-- src |-- api 定义接口请求地址 |-- components 当前项目的公共组件 |-- ns-modal-form.vue 经过二次封装后的“弹窗”通用组件 |-- ns-steps.vue 经过二次封装后的“步骤条”通用组件 |-- config 配置文件 |-- app.config.ts(包含应用程序配置的对象，包含api路径/组件配置等) |-- directives 自定义指令（在vue应用程序中设置全局指令） |-- enum 枚举（用于http请求配置和错误代码的处理） |-- icon 图标（svg图标文件） |-- router 路由 |-- store 状态管理 |-- theme 主题样式（less/scss）文件 |-- util 工具类 |-- debounce.ts 防抖函数（用于优化频繁出发的事件处理函数，例如窗口大小改变/滚动事件等） |-- view 页面 |-- App.vue 根组件 |-- .env.development 当前项目开发环境配置 |-- .env.production 当前项目生产环境配置 |-- index.html 当前项目入口页 |-- tsconfig.json typescript配置 |-- vite.config.ts vite配置（包含当前项目请求接口地址） |-- lib |-- component 公共组件（color/drawer/echarts/flowChart/form/modal/table/tree等组件的二次封装或将组件注册为插件形式使用） |-- paas 私有组件 |-- saas 私有组件 |-- type 类型定义 |-- use 自定义hook文件 |-- util （http/axios等工具类） |-- node_modules 依赖包 |-- public 静态资源（不会被编译） |-- src |-- main.ts 入口文件(初始化saasInit函数的相关配置或服务的入口点。) |-- type 声明定义应用程序的全局类型
|-- .env.development 开发环境配置 |-- .env.production 生产环境配置 |-- index.html 项目入口文件 |-- package.json 项目依赖包管理 |-- tsconfig.json typescript配置 |-- vite.config.ts vite配置 |-- README.md 项目说明

开发前的相关配置或调试时需要本地启动项目

1、node官网下载并安装node环境，node版本18.12以上稳定版。官网地址：https://nodejs.cn/download/ node版本安装18.12以上版本，npm版本安装9.6.0以上版即可 查看版本：node -v npm -v 2、更换npm源为淘宝镜像 命令：npm config set registry https://registry.npmmirror.com/ 输入此命令查看是否完成修改：npm config get registry 3、安装pnpm包管理器，由于有时npm启动项目会因为存在重复配置及文件而报错，使用pnpm可以避开这些问题，将资源整合，性能提高的同时也扩展了场景。 命令：npm install -g pnpm 输入此命令查看是否完成安装：pnpm -v 4、安装依赖包 命令：pnpm install 5、启动hx-ai-intelligent 项目命令：pnpm run ai 打包到线上命令：pnpm run ai-build 6、启动hx-op项目 项目命令：pnpm run ai-op 打包到线上命令：pnpm run ai-op-build 7、如使用vscode编辑器，可以在终端使用cmd终端启动项目，powershell终端会报错