Vue 项目文件结构介绍

举报
SHQ5785 发表于 2024/04/24 10:20:01 2024/04/24
【摘要】 一、文件介绍main.js是项目主入口文件,主要作用是初始化vue实例,并引入所需插件;App.vue是项目主组件,所有页面都是在App.vue下进行切换的。也可以理解为所有的路由是App.vue的子组件。所以将router标示为App.vue的子组件。index.html为文件入口;src放置组件和入口文件;node_modules为依赖的模块;config中配置了路径端口值等;buil...

一、文件介绍

  1. main.js是项目主入口文件,主要作用是初始化vue实例,并引入所需插件;
  2. App.vue是项目主组件,所有页面都是在App.vue下进行切换的。也可以理解为所有的路由是App.vue的子组件。所以将router标示为App.vue的子组件。
  3. index.html为文件入口;
  4. src放置组件和入口文件;
  5. node_modules为依赖的模块;
  6. config中配置了路径端口值等;
  7. 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": "node build/dev-server.js"

也就是其实执行的是dev-server.js这个文件,里面有定义

var webpackConfig = require('./webpack.dev.conf');

因为vue-cli这个脚手架工具是用webpack来打包项目文件的,依赖的webpack.dev.conf文件里又定义了

var baseWebpackConfig = require('./webpack.base.conf');

在这个依赖webpack.base.conf文件里面entry入口文件中就配置了

app: './src/main.js'

所以,当你运行npm run dev的时候,就从main.js这个入口文件开始执行了。

三、注

main.js

/*关闭生产模式下给出的提示*/
Vue.config.productionTip = false

四、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。