vue-cli3 项目目录结构浅析
上文写了如何使用 Vue Cli3 创建一个 Vue 项目,今天分析一下 Vue cli3 项目的目录结构
结构列表
目录.png
1.node_modules 项目依赖目录
这里面存放的是项目的相关依赖和插件
依赖就是项目启动所必须的前置文件或者代码
插件可以帮助项目实现更多功能的,或者让某些功能变得更便捷,健壮
2.public 静态资源目录
特性: 1.此目录下的文件不会经过webpack打包 2.该目录下的文件使用根目录调用
基本文件:
项目ico图标: favicon.ico
母板文件: index.html
可选文件:
可选文件根据项目需求,是否创建(例如: img等)
3.src 资源目录
assets 静态资源目录
项目中需要的 img js css 文件都在该目录下
components 公共组件目录
在vue中,公共组件是很重要的一个功能,此目录就是用于存放组件
router 路由目录
路由配置文件: index.js 用于定义与使用路由
store 状态管理目录
store管理文件: index.js 相当于vue的缓存仓库以及状态管理器,详细可以查阅相关文档
views 页面目录
项目的大部分代码都在这里,用于存放vue项目的各个页面(也叫做 组件)
根组件
根组件: App.vue 也叫做顶级组件,所有组件都是挂载在 App.vue 之上运行,相当于index.html文件调用了这个根组件,根组件再调用别的组件
入口文件
项目的入口文件: main.js 通过此入口文件,引入 App.vue, router, store等,到项目中才能使用,并且 插件,组件 如果想要全局使用,都必须在该文件下 注册,使用.
4.项目描述文件
package.json
包含项目的描述信息,比如: 项目名称,版本号,入口文件名,关键字,作者,依赖列表,等等
5.项目配置文件
vue.config.js
是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
目录中还有一个 babel.config.js 文件,当你使用了 基于vue开发的 ui 时,需要在该文件下进行配置
粗略的介绍了 vue-cli3 所构建项目的目录结构,看完目录结构接下来就要准备代码的开发了.
前端的基本能力不仅仅是写炫酷的静态页面,还需要通过接口和后端的同事进行数据交互,那我们一个人的时候该如何开发呢?明天处理如何一个人"完成"项目
网友评论