手把手教你学vuejs(二) vue项目怎么看怎么学

最新推荐文章于 2023-11-21 13:43:52 发布

qqhuzi36

最新推荐文章于 2023-11-21 13:43:52 发布

阅读量2.7k

点赞数 3

分类专栏：技术分享文章标签： vuejs

本文链接：https://blog.csdn.net/qqhuzi36/article/details/90719223

版权

本文介绍了如何逐步学习和理解一个Vue项目，从解析package.json开始，理解webpack配置，深入到render函数、组件、路由、按需加载和适配处理等关键点，提供了详细的步骤和思路。

摘要由CSDN通过智能技术生成

这也是我目前自己这么理解的，可能每个人看代码的过程也不一样，我这里也是拿到一个项目之后不知道如何开始，所以自己在慢慢摸索，然后记录下来，希望自己能不断超越自己。这里我不能把公司项目亮出来，所以。。。只能记个大概
1.先看配置文件package.json，里面定义了这个项目所需要的各个模块，以及项目的配置信息。scripts指定了运行脚本命令的npm命令行缩写，比如dev指定了运行npm run dev时所要执行的命令。

2.我拿到的这个项目在开发环境下通过命令npm run dev来启动的，所以我去package.json文件里找到了scripts配置，其中有设置dev选项，也就是说在运行命令npm run dev时，启动了webpack-dev-server服务，并指定了配置文件webpack.dev.config.js，所以我们接下来就去看webpack.dev.config.js文件。

"scripts": {
"dev": "npm run clean && cross-env NODE_ENV=development webpack-dev-server --config ./config/webpack.dev.config.js"
}
3.看代码不能从第一行开始看，不然看的时候你无法串起来，看完了也不知道在讲啥。这里我看webpack.dev.config.js文件时先看最后输出了什么模块，然后前面肯定是围绕生成这个模块而写的代码，所以我们直接从模块生成的地方开始。里面的一些配置其实根据属性名就能猜出个大概意思，不懂的可以去查官方文档。我这里publicPath还搞得不是很清楚-_-!

4.找到配置文件webpack.dev.config.js中的入口文件，这里是s