[VUE]工程目录详解

• 前言

　　在学习Vue3.0的时候，我看完官网上的文档，做完了官网的练习，但是对于整体搭建项目来说还远远不够。

• 工程结构介绍  

　　如图：这是VUE创建工程后的默认工程结构（这里使用的是Vue3.0） 

　　1.node_modules

　　  node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。比如webpack、gulp、grunt这些工具。在node.js中模块与文件是一一对应的，也就是说一个node.js文件就是一个模块。（进行 npm install 后 会生成该文件夹）

　　2.src-assets

　　 存放静态资源的文件夹（目录的路径是相对路径）存放业务级的js、css等，如一些全局的scss样式文件、全局的工具类js文件等。

　　3.src-components

　　 存放所有组件文件，一个VUE项目往往是由一个个的components拼接而成的（通过router）

　　4.src-config

　　配置目录，以及端口等，这里放一张默认生成的代码截图

       

　　5.router

       存放URL和组件的关系，可以理解为全局控制组件所在页面的位置

　　6.utils

        一个VUE项目工程往往有公用的js文件，为了便于统一管理，我们在工程目录下新建一个utils文件夹，用于存放项目公用的js/ts文件

　　7.views

　　 存放页面（视图）的位置，一个页面可以有多个组件

　　8.App.vue

1. App.vue的<div id="app"></div>则是用于具体注入绑定元素的内容
2. 由于Vue组件必须有个根元素，所以App.vue里面，根元素<div id="app"></div>与外层被注入框架index.html中的<div id="app"></div>是一致的
3. index.html中的#app指定绑定目标，而vue文件里的#app提供填充内容，两者在运行时指的是同一个DOM元素

　　9.main.ts

　　  main.js 绑定的#app 是index.html的

　　10.index.html

  　　 index.html中的<div id="app"></div>是指定绑定元素根路径的

• 结束

　　　　以上是对于VUE工程目录的解释，下篇文章将结合文件下的代码来理清各个结构的关系