摘要：微豆一個使用與重構豆瓣的項目。在中的配置代理重新啟動，打開查看結果是否與直接請求豆瓣相同。更多請參考豆瓣電影文檔。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

微豆 Vdo

一個使用 Vue.js 與 Material Design 重構 豆瓣 的項目。

項目網站 http://vdo.ralfz.com/

GitHub https://github.com/RalfZhang/Vdo

快速使用

# 克隆項目到本地
git clone https://github.com/RalfZhang/Vdo.git

# 安裝依賴
npm install

# 在 localhost:8080 啟動項目
npm run dev

教程 安裝 vue-cli 腳手架

運行如下命令，即可創建一個名為 my-project 的 vue 項目，并且通過本地 8080 端口啟動服務

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

在運行 vue init webpack my-project 后，會依次要求輸入以下配置內容

項目名稱

項目描述

作者

選擇 Vue 構建：運行+編譯 或 僅運行時

是否安裝 vue-loader

是否使用 ESLint

如果是，請選擇模式：標準模式、AirBNB 模式、自定義

是否使用 Karma + Mocha 的單元測試

是否使用 Nightwatch e2e 測試

安裝完成后，即可看到以下文件結構：

.
|-- build                            // 項目構建相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查 node、npm 等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack 基礎配置（出入口和 loader）
|   |-- 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數據等
|-- test                             // 自動化測試相關文件
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .eslintignore                    // ESLint 檢查忽略的文件
|-- .eslistrc.js                     // ESLint 文件，如需更改規則則在此文件添加
|-- .gitignore                       // git 上傳需要忽略的文件
|-- README.md                        // 項目說明
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息
.

ESLint 配置

ESLint 配置在根目錄的 .eslintrc.js 里。
正常情況下，ESLint 報錯是因為你的代碼不符合現有的 ESLint 規范。
如果你的情況實在不想被 ESLint 報錯，我舉出兩個解決方案，來處理 ESLint 報錯問題。

注：本例使用 AirBNB ESLint 規則。
例：通過 npm run dev 啟動服務，打開 ./src/main.js，添加一句 console.log("abc")，結果如下：

import Vue from "vue";
import App from "./App";
import store from "./vuex/store";
/* import router from "./router";*/

// 添加此句
console.log("abc")

/* eslint-disable no-new */
new Vue({
  el: "#app",
  /* router,*/
  template: "",
  components: { App },
  store,
});

注：為做演示，句末未添加分號。

保存 main.js 文件后，頁面與終端均提示如下錯誤：

 ERROR  Failed to compile with 1 errors 
 error  in ./src/main.js
  ?  http://eslint.org/docs/rules/no-console  Unexpected console statement
  C:UsersRalfDocumentscode
alfzvue	estvue02srcmain.js:8:1
  console.log("abc")
   ^
  ?  http://eslint.org/docs/rules/semi        Missing semicolon
  C:UsersRalfDocumentscode
alfzvue	estvue02srcmain.js:8:19
  console.log("abc")
                     ^
? 2 problems (1 error, 1 warning)
Errors:
  1  http://eslint.org/docs/rules/semi
Warnings:
  1  http://eslint.org/docs/rules/no-console
 @ multi ./build/dev-client ./src/main.js

以上輸出表明出現兩個問題：

警告：不允許 console 語句。

錯誤：句末未加分號。

解決問題 1

在 .eslintrc.js 文件中的 rules 鍵名下添加"no-console": "off",，即關閉 console 警告。

解決問題 2

你可以選擇繼續在 .eslintrc.js 文件中添加關閉句末分號判定的規則。

或者，也可以把 package.json 文件中的 script 下的 lint 命令改為
"lint": "eslint --fix *.js *.vue src/* test/unit/specs/* test/e2e/specs/*"

即自動修復。值得注意的是，自動修復不能解決所有問題，有時也不甚完美，可以多試幾次體會下 fix 的效果。

做完更改后，重新運行 npm run dev 即可看到無問題報告，并且 console 語句后已經自動加上了分號。

靜態頁面開發

此時，瀏覽器應該已經打開了 localhost:8080 頁面。

在此情況下，請嘗試更改 /src/App.vue 和 /src/components/Hello.vue 文件中