一、開始一個VUE專案之前

    1. 開始之前先了解一下VUE相關的概念性的東西吧

    Vue.js 官方文件上這樣介紹：簡單小巧的核心，漸進式技術棧。它提供了Web開發中常見的高階功能，如：

    解耦檢視與資料，可複用的元件，前端路由，狀態管理，虛擬DOM

     以上摘自尤雨溪《Vue.js實戰》第一章。

    2. 用到的相關技術和工具：Idea,npm,webpack,node,vue2.0

    3. 這個小專案相關的功能：產品列表，產品詳情，購物車，個人中心。

二、如何開始一個VUE專案

  1.安裝Vue-cli。  vue-cli腳手架工具就是為我們搭建了開發所需要的環境

    執行   npm install -g vue-cli

   如果執行npm太慢 可以換成cnpm，如圖：

2.建立專案

  順序為：切換到你的工作目錄下-->執行vue init webpack 專案名-->回答問題-->完成

3.啟動

專案建立完成後，切換目錄到專案下：執行npm install 下載相關依賴包，然後 npm run dev啟動專案

4. 專案結構講解（盜圖）

.
|-- build                            // 專案構建(webpack)相關程式碼
|   |-- build.js                     // 生產環境構建程式碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱過載相關
|   |-- dev-server.js                // 構建本地伺服器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 專案開發環境配置
|   |-- dev.env.js                   // 開發環境變數
|   |-- index.js                     // 專案一些配置變數
|   |-- prod.env.js                  // 生產環境變數
|   |-- test.env.js                  // 測試環境變數
|-- src                              // 原始碼目錄
|   |-- components                     // vue公共元件
|   |-- store                          // vuex的狀態管理
|   |-- App.vue                        // 頁面入口檔案
|   |-- main.js                        // 程式入口檔案，載入各種公共元件
|-- static                           // 靜態檔案，比如一些圖片，json資料等
|   |-- data                           // 群聊分析得到的資料用於資料視覺化
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義程式碼格式
|-- .gitignore                       // git上傳需要忽略的檔案格式
|-- README.md                        // 專案說明
|-- favicon.ico
|-- index.html                       // 入口頁面
|-- package.json                     // 專案基本資訊
.

 這些檔案相關具體講解見：https://blog.csdn.net/pyycsd/article/details/78952052 點選開啟連結