我最近也在研究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是前端网站的一种打包工具，具体的可以去这个链接看看哦，是别人翻译好的。
目录结构：
├── 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