一、前言
這裏先說一下使用vue-cli之前的事情。
由於剛剛接觸Vue不久，就接到了一個移動端項目，於是打算使用vue來進行一次嘗試，所以按照練習時候的樣子，emmm先把vue.js引入網頁裏來，emmm自己的外聯main.css樣式引進來，還有自己的main.js文件，還有一些圖片布拉布拉的，所以我整個項目的結構如下：（捂臉）
1 2 3 4 5 6 7 | ├── css├── images├── index.html└── js |
由於之前我連路由，組件什麼的都不會用，所以項目效果可想而知，連點擊文章標題顯示文章都是用彈窗來實現的（捂臉），一按返回就退出了整個網頁有木有，體驗效果極其糟糕，於是自己強行加了幾個“返回”按鈕，（實際就是v-show的切換emmmm），各種欄目的切換也是通過這個，然後。。。產品就要求我改了，啊啊沒辦法，只好重寫咯，這時學長推薦了使用vue-cli來快速開發，於是就開始了vue-cli的嘗試之旅
二、Vue-cli 使用旅程
之前看Vue官方文檔的安裝的時候，在命令行工具那裏看見了 vue-cli 的安裝，也嘗試過，不過也就是初始化了一個項目，然後看見哇竟然自動在本地localhost:8080跑起來了，覺得很神奇，然後。。就沒管它了，感覺自己像個智障，然後之前初始化的也找不到了，然後就重新初始化了一個項目，命令如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | # 全局安裝 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生成一下所有的結構樹，還是就展示一下主目錄吧～
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ├── build├── config├── index.html├── node_modules├── package.json├── package-lock.json├── README.md├── src└── static |
看不懂哦，只好去找找資料了，以下是我經過查找資料和自己的理解來講述的，如有錯誤希望指正～
1. build
這裏主要是放webpack的一些配置，webpack是前端網站的一種打包工具，具體的可以去這個鏈接看看哦，是別人翻譯好的。
目錄結構：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | ├── 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目錄就是一般我們需要寫的地方了，先放一下目錄結構：
1 2 3 4 5 6 7 8 9 | ├── 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文件，需要使用的時候從這裏引到文件內。
1 2 3 | ├── package-lock.json├── README.md |
第一個我不知道是幹啥的，第二個就是寫說明文檔的咯。
原文鏈接：http://www.jianshu.com/p/98a2c971433b?utm_source=tuicool&utm_medium=referral