我最近也在研究Vue-cli的路上，今天了解一下Vue-cli目錄結(jié)構(gòu)，那么今天也算個(gè)學(xué)習(xí)筆記吧！

一、前言

這里先說一下使用vue-cli之前的事情。

由于剛剛接觸Vue不久，就接到了一個(gè)移動(dòng)端項(xiàng)目，于是打算使用vue來進(jìn)行一次嘗試，所以按照練習(xí)時(shí)候的樣子，emmm先把vue.js引入網(wǎng)頁里來，emmm自己的外聯(lián)main.css樣式引進(jìn)來，還有自己的main.js文件，還有一些圖片布拉布拉的，所以我整個(gè)項(xiàng)目的結(jié)構(gòu)如下：（捂臉）

├── css├── images├── index.html└── js

由于之前我連路由，組件什么的都不會(huì)用，所以項(xiàng)目效果可想而知，連點(diǎn)擊文章標(biāo)題顯示文章都是用彈窗來實(shí)現(xiàn)的（捂臉），一按返回就退出了整個(gè)網(wǎng)頁有木有，體驗(yàn)效果極其糟糕，于是自己強(qiáng)行加了幾個(gè)“返回”按鈕，（實(shí)際就是v-show的切換emmmm），各種欄目的切換也是通過這個(gè)，然后。。。產(chǎn)品就要求我改了，啊啊沒辦法，只好重寫咯，這時(shí)學(xué)長推薦了使用vue-cli來快速開發(fā)，于是就開始了vue-cli的嘗試之旅

二、Vue-cli 使用旅程

之前看Vue官方文檔的安裝的時(shí)候，在命令行工具那里看見了 vue-cli 的安裝，也嘗試過，不過也就是初始化了一個(gè)項(xiàng)目，然后看見哇竟然自動(dòng)在本地localhost:8080跑起來了，覺得很神奇，然后。。就沒管它了，感覺自己像個(gè)智障，然后之前初始化的也找不到了，然后就重新初始化了一個(gè)項(xiàng)目，命令如下

# 全局安裝 vue-cli$ npm install --global vue-cli# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目$ vue init webpack my-project# 安裝依賴，走你$ cd my-project$ npm install$ npm run dev

沒錯(cuò)，我就是直接從官網(wǎng)復(fù)制粘貼過來的，不過把 my-project 改成了 campusnews，emmm..在VSCode上把文件夾打開一看，我屮艸芔茻，這些都是什么玩意，這么一大堆東西，鬼都看不懂哦，不說了，放上來體會(huì)一下：

.......算了，本來打算用tree生成一下所有的結(jié)構(gòu)樹，還是就展示一下主目錄吧～

├── build├── config├── index.html├── node_modules├── package.json├── package-lock.json├── README.md├── src└── static

看不懂哦，只好去找找資料了，以下是我經(jīng)過查找資料和自己的理解來講述的，如有錯(cuò)誤希望指正～

1. build

這里主要是放webpack的一些配置，webpack是前端網(wǎng)站的一種打包工具，具體的可以去這個(gè)鏈接看看哦，是別人翻譯好的。

webpack中文指南

目錄結(jié)構(gòu)：

├── 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