但是，我們的專案**，還乙個都沒有看到。因此，這個章節，我們來認識一下所有的檔案。
├── readme.md // 專案說明文件
├── node_modules // 專案依賴包資料夾
├── build // 編譯配置檔案，一般不用管
│ ├── 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├── config // 專案基本設定資料夾
│ ├── dev.env
.js // 開發配置檔案
│ ├── index.js // 配置主檔案
│ └── prod.env
.js // 編譯配置檔案
├── index.html // 專案入口檔案
├── package-lock.json // npm5 新增檔案，優化效能
├── package.json // 專案依賴包配置檔案
├── src // 我們的專案的原始碼編寫檔案
│ ├── assets // 初始專案資源目錄，回頭刪掉
│ │ └── logo.png
│ ├── components // 元件目錄
│ │ └── hello.vue // 測試元件，回頭刪除
│ ├── main.js // 主配置檔案
│ └── router // 路由配置資料夾
│ └── index.js // 路由配置檔案
└── static // 資源放置目錄
vue初始化後得到的乙個專案的完整結構。其他大多數檔案我們是不用管的。如果要管的話，我在後面的章節也會去詳細說明。
我們絕大多數的操作，就是在src這個目錄下面。預設的src結構比較簡單，我們需要重新整理。
另外static資源目錄，我們也需要根據放置不同的資源，在這邊構建不同的子資料夾。
先不要管這些檔案的內容，我們先建立這些空的檔案在這邊。然後我們後面去完善它。
我們的這個專案是要做兩個頁面，乙個是cnodejs的列表頁面，乙個是詳情頁面。
所以，我把專案資料夾整理成如下的結構
├── api // 介面呼叫工具資料夾
│ └── index.js // 介面呼叫工具
├── components // 元件資料夾，目前為空
├── config // 專案配置資料夾
│ └── index.js // 專案配置檔案
├── frame // 子路由資料夾
│ └── frame.vue // 預設子路由檔案
├── main.js // 專案配置檔案
├── page // 我們的頁面元件資料夾
│ ├── content.vue // 準備些 cnodejs 的內容頁面
│ └── index.vue // 準備些 cnodejs 的列表頁面
├── router // 路由配置資料夾
│ └── index.js // 路由配置檔案
├── style // scss 樣式存放目錄
│ ├── base // 基礎樣式存放目錄
│ │ ├── _base.scss // 基礎樣式檔案
│ │ ├── _color.scss // 專案顏色配置變數檔案
│ │ ├── _mixin.scss // scss 混入檔案
│ │ └── _reset.scss // 瀏覽器初始化檔案
│ ├── scss // 頁面樣式資料夾
│ │ ├── _content.scss // 內容頁面樣式檔案
│ │ └── _index.scss // 列表樣式檔案
│ └── style.scss // 主樣式檔案
└── utils // 常用工具資料夾
└── index.js // 常用工具檔案
因為我們刪除了一些預設的檔案，所以這個時候專案一定是報錯的，先不管他，我們根據我們的需求，新建如上的專案結構。這些都是在src目錄裡面的結構。
這個目錄比較簡單，因為這個專案我們的資源不多，但是，為了我的這系列博文能夠適合大多數的專案的開發，一般，我搞成下面這個樣子：
├── css // 放一些第三方的樣式檔案
├── font // 放字型圖示檔案
├── image
// 放檔案，如果是複雜專案，可以在這裡面再分門別類
└── js // 放一些第三方的js檔案，如 jquery
js都寫到裡面去麼，為什麼還要在這邊放呢？
因為，如果是放在src目錄裡面，則每次打包的時候，都需要打包的。這回增加我們的打包專案的時間長度。而且，一些地方放的檔案，我們一般是不會去修改的，也沒必要npm安裝，直接引用就好了。你可以根據自己的情況，對這些可以不進行打包而直接引用的檔案提煉出來，放在資源目錄裡面直接呼叫，這樣會大大的提高我們的專案的打包效率。
好，就這麼搞，我們的檔案架構就搞好了，下一張，我們來開始寫**了。
原文連線
vue專案學習
1 什麼是.vue檔案？vue檔案，是乙個自定義的檔案型別，用類似於html的語法描述乙個vue元件。每個.vue檔案包含三種型別的頂級語言模組,這三個部分分別代表了html,js,css。其中和是支援用預編譯語言來寫的。我們的專案用了 less 預編譯，是這樣寫的 3 vue 解析 這裡就是乙個 ...
Vue學習03 插值操作
mustache也叫鬍子語法，簡單來說就是兩個大括號 中間放置我們要顯示的變數，只允許在標籤內容中使用，不允許在屬性中使用 示例 h2 p p div newvue script 執行結果 2.v once 看單詞一次就是說，當有這個屬性的時候，展示的內容不變，如上面的示例 當name的值改變時，存...
Vue學習 快速建立Vue專案
npm與cnpm cnpm是 團隊做的國內映象，因為npm的伺服器位於國外可能會影響安裝。映象與官方同步頻率目前為 10分鐘 一次以保證盡量與官方服務同步。npm install global vue cli cnpm install global vue cli 此命令只需要執行一次 vue in...