Vue 进阶(二):Vue 项目文件结构介绍
![Vue进阶(二):Vue 项目文件结构介绍](https://static001.geekbang.org/infoq/ad/ada5c23c69c7679349851b0a146fd6e8.jpeg)
一、文件介绍
main.js
是项目主入口文件,主要作用是初始化vue
实例,并引入所需插件;App.vue
是项目主组件,所有页面都是在App.vue
下进行切换的。也可以理解为所有的路由是App.vue
的子组件。所以将router
标示为App.vue
的子组件。index.html
为文件入口;src
放置组件和入口文件;node_modules
为依赖的模块;config
中配置了路径端口值等;build
中配置了webpack
基本配置、开发环境配置、生产环境配置等;
二、Vue 加载 main.js 过程分析
在Vue
工程中使用src/main.js
来加载App.vue
文件,但没有代码写出来框架是如何加载main.js
的,而index.html
中只有一个自定义标签app
,那么工程是如何加载到main.js
文件的呢?
如果你是用vue.js
官网提供的脚手架工具vue-cli
并沿用默认配置的话,执行npm run dev
的时候之所以会出来页面,是因为根目录下的package.json
文件里script
配置了如下信息:
复制代码
也就是其实执行的是dev-server.js
这个文件,里面有定义
复制代码
因为vue-cli
这个脚手架工具是用webpack
来打包项目文件的,依赖的webpack.dev.conf
文件里又定义了
复制代码
在这个依赖webpack.base.conf
文件里面entry
入口文件中就配置了
复制代码
所以,当你运行npm run dev
的时候,就从main.js
这个入口文件开始执行了。
三、注
main.js
复制代码
四、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/393b8b8b1a0f107fe45f8b8f4】。文章转载请联系作者。
评论