我是用脚手架cli 4.0.5版本创建的vue项目
在这里插入图片描述
得到的vue的项目结构如下
在这里插入图片描述
接下来就好好分析一下各个文件的用途


1.npm相关文件

在这里插入图片描述

  • node_modules
    npm是一个包管理器,可以安装很多别人的包,那么我们安装的包呢就放在node_modules里面
  • package.json
    在这里插入图片描述
    我们安装了哪些包会在package.json里面做记录
    主要存放项目依赖项的安装目录,dependencies为生产依赖,devDependencies为开发依赖
  • package-lock.json
    它是为了防止你需要重新安装项目时,下的包版本不一样,这里记录了你下载的包的详细信息,锁住版本号,防止出现因为版本不一样带来的问题

2.写项目的源码文件

在这里插入图片描述

  • src(source的简写)
    这里放的就是你写项目用的源码了,这里的内容就都是你写的并且和你项目相关的内容
  • assets
    在这里插入图片描述
    放一些静态资源,比如常用的图片
  • components(组件)
    在这里插入图片描述
    放一些vue的组件,vue是用组件化的思想来写页面的,也就是一个页面是由很多大大小小的组件组合而成的,components是小组件,一般写一些功能组件啥的
  • router(路由)
    在这里插入图片描述
    整个vue项目的路由,vue 是单页面应用的代表,这里面就是设置一个一个组件的地址的文件。决定了页面的跳转规则。
  • store
    好像是和vue-x有关的,我才上路,没学到,先不管
  • views
    在这里插入图片描述
    页面组件,里面存放的都是一个一个单个的页面。它相对于components来说,它是大组件,它能引用小组件。
  • App.vue
    根组件。所有的页面都是app.vue下面切换的,可以理解为所有组件都是app.vue的子组件,可以把头部底部每个页面都出现的文件都放在app.vue里面,以及在里面写公用的css代码。
  • main.js
    这个文件是项目的主js,全局的使用的各种变量、js、插件 都在这里引入 、定义。
    并且也是对所需要插件的引用。

3.public

在这里插入图片描述
可以在浏览器地址栏范围public文件夹里面的东西,经常把一下需要用户下载的东西放到这里。

  • index.html
    在这里插入图片描述
    项目的承载页面,项目的入口页面而已

项目加载的过程是index.html->main.js->app.vue->/router/index.js->helloworld.vue。

参考链接:
https://blog.csdn.net/chao2458/article/details/81284522
https://blog.csdn.net/weixin_40881970/article/details/85159795
https://www.jianshu.com/p/31ed2f50aa88
https://blog.51cto.com/14041091/2308776
https://www.jianshu.com/p/2769efeaa10a
https://www.zhihu.com/collection/361449373
https://segmentfault.com/q/1010000016759573
https://blog.csdn.net/AI_U20/article/details/88531065

Logo

前往低代码交流专区

更多推荐