# 手写Vue2源码
**Repository Path**: syriansoldier/handwritten--vue2-source-code
## Basic Information
- **Project Name**: 手写Vue2源码
- **Description**: 从0到1, 手写一个mini版Vue2源码, 力争原汁原味.
搭配 详细的README.md文档和注释
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-19
- **Last Updated**: 2022-05-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 手写Vue2源码
## branch1: rollup打包环境配置
> 能用起来就好,不追究rollup语法 为了将js文件打包, 方便调试
1. 项目根目录搭建为
根目录
└─src
└─index.js
└─package.json
└─rollup.config.js
└─.babelrc
└─ README.md
2. 安装依赖包
- 命令: `npm i rollup rollup-plugin-babel @babel/core @babel/preset-env -D`
3. package.json中添加dev脚本
```js
"scripts": {
"dev": "rollup -cw"
}
```
4. rollup.config.js的配置
```js
import babel from 'rollup-plugin-babel'
export default {
// 入口
input: './src/index.js',
// 出口
output: {
file: './dist/vue.js',
name: 'Vue',
format: 'umd',
sourcemap: true
},
// 插件
plugins: [
babel({
exclude: 'node_modules/**'
})
],
}
```
5. .babelrc的配置
```js
{
"presets":[
"@babel/preset-env"
]
}
```
6. 测试打包
6-1. src下新建index.js, 目录如下
根目录
└─src
└─ + index.js
└─package.json
└─rollup.config.js
└─.babelrc
└─ README.md
6-2. index.js代码如下
```js
export const a = 1;
export default
```
6-3. 运行命令, 查看dist目录下出现vue.js即可
运行`npm run dev`
6-4. 直接在打包出的dist目录下新建index.html, 引入打包后的vue.js
index.html内容:
```html
```