成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微豆 - Vue 2.0 實現(xiàn)豆瓣 Web App 教程

cjie / 1461人閱讀

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

微豆 Vdo

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

項目網(wǎng)站 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 腳手架

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

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

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

項目名稱

項目描述

作者

選擇 Vue 構(gòu)建:運行+編譯 或 僅運行時

是否安裝 vue-loader

是否使用 ESLint

如果是,請選擇模式:標準模式、AirBNB 模式、自定義

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

是否使用 Nightwatch e2e 測試

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

.
|-- build                            // 項目構(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                           // 項目開發(fā)環(huán)境配置
|   |-- dev.env.js                   // 開發(fā)環(huán)境變量
|   |-- index.js                     // 項目一些配置變量(開發(fā)環(huán)境接口轉(zhuǎn)發(fā)將在此配置)
|   |-- prod.env.js                  // 生產(chǎn)環(huán)境變量
|   |-- test.env.js                  // 測試環(huán)境變量
|-- src                              // 源碼目錄
|   |-- components                   // vue 公共組件
|   |-- store                        // vuex 的狀態(tài)管理
|   |-- App.vue                      // 頁面入口文件
|   |-- main.js                      // 程序入口文件,加載各種公共組件
|-- static                           // 靜態(tài)文件,比如一些圖片,json數(shù)據(jù)等
|-- test                             // 自動化測試相關(guān)文件
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .eslintignore                    // ESLint 檢查忽略的文件
|-- .eslistrc.js                     // ESLint 文件,如需更改規(guī)則則在此文件添加
|-- .gitignore                       // git 上傳需要忽略的文件
|-- README.md                        // 項目說明
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息
.
ESLint 配置

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

注:本例使用 AirBNB ESLint 規(guī)則。
例:通過 npm run dev 啟動服務(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,
});

注:為做演示,句末未添加分號。

保存 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

以上輸出表明出現(xiàn)兩個問題:

警告:不允許 console 語句。

錯誤:句末未加分號。

解決問題 1

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

解決問題 2

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

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

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

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

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

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

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