79 lines
3.7 KiB
Markdown
79 lines
3.7 KiB
Markdown
# Vue 3 + Typescript + Vite
|
||
|
||
This template should help get you started developing with Vue 3 and Typescript in Vite.
|
||
|
||
## Recommended IDE Setup
|
||
|
||
[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
|
||
|
||
### If Using `<script setup>`
|
||
|
||
[`<script setup>`](https://github.com/vuejs/rfcs/pull/227) is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.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](https://www.typescriptlang.org/tsconfig#plugins) 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 项目说明
|
||
|
||
|
||
|