组件开发模板

使用vue3开发vue组件，本模板只包含必须的依赖，如需使用插件或UI组件，请自行添加依赖。

Recommended IDE Setup

VSCode + Volar (and disable Vetur).

Customize configuration

See Vite Configuration Reference. .editorconfig 用于定义和维护跨不同编辑器和 IDE 之间一致代码风格的文件格式。

eslint和prettier安装包相关说明

"devDependencies": {
  "@eslint/js": "^9.37.0",        // ESLint 基础规则
  "@vue/eslint-config-prettier": "^10.2.0", // Vue 专用：解决 ESLint 与 Prettier 冲突
  "eslint": "^9.37.0",            // ESLint 核心工具
  "eslint-plugin-prettier": "^5.5.4", // 关键：将 Prettier 规则转为 ESLint 可识别错误
  "eslint-plugin-vue": "~10.5.0", // Vue 专用 ESLint 插件
  "prettier": "3.6.2",            // Prettier 核心工具
}

.eslintrc.js

  extends: [
    'plugin:vue/vue3-essential', // 提供基础的代码质量保障
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting', // eslint和prettier同时使用可能会造成格式化冲突，因此，create-vue 脚手架自动帮我们导入了一个插件，用来跳过 esliint 的格式化风格。
    // 如果同时使用了 eslint-plugin-prettier 和 eslint-config-prettier ，可以将此行删除或注释掉，使用下面一行的配置
    'plugin:prettier/recommended',
  ]
  // 注意：使用上面的配置格式化后，不再需要prettier插件，因此.vscode/settings.json文件中的"editor.defaultFormatter": "esbenp.prettier-vscode"已经作废，需要注释或删除

.prettier

.prettierignore

本地测试

运行 npm run build 命令来执行应用的构建，默认情况下，构建会输出到 dist 文件夹中。 运行 npm run preview 命令，启动本地 web服务器,是预览打包后的dist文件。 vite preview 命令会在本地启动一个静态 Web 服务器，将 dist 文件夹运行在 http://localhost:4173。这样在本地环境下查看该构建产物是否正常可用就方便多了。 可以通过 --port 参数来配置服务的运行端口。

Project Setup

pnpm install

Compile and Hot-Reload for Development

pnpm dev

Compile and Minify for Production

pnpm build

Lint with ESLint

pnpm lint

发包相关命令

查看包名是否存在

npm view module-name

是否登录

npm whoami

登录npm

npm login

发包

npm publish