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

本文链接：https://blog.csdn.net/W1391517383/article/details/147474546

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

第一步：创建项目结构

bash

代码解读

复制代码

mkdir mini-vue3 cd mini-vue3 code . npm init -y

项目结构规划

代码解读

复制代码

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：

代码解读

复制代码

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 中写入：

代码解读

复制代码

console.log('hello mini-vue3')

配置构建命令，在 package.json 中添加：

json

代码解读

复制代码

"scripts": { "build": "rollup -c" } "type": "module",

执行构建：

bash

代码解读