面试题：Vue组件库开发之基础结构搭建

Question

在开发一个Vue组件库时，简要说明如何搭建项目的基础结构，包括目录结构规划、项目初始化以及需要安装的核心依赖有哪些。

Answer 1

目录结构规划

1. src 目录：存放项目的主要源代码。
   • components：放置所有的 Vue 组件，每个组件一个文件夹，文件夹内包含 index.vue（组件的主体）、styles（存放组件相关样式文件）等，如 button 组件对应 src/components/button/index.vue。
   • styles：存储全局样式文件，如 global.css 用于定义全局通用样式。
   • utils：放置一些工具函数，例如 http.js 用于封装网络请求相关函数。
   • index.js：用于将所有组件进行统一导出，方便在其他项目中引入整个组件库。
2. example 目录：用于展示组件库的使用示例，方便开发过程中测试组件。
   • components：示例中使用到的自定义组件。
   • pages：各个示例页面，如 buttonPage.vue 展示按钮组件的不同用法。
   • main.js：示例项目的入口文件，配置 Vue 实例等。
3. docs 目录：存放组件库的文档，可使用 Markdown 文件描述每个组件的用法、属性等。
4. dist 目录：项目打包后生成的文件，用于发布组件库。

项目初始化

1. 确保已安装 Node.js 和 npm（或 yarn）。
2. 在命令行中，进入项目创建目录，执行 vue create -p vuejs-templates/preset-vue-component my - component - library（使用 Vue CLI 快速创建基于组件库模板的项目，my - component - library 为项目名称）。如果没有安装 vue - cli，先执行 npm install -g @vue/cli 进行安装。
3. 按照提示选择配置，如选择 Vue 版本、是否使用 ESLint 等。

核心依赖安装

1. Vue：Vue 组件库开发的基础，执行 npm install vue 或 yarn add vue。
2. Vue - Loader：将 Vue 单文件组件 (.vue) 转换为 JavaScript，执行 npm install vue - loader 或 yarn add vue - loader。在 Vue CLI 创建的项目中，vue - loader 通常会被自动安装并配置好相关依赖。
3. Babel：用于将 ES6+ 代码转换为 ES5 代码，以兼容更多浏览器。执行 npm install @babel/core @babel/preset - env 或 yarn add @babel/core @babel/preset - env。在 Vue CLI 创建的项目中，Babel 相关依赖也会自动安装和配置。
4. PostCSS：用于处理 CSS，如添加浏览器前缀等。执行 npm install postcss postcss - loader autoprefixer 或 yarn add postcss postcss - loader autoprefixer。同样，在 Vue CLI 创建的项目中已自动配置相关依赖。
5. Webpack：用于打包项目，在 Vue CLI 创建的项目中，Webpack 及其相关插件已被集成和配置。但如果需要自定义配置，可执行 npm install webpack webpack - cli 或 yarn add webpack webpack - cli。
6. Rollup：用于打包组件库，将组件库打包成各种模块格式（如 UMD、ESM 等）。执行 npm install rollup rollup - plugin - vue @rollup/plugin - commonjs @rollup/plugin - node - resolve @rollup/plugin - babel 或 yarn add rollup rollup - plugin - vue @rollup/plugin - commonjs @rollup/plugin - node - resolve @rollup/plugin - babel。