摘要：微豆一個(gè)使用與重構(gòu)豆瓣的項(xiàng)目。在中的配置代理重新啟動(dòng)，打開查看結(jié)果是否與直接請(qǐng)求豆瓣相同。更多請(qǐng)參考豆瓣電影文檔。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

微豆 Vdo

一個(gè)使用 Vue.js 與 Material Design 重構(gòu) 豆瓣 的項(xiàng)目。

項(xiàng)目網(wǎng)站 http://vdo.ralfz.com/

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

快速使用

# 克隆項(xiàng)目到本地
git clone https://github.com/RalfZhang/Vdo.git

# 安裝依賴
npm install

# 在 localhost:8080 啟動(dòng)項(xiàng)目
npm run dev

教程 安裝 vue-cli 腳手架

運(yùn)行如下命令，即可創(chuàng)建一個(gè)名為 my-project 的 vue 項(xiàng)目，并且通過(guò)本地 8080 端口啟動(dòng)服務(wù)

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

在運(yùn)行 vue init webpack my-project 后，會(huì)依次要求輸入以下配置內(nèi)容

項(xiàng)目名稱

項(xiàng)目描述

作者

選擇 Vue 構(gòu)建：運(yùn)行+編譯 或 僅運(yùn)行時(shí)

是否安裝 vue-loader

是否使用 ESLint

如果是，請(qǐng)選擇模式：標(biāo)準(zhǔn)模式、AirBNB 模式、自定義

是否使用 Karma + Mocha 的單元測(cè)試

是否使用 Nightwatch e2e 測(cè)試

安裝完成后，即可看到以下文件結(jié)構(gòu)：

.
|-- build                            // 項(xiàng)目構(gòu)建相關(guān)代碼
|   |-- build.js                     // 生產(chǎn)環(huán)境構(gòu)建代碼
|   |-- check-version.js             // 檢查 node、npm 等版本
|   |-- dev-client.js                // 熱重載相關(guān)
|   |-- dev-server.js                // 構(gòu)建本地服務(wù)器
|   |-- utils.js                     // 構(gòu)建工具相關(guān)
|   |-- webpack.base.conf.js         // webpack 基礎(chǔ)配置（出入口和 loader）
|   |-- webpack.dev.conf.js          // webpack 開發(fā)環(huán)境配置
|   |-- webpack.prod.conf.js         // webpack 生產(chǎn)環(huán)境配置
|-- config                           // 項(xiàng)目開發(fā)環(huán)境配置
|   |-- dev.env.js                   // 開發(fā)環(huán)境變量
|   |-- index.js                     // 項(xiàng)目一些配置變量（開發(fā)環(huán)境接口轉(zhuǎn)發(fā)將在此配置）
|   |-- prod.env.js                  // 生產(chǎn)環(huán)境變量
|   |-- test.env.js                  // 測(cè)試環(huán)境變量
|-- src                              // 源碼目錄
|   |-- components                   // vue 公共組件
|   |-- store                        // vuex 的狀態(tài)管理
|   |-- App.vue                      // 頁(yè)面入口文件
|   |-- main.js                      // 程序入口文件，加載各種公共組件
|-- static                           // 靜態(tài)文件，比如一些圖片，json數(shù)據(jù)等
|-- test                             // 自動(dòng)化測(cè)試相關(guān)文件
|-- .babelrc                         // ES6語(yǔ)法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .eslintignore                    // ESLint 檢查忽略的文件
|-- .eslistrc.js                     // ESLint 文件，如需更改規(guī)則則在此文件添加
|-- .gitignore                       // git 上傳需要忽略的文件
|-- README.md                        // 項(xiàng)目說(shuō)明
|-- index.html                       // 入口頁(yè)面
|-- package.json                     // 項(xiàng)目基本信息
.

ESLint 配置

ESLint 配置在根目錄的 .eslintrc.js 里。
正常情況下，ESLint 報(bào)錯(cuò)是因?yàn)槟愕拇a不符合現(xiàn)有的 ESLint 規(guī)范。
如果你的情況實(shí)在不想被 ESLint 報(bào)錯(cuò)，我舉出兩個(gè)解決方案，來(lái)處理 ESLint 報(bào)錯(cuò)問(wèn)題。

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

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,
});

注：為做演示，句末未添加分號(hào)。

保存 main.js 文件后，頁(yè)面與終端均提示如下錯(cuò)誤：

 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

以上輸出表明出現(xiàn)兩個(gè)問(wèn)題：

警告：不允許 console 語(yǔ)句。

錯(cuò)誤：句末未加分號(hào)。

解決問(wèn)題 1

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

解決問(wèn)題 2

你可以選擇繼續(xù)在 .eslintrc.js 文件中添加關(guān)閉句末分號(hào)判定的規(guī)則。

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

即自動(dòng)修復(fù)。值得注意的是，自動(dòng)修復(fù)不能解決所有問(wèn)題，有時(shí)也不甚完美，可以多試幾次體會(huì)下 fix 的效果。

做完更改后，重新運(yùn)行 npm run dev 即可看到無(wú)問(wèn)題報(bào)告，并且 console 語(yǔ)句后已經(jīng)自動(dòng)加上了分號(hào)。

靜態(tài)頁(yè)面開發(fā)

此時(shí)，瀏覽器應(yīng)該已經(jīng)打開了 localhost:8080 頁(yè)面。

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