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 to learn more.

Recommended IDE Setup

• VS Code + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Type Support For .vue Imports in TS

TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need TypeScript Vue Plugin (Volar) to make the TypeScript language service aware of .vue types.

If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a Take Over Mode that is more performant. You can enable it by the following steps:

1. Disable the built-in TypeScript Extension
   1. Run Extensions: Show Built-in Extensions from VSCode's command palette
   2. Find TypeScript and JavaScript Language Features, right click and select Disable (Workspace)
2. Reload the VSCode window by running Developer: Reload Window from the command palette.

简介

项目基于vite + ts + naiveui ,进行naiveui组件的二次开发

项目结构介绍

1.dist:打包后生成的目录，.js文件（模块打包文件），.umd.cjs（打包后入口文件） 2.packages：组件文件，二次封装的组件都放入此文件夹下面

1. dist:打包后生成的目录，.js文件（模块打包文件），.umd.cjs（打包后入口文件）
2. packages：组件文件，二次封装的组件都放入此文件夹下面
   1. index.ts：packages入口文件，也是打包的入口文件，按需导出组件
   2. Table组件
      1. index.ts：导出table
      2. src：table组件具体代码，包括功能hooks，用到的types，传递的props...(后续待补充)，myTable.vue组件模板
3. src：放一些公共hooks以及utils
4. types:公共模块类型的declare
5. ignore:提交需要忽略的文件配置
6. package.json
7. tsconfig.json
8. vite.config.ts

package.json

1. name:名称
2. version:版本号
3. descritption:描述
4. main：打包后入口/或者打包前入口
5. module：模块入口
6. exports：导出
7. files：需要上传的文件
8. keywords:npm官网搜索关键字

tsconfig.json

1. compilerOptions:编译选项（关键）
   1. strict：严格模式（建议关闭）
   2. baseUrl/path：别名
   3. typeRoots：类型declare查找路径
2. include:类型查找文件
   ...待补充

vite.config.ts

1. build:打包配置（配置打包入口，出口等）
2. resole:路径别名 ...待补充

发布

开发完成，运行npm run build进行打包，然后通过npm login 输入账号密码（密码不可见）登录npm ，最后通过npm publish发布（发布时需要保证name不重复和并且改变版本号）

使用

运行npm install goodteng-ui --save

1. 按需引入 import {BasicTable} from 'goodteng-ui',导入样式 import 'goodteng-ui/es/style.css'
2. 全局引入 import GT from 'goodteng-ui' import { BasicTable } from 'goodteng-ui' app.use(GT,[{key,value}]) 例如： app.use(GT, [{ key: 'BasicTable', value: BasicTable }])