#Vue全家桶之Vue-cli學習筆記
##一、安裝vue-cli
首先檢查是否下載node了,然後用npm -v檢查是否安裝
npm沒有問題，接下來我們可以用npm 命令安裝vue-cli了，在命令列輸入下面的命令：

 npm n install vue-cli -g

-g :代表全域性安裝。

我們用vue init命令來初始化專案，具體看一下這條命令的使用方法。

vue init <template-name> <project-name>

如果用webpack打包，一般直接在目錄下打vue init webpack就可以了。
npm install 安裝我們的專案依賴包，也就是安裝package.json裡的包，如果你網速不好，你也可以使用cnpm來安裝。
npm run dev 開發模式下執行我們的程式。給我們自動構建了開發用的伺服器環境和在瀏覽器中開啟，並實時監視我們的程式碼更改，即時呈現給我們。

##第二節Vue-cli專案結構
vue-cli腳手架工具就是為我們搭建了開發所需要的環境，為我們省去了很多精力。有必要對這個環境進行熟悉，我們就從專案的結構講起。

	.
	|-- 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                     // 專案基本資訊
	.
 

dependencies欄位和devDependencies欄位

dependencies欄位指專案執行時所依賴的模組；
devDependencies欄位指定了專案開發時所依賴的模組；

webpack.base.confg.js webpack的基礎配置檔案

…
…

module.export = {
    // 編譯入口檔案
    entry: {},
    // 編譯輸出路徑
    output: {},
    // 一些解決方案配置
    resolve: {},
    resolveLoader: {},
    module: {
        // 各種不同型別檔案載入器配置
        loaders: {
        ...
        ...
        // js檔案用babel轉碼
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            // 哪些檔案不需要轉碼
            exclude: /node_modules/
        },
        ...
        ...
        }
    },
    // vue檔案一些相關配置
    vue: {}
}
 

…
…

module.export = {
    // 編譯入口檔案
    entry: {},
    // 編譯輸出路徑
    output: {},
    // 一些解決方案配置
    resolve: {},
    resolveLoader: {},
    module: {
        // 各種不同型別檔案載入器配置
        loaders: {
        ...
        ...
        // js檔案用babel轉碼
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            // 哪些檔案不需要轉碼
            exclude: /node_modules/
        },
        ...
        ...
        }
    },
    // vue檔案一些相關配置
    vue: {}
}

##第3節：解讀Vue-cli的模板
一、npm run build 命令
如何把寫好的Vue網頁放到伺服器上，那我就在這裡講解一下，主要的命令就是要用到npm run build 命令。我們在命令列中輸入npm run build命令後，vue-cli會自動進行專案釋出打包。你在package.json檔案的scripts欄位中可以看出，你執行的npm run build命令就相對執行的 node build/build.js 。
打包時，記得將config目錄下的index.js下的 assetsPublicPath: '/'改為 assetsPublicPath: ‘./’，
這樣就是相對路徑。