Vue-cli 项目结构简介

ぃ、小莉子 提交于 2019-12-12 02:38:43

Vue-cli 项目结构简介

这篇来大致的介绍一下整个项目的目录。

首先来看一下整个结构目录

在这里插入图片描述

接下来从上到下的看一下每个文件以及文件是干嘛的

在这里插入图片描述

build 文件夹 及 子目录

这里面是一些webpack的配置,主要用于项目打包时的一些设置。这里不去更详细的深入,相关的文件及配置会在后面用到时在详细的介绍。

在这里插入图片描述

config 文件 及 子目录

这个文件夹里装的是整个项目 开发运行时的一些配置,比如npm run dev 时 项目的启动端口 之类的 。

在这里插入图片描述
node_modules 文件 及 子目录

这个文件夹里面全部都是node的一些基础的依赖包,当我们拓展的安装一些别的插件时 也会装在这个文件夹里。
在这里插入图片描述

src 文件 及 子目录

这个文件夹 是 整个项目的主文件夹 , 我们的代码大部分都在这里完成。来具体的看一下里面的内容:

在这里插入图片描述

assets 文件夹里面主要放置一些资源文件。比如js 、css 之类的文件。

在这里插入图片描述

components 文件夹可以说是vue 的 灵魂了 , 组件文件全部都可以放到这里面。

组件 !一个vue项目就是由一个个的组件拼装起来的。

在这里插入图片描述

router 文件夹 及 子目录

这个文件夹里的是整个vue项目的路由,vue 是单页面应用的代表,这里面就是设置一个一个组件的地址的文件。
在这里插入图片描述

app 文件

这个文件是整个项目的入口文件,相当于包裹整个页面的最外层的div。

在这里插入图片描述

main.js 文件

这个文件是项目的主js,全局的使用的各种变量、js、插件 都在这里引入 、定义。

在这里插入图片描述

static 文件夹 及 子目录

这个文件夹里是一些静态资源文件。

在这里插入图片描述
这个四个文件是项目自带文件 基本上用不到。

在这里插入图片描述

index 文件就是项目的承载页面。

在这里插入图片描述
package 文件是整个项目用的到的所有的插件的json的格式 比如 这个插件的 名称 , 版本号。 当在项目里使用npm install 时 node 会自动安装, 这个文件里的所有插件。

在这里插入图片描述
这是项目的一些说明文件。

这样整的项目的结构就大体的捋顺了 一遍 。

哦,对了还有一个文件夹没有出现 ,那就是;

在这里插入图片描述

这个dist 文件夹 是在执行了 npm run build 打包指令之后才会出现的, 整个项目写好之,打包出来的所有文件都会在这里,只需要访问文件夹里的index文件可以进入应用了。
在这里插入图片描述

————————————————
版权声明:本文为CSDN博主「chao2458」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/chao2458/article/details/81284522

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!