前端

向右看齐 2022-12-29 09:56 146阅读 0赞

### 文章目录 ###

*  调试，bug排查
 *  基础知识
 *  手写vue

# 调试，bug排查 #

Error in mounted hook: “ReferenceError: Bus is not defined”【没有引入/导出该函数，而调用了该函数就报错了】  
js是单线程的，一个错误不会造成另一个错误，即不会有错误链  
调试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 1]

# 基础知识 #

webpack：开发应用时的打包工具（类似maven）  
rollup：开发库/框架时的打包工具  
@babel/core 安装babel核心依赖，  
@babel/preset-env 讲es6高级语法转成es5低级语法【这是一个映射，是很多插件的集合】  
rollup-plugin-babel 这是一个rollup整合babel的插件  
rollup-plugin-serve 本地启动一个静态服务，帮我们跑html…  
cross-env 设置环境变量， 这个迷你的包(cross-env)能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。是运行跨平台设置和使用环境变量的脚本

# 手写vue #

新建文件夹  
dim-vue  
进入命令行执行  
npm init -y  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 2]

写框架，需要讲es6转为es5，  
npm install rollup @babel/core @babel/preset-env rollup-plugin-babel rollup-plugin-serve cross-env

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70]: /images/20221120/b7ae986fe7424bee8671ea1b82cf2569.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 1]: /images/20221120/7ff47427400f4c12b5fc1f0e4367a45f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201222100654810.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70