深入理解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