从一个Vite Vue项目开始 - 整体设计

从一个Vite Vue项目开始

vite 是一个新型的前端构建工具，能够显著的提升前端的开发构建效率，经过几年的发展逐渐的完善和稳定。组件库将以 vite 进行开发构建：

创建一个Vue项目，按照提示选择 Vue 和 Typescript 即可，其他均为默认配置

yarn create vite

为了开发方便，我们需要简单调整一下项目的配置，设置路径的别名

项目的组件内容我们将放到 src/vscode 目录进行开发，为了资源引入方便，将设置路径别名 vscode 指代 src/vscode 这个路径

// tsconfig.app.json
{
  "compilerOptions": {
	// ...
	"paths": {
      "vscode/*": ["./src/vscode/*"],
      "@/*": ["./src/*"]
    },
	// ...
  }
}

同时为vite配置路径别名，才能在编译运行时正确解析路径:

// vite.config.ts
export default defineConfig({
  // ...
  resolve: {
    alias: {
      vscode: path.resolve(__dirname, "./src/vscode"),
      "@": path.resolve(__dirname, "./src"),
    },
  },
  // ...
})

安装项目基础依赖

yarn add monaco-editor less @vueuse/core

至此我们一个简单的项目结构就创建好了，最后我们整个项目的结构如下所示:

├─src
│  ├─vscode 组件库开发目录
│  │  ├─index.ts
│  ├─assets
|  ├─App.vue
|  ├─main.ts
|  ├─style.css
|  ├─vite-env.d.ts
├─index.html
├─package.json
├─tsconfig.app.json
├─tsconfig.node.json
├─tsconfig.json
├─vite.config.ts

项目的整体设计

• 为了项目结构的简单性和扩展性，项目将采用数据视图独立的模式，通过响应式Store 控制页面数据和逻辑处理，Vue组件主要负责Store 数据的渲染。
• 同时将对组件设计进行拆分，包括文件树组件, 文件Tab组件，编辑器组件, 依赖安装组件, 搜索组件等，这样能够让组件的使用是可插拔的，通过一个全局的上下文组件进行初始化和数据控制。
• 采用面向接口编程，通过TS接口定义，对项目Store 类设计进行抽象，使得项目的开发思路更加清晰；将抽象出文件管理接口，编辑器控制接口, 搜索控制接口

组件库整体结构如下图所示:

小结

这篇文章主要接受项目的基础技术选型并搭建一个简单的开发环境；同时介绍了项目的整体结构设计和设计原因；

大家有任何技术问题欢迎下方提问，我会尽快为大家解答.