深入理解Vue-cli搭建项目后的目录结构探秘

我最近也在研究Vue-cli的路上，今天了解一下Vue-cli目录结构，那么今天也算个学习笔记吧！

一、前言

这里先说一下使用vue-cli之前的事情。

由于刚刚接触Vue不久，就接到了一个移动端项目，于是打算使用vue来进行一次尝试，所以按照练习时候的样子，emmm先把vue.js引入网页里来，emmm自己的外联main.css样式引进来，还有自己的main.js文件，还有一些图片布拉布拉的，所以我整个项目的结构如下：（捂脸）

├── css

├── images

├── index.html

└── js

由于之前我连路由，组件什么的都不会用，所以项目效果可想而知，连点击文章标题显示文章都是用弹窗来实现的（捂脸），一按返回就退出了整个网页有木有，体验效果极其糟糕，于是自己强行加了几个“返回”按钮，（实际就是v-show的切换emmmm），各种栏目的切换也是通过这个，然后。。。产品就要求我改了，啊啊没办法，只好重写咯，这时学长推荐了使用vue-cli来快速开发，于是就开始了vue-cli的尝试之旅

二、Vue-cli 使用旅程

之前看Vue官方文档的安装的时候，在命令行工具那里看见了 vue-cli 的安装，也尝试过，不过也就是初始化了一个项目，然后看见哇竟然自动在本地localhost:8080跑起来了，觉得很神奇，然后。。就没管它了，感觉自己像个智障，然后之前初始化的也找不到了，然后就重新初始化了一个项目，命令如下

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

# 安装依赖，走你

$ cd my-project

$ npm install

$ npm run dev

没错，我就是直接从官网复制粘贴过来的，不过把 my-project 改成了 campusnews，emmm..在VSCode上把文件夹打开一看，我屮艸芔茻，这些都是什么玩意，这么一大堆东西，鬼都看不懂哦，不说了，放上来体会一下：

.......算了，本来打算用tree生成一下所有的结构树，还是就展示一下主目录吧～

├── build

├── config

├── index.html

├── node_modules

├── package.json

├── package-lock.json

├── README.md

├── src

└── static

看不懂哦，只好去找找资料了，以下是我经过查找资料和自己的理解来讲述的，如有错误希望指正～

1. build

这里主要是放webpack的一些配置，webpack是前端网站的一种打包工具，具体的可以去这个链接看看哦，是别人翻译好的。

webpack中文指南

目录结构：

├── build.js

├── check-versions.js

├── dev-client.js

├── dev-server.js

├── utils.js

├── vue-loader.conf.js

├── webpack.base.conf.js

├── webpack.dev.conf.js

└── webpack.prod.conf.js

（1）build.js

build文件夹里有一个 build.js ，是我们完成项目之后需要运行的， 可以将我们的项目文件打包成 静态文件，存放在项目根目录的 dist 文件夹中（现在目录里还没有这个文件夹，build的时候会自动生成），当然你可以自己设置路径，是在。。应该是在 config 文件夹中的 index.js 中改，可以指定主页，默认是 index.html。

（2）check-versions.js

主要是检查一些所依赖的工具的版本是否适用，如nodejs、npm，若版本太低则会提示出来。

（3）dev-client.js

应该是本地客户端开发中有关热更新的吧～

（4）dev-server.js

是一个用作服务器端的东西，涵盖了express和它的一些模块，为了在本地服务器上把我们的项目跑起来的一个文件，引入了反向代理的模块，我们可以用来发起跨域请求。

（5）utils.js

（是一个功能模块？）里面引入了一些css-loader，以便于解析各种格式的css，如 less，sass 什么的。

（6）vue-loader.conf.js

它把上面的 utils.js 引入了，应该是用于切换 开发模式和 生产模式的文件吧，以便于用不同模式来解析css。

下面那三个我只知道是webpack的一些打包的设置，比如指定入口文件啊，依赖安装路径啊，对不同后缀的文件用不同的loader去解析呀什么的。目前不了解这个也对我们开发项目影响不大～

2. config

不知道干啥的，应该是配置文件

3.node_modules

依赖所存在的文件，就是我们一开始使用 npm install 安装的东西，都在里面，以后我们要添加依赖也是放在这个里面，可能有人会又疑问，你 npm install 后面啥也没加啊，你安装了啥。一看就是不了解 npm 的人（虽然我也不了解（捂脸）），npm install 可以从当前根目录中的 package.json 文件中读取所要安装的模块的名称和版本，然后一次性安装所有的依赖。

4.src

终于到了最重要的部分，src目录就是一般我们需要写的地方了，先放一下目录结构：

├── App.vue

├── assets

├── components

├── main.js

└── router

（1）App.vue 是我们的主组件，也是我们所有组件和路由的出口，之后他会被渲染到我们项目根目录的 index.html 中显示出来，我们可以在这里写一些适合全局的css样式，比如说 css reset，字号，字体什么的。

