我最近也在研究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上把文件夾打開一看，我屮