vue项目结构目录简介

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

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

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文件可以进入应用了。

最后总结一下吧 ----

引自：CSDNchao2458

vue项目结构目录简介相关推荐

vue项目结构目录介绍
一:目录结构介绍二:项目介绍 build 文件夹及子目录这里面是一些webpack的配置,主要用于项目打包时的一些设置.这里不去更详细的深入,相关的文件及配置会在后面用到时在详细的介绍. co ...
[vue] 说下你的vue项目的目录结构，如果是大型项目你该怎么划分结构和划分组件呢？
[vue] 说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢? views目录存放一级路由的组件,即视图组件 Components目录存放组件 Store存放vuex相关文件 ...
Vue.js教程-Vue项目的目录结构和.vue文件的构成
Vue.js教程-Vue项目的目录结构和.vue文件的构成前言 Vue项目的目录结构(Vue-cli3/4版本) .vue文件的构成 Html区域(template) script区域 export ...
vue项目结构php写哪里,怎样使用vuex项目结构目录与配置
这次给大家带来怎样使用vuex项目结构目录与配置,使用vuex项目结构目录与配置的注意事项有哪些,下面就是实战案例,一起来看一下. vuex需要遵守的规则: 一.应用层级的状态应该集中到单个 stor ...
vue项目结构php写哪里,vuex项目结构目录与配置使用详解
这次给大家带来vuex项目结构目录与配置使用详解,使用vuex项目结构目录与配置的注意事项有哪些,下面就是实战案例,一起来看一下. 首先先正经的来一段官网的"忠告": vuex需要 ...
vue项目结构及启动文件加载过程分析
vue项目结构及启动文件加载过程分析一.vue项目结构 1.导入项目准备好开发工具Visual Studio Code,导入生成的项目案例.我的Vue版本: 2.项目目录及文件说明 2.1.项目主 ...
vue项目结构(未抽离成.vue文件前的结构)
最终效果 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
vue项目结构php写哪里,Vue-cli搭建项目后目录结构的分析（图文）
这篇文章给大家介绍的文章内容是关于Vue-cli搭建项目后目录结构的分析,有很好的参考价值,希望可以帮助到有需要的朋友. 1.前言 Vue并不限制你的代码结构.但是,它规定了一些需要遵守的规则: 1. ...
（已解决）IDEA 导入Vue项目没有目录结构的问题
一开始导入Vue项目,发现没有目录结构,没有文件夹. 因此去网上搜了一圈,发现了以下的解决方案: 1.打开FIle下的Project Structure项目结构. 2.在modules下点击+号导入m ...
Vue项目开发目录结构和引用调用关系
本文精华总结:在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件 ...

vue项目结构目录简介

vue项目结构目录简介相关推荐

最新文章

热门文章