（2）assets 

是我们放一些静态图片资源的目录，虽然我没有放图片在里面。

（3）components

这里存放的是我们写的各种组件，各个组件联系在一起组成一个完整的项目

（4）router

我们定义路由的地方，虽然也可以直接在 main.js 中直接定义，但是分开的话结构更加清晰，路由的定义我们下次再说～

（5）main.js

入口文件，引入了 vue模块 和 app.vue 组件 以及 路由router，我们需要在全局使用的一些东西也可以定义在这里面。

5.static

用于存放我们需要使用的一些外部的js、css文件，需要使用的时候从这里引到文件内。

├── package-lock.json

├── README.md

第一个我不知道是干啥的，第二个就是写说明文档的咯。

好了，至此整个vue-cli的目录我们都过了一遍，虽然我写的不是很详细，甚至有错误，待我慢慢学习并更新咯，希望各位看官老爷能指出，谢谢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # cli  # 目录结构  # 项目结构  # 搭建项目结构  # vue-cli3搭建项目的详细步骤  # vue-cli2.0转3.0之项目搭建的详细步骤  # 用Vue-cli搭建的项目中引入css报错的原因分析  # 使用Vue-cli 3.0搭建Vue项目的方法  # vue-cli3 从搭建到优化的详细步骤  # vue-cli webpack模板项目搭建及打包时路径问题的解决方法  # 详解Vue使用 vue-cli 搭建项目  # 详解搭建一个vue-cli的移动端H5开发模板  # vue-cli5搭建vue项目的实现步骤  # 自己的  # 不了解  # 是一个  # 是在  # 放在  # 应该是  # 引入了  # 干啥  # 布拉  # 的人  # 主要是  # 上把  # 的是  # 都是  # 我也  # 几个  # 文档  # 还没有  # 在这里  # 我不 

相关文章： 如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  子杰智能建站系统｜零代码开发与AI生成SEO优化指南  建站主机系统SEO优化与智能配置核心关键词操作指南  我的世界制作壁纸网站下载,手机怎么换我的世界壁纸？  制作网站公司那家好,网络公司是做什么的？  安云自助建站系统如何快速提升SEO排名？  如何用VPS主机快速搭建个人网站？  ,柠檬视频怎样兑换vip？  武汉网站制作费用多少,在武汉武昌，建面100平方左右的房子，想装暖气片，费用大概是多少啊？  建站中国官网：模板定制+SEO优化+建站流程一站式指南  免费制作小说封面的网站有哪些,怎么接网站批量的封面单？  网站制作的软件有哪些,制作微信公众号除了秀米还有哪些比较好用的平台？  教学网站制作软件,学习*后期制作的网站有哪些？  独立制作一个网站多少钱,建立网站需要花多少钱？  nginx修改上传文件大小限制的方法  免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面，最好是免费的？  公司网站设计制作厂家,怎么创建自己的一个网站？  Dapper的Execute方法的返回值是什么意思 Dapper Execute返回值详解  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  如何快速搭建高效WAP手机网站？  代刷网站制作软件,别人代刷火车票靠谱吗？  网站制作难吗安全吗,做一个网站需要多久时间？  c# 在高并发场景下，委托和接口调用的性能对比  如何通过建站之星自助学习解决操作问题？  番禺网站制作公司哪家值得合作,番禺图书馆新馆开放了吗？  如何设计高效校园网站？  建站之星Pro快速搭建教程：模板选择与功能配置指南  建站168自助建站系统：快速模板定制与SEO优化指南  动图在线制作网站有哪些,滑动动图图集怎么做？  如何使用Golang安装API文档生成工具_快速生成接口文档  c++怎么用jemalloc c++替换默认内存分配器【性能】  如何在宝塔面板创建新站点？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  标准网站视频模板制作软件,现在有哪个网站的视频编辑素材最齐全的，背景音乐、音效等？  如何快速搭建高效WAP手机网站吸引移动用户？  一键制作网站软件下载安装,一键自动采集网页文档制作步骤？  如何在Windows服务器上快速搭建网站？  如何快速建站并高效导出源代码？  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  制作电商网页,电商供应链怎么做？  如何用y主机助手快速搭建网站？  c# F# 的 MailboxProcessor 和 C# 的 Actor 模型  网站制作说明怎么写,简述网页设计的流程并说明原因？  定制建站策划方案_专业建站与网站建设方案一站式指南  如何在宝塔面板中创建新站点？  北京营销型网站制作公司,可以用python做一个营销推广网站吗？  湖州网站制作公司有哪些,浙江中蓝新能源公司官网？  英语简历制作免费网站推荐,如何将简历翻译成英文？  广州顶尖建站服务：企业官网建设与SEO优化一体化方案