vscode下vue的项目结构分析

我是用脚手架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