vue源码学习-调式环境配置

最新推荐文章于 2024-02-10 16:35:47 发布

我是顾昀峰

最新推荐文章于 2024-02-10 16:35:47 发布

阅读量231

点赞数

分类专栏： vue基础

本文链接：https://blog.csdn.net/qq_42852004/article/details/105174497

版权

vue基础专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.1 调式环境配置–调式源代码学习vue源码

在这里插入图片描述

第一步：github源码下载

https://github.com/vuejs/vue

第二步：安装基础配置和安装rollup

npm i
npm i rollup -g

第三步：在package.json的scripts dev中配置sourceMap(目的是和源码产生映射关系方便打断点)

 "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

第四步：在命令行中输入npm run build（在dist中可以看到vue.js 和他的映射vue.map.js）

npm run build

在这里插入图片描述

第五步：在example中创立自己的调式文件test文件index.html

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue静态资源 -->
    <script src="../../dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>初始化流程</h1>
        <p>{{foo}}</p>
    </div>
</body>
<script>
    const app = new Vue(
        {
            el: '#app',
            data() {
                return {
                    foo: 'test'
                }
            },
        }
    )
</script>
</html>

第六步：在游览器中打开index.html 并且打上断点并能清晰的调式和查看源码的进程

在这里插入图片描述

2.1 vue文件打包出来的文件名的区别

在这里插入图片描述

runtime: 仅包含运行时，不包含编译器

common:cjs规范，用于webpack1（vue.runtime.common.js 可以在node环境下使用符合一些老旧的打包工具或者可以在服务端渲染的时候使用）

esm: ES模块，用于webpack2+（vue.runtime.esm.js 是webpack打包方式，适用于webpack的打包环境）

umd:universal module definition,兼容cjs（兼容node.js）和amd（兼容游览器）,运用于游览器(vue.js 是umd格式的)

我是顾昀峰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue源码学习-调式环境配置

1.1 调式环境配置–调式源代码学习vue源码第一步：github源码下载https://github.com/vuejs/vue第二步：安装基础配置和安装rollupnpm inpm i rollup -g第三步：在package.json的scripts dev中配置sourceMap(目的是和源码产生映射关系方便打断点) "dev": "rollup -w -c scri...
复制链接

扫一扫

专栏目录