第一章节 搭建mini-vue3框架【手摸手带你实现一个vue3】

大家好,我是作曲家种太阳,本次的专栏会带你一步步实现一个mini-vue3,每个小节都都回有一些测试,验证当前的一个逻辑,并且我已经把代码上传到github上了,可以根据每个章节去看对应的源码提交记录。

本章搭建 mini-vue 的环境,只有少量代码,预计15分钟搞定

第一步:创建项目结构

bash 复制代码
mkdir mini-vue3
cd mini-vue3
code .
npm init -y

项目结构规划

md 复制代码
mini-vue3/
├── packages/                 
│   ├── vue/                 # 框架入口、打包配置、测试实例
│   ├── shared/              # 工具函数公共模块
│   ├── compiler-core/       # 编译器核心模块
│   ├── compiler-dom/        # 编译器 DOM 相关模块
│   ├── reactivity/          # 响应式系统模块
│   ├── runtime-core/        # 运行时核心模块
│   └── runtime-dom/         # 浏览器运行时模块
└── tsconfig.json            # TypeScript 配置

第二步:配置 TypeScript

在项目根目录下创建 tsconfig.json

json 复制代码
// https://www.typescriptlang.org/tsconfig,也可以使用 tsc -init 生成默认的 tsconfig.json 文件进行属性查找

{

// 编辑器配置

"compilerOptions": {

// 根目录

"rootDir": ".",

// 严格模式标志

"strict": true,

// 指定类型脚本如何从给定的模块说明符查找文件。

"moduleResolution": "node",

// https://www.typescriptlang.org/tsconfig#esModuleInterop

"esModuleInterop": true,

// JS 语言版本

"target": "es5",

// 允许未读取局部变量

"noUnusedLocals": false,

// 允许未读取的参数

"noUnusedParameters": false,

// 允许解析 json

"resolveJsonModule": true,

// 支持语法迭代:https://www.typescriptlang.org/tsconfig#downlevelIteration

"downlevelIteration": true,

// 允许使用隐式的 any 类型(这样有助于我们简化 ts 的复杂度,从而更加专注于逻辑本身)

"noImplicitAny": false,

// 模块化

"module": "esnext",

// 转换为 JavaScript 时从 TypeScript 文件中删除所有注释。

"removeComments": false,

// 禁用 sourceMap

"sourceMap": false,

// https://www.typescriptlang.org/tsconfig#lib

"lib": ["esnext", "dom"],
"paths": {
      "@vue/*": ["packages/*/src"]
    }

},

// 入口

"include": [

"packages/*/src"

]

}

第三步:配置 Prettier

为了保持代码风格统一,使用 Prettier 进行代码格式化:

  • 安装 VSCode 插件:Prettier - Code formatter
  • 在项目根目录创建 .prettierrc 文件:
json 复制代码
{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

第四步:配置 Rollup 打包工具

安装依赖:

bash 复制代码
npm install -D rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript typescript tslib

创建配置文件 rollup.config.js

js 复制代码
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript'

export default [{
  input: 'packages/vue/src/index.ts',
  output: [{
    sourcemap: true,
    file: 'packages/vue/dist/vue.js',
    format: 'iife',
    name: 'Vue'
  }],
  plugins: [
    typescript({ sourceMap: true }),
    resolve(),
    commonjs()
  ]
}]

packages/vue/src/index.ts 中写入:

ts 复制代码
console.log('hello mini-vue3')

配置构建命令,在 package.json 中添加:

json 复制代码
"scripts": {
  "build": "rollup -c"
}

 "type": "module",

执行构建:

bash 复制代码
npm run build

第五步:配置路径映射

tsconfig.json 中添加路径映射:

json 复制代码
"paths": {
  "@vue/*": ["packages/*/src"]
}

使用示例:

ts 复制代码
import { isArray } from '@vue/shared'

本小节完成以后的目录结构

小结

本章节我们完成了:

  1. 手动创建并初始化 mini-vue3 项目结构
  2. 配置 TypeScript 编译环境
  3. 引入 Prettier 控制代码风格
  4. 使用 Rollup 进行打包配置
  5. 设置路径映射,优化模块引入方式

至此,一个初步框架项目的基础结构已经搭建完成,接下来我们将正式进入 Vue 核心模块的实现阶段!

相关推荐
GIS之路17 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴25 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥29 分钟前
HTML之表单结构全解析
前端·html
聪聪的学习笔记40 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客3 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim3 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js