Vue2.0 | 仿韓寒「ONE · 一個」APP

04-15

one-vue

仿韓寒「ONE · 一個」，基於vue2.0+混合式開發的一款跨終端、高性能、用戶體驗高的移動端App，使用服務端數據介面 one-api 進行開發。主要是為了學習 vue 才開發的，歡迎各位同學 Star 和 Fork。項目地址：gongph/one-vue

技術架構

編譯打包工具

webpack@3.0.0

包管理工具

yarn@0.18.1 還不知道 yarn ? 查看中文文檔

服務端數據請求

axios@0.16.2

視圖組件

vue@2.3.4

狀態管理

vuex@2.3.1

路由器

Framework7封裝的一套自己的router

前端UI庫

Framework7@1.6.4 Framework7官網
Framework7-vue@0.9.2

圖標庫

Framework7-Icons@0.8.9 Github地址

項目結構

.├── assets├── media├── node_modules├── src│ ├── api # 數據介面│ ├── mixins # Mixins│ ├── models│ ├── pages # 頁面│ ├── store │ │ ├── modules # 模塊│ │ ├── actions.js # 全局 actions│ │ ├── getters.js # 全局 getters│ │ ├── index.js # 入口文件│ │ └── mutation-types.js # 類型│ ││ ├── utils # 工具文件夾│ ├── app.css # 組件樣式│ ├── app.js # 入口文件│ ├── api.vue # 根組件│ └── routes.js # 路由配置文件│├── build.js # 編譯後的文件├── index.html├── mainifest.json # app配置文件，需要配合 HBuilder 開發工具使用├── package.json├── webpack.config.js└── yarn.lock

項目截圖

gongph/one-vue

如何在本地運行？

1. 首先你需要安裝 Node.js。選擇不同版本下載安裝即可。如果你安裝到其他盤符可能會遇到一些環境變數的奇葩問題。為了避免此類問題，還是按照默認路徑安裝吧。

2. 安裝完 Node ，請按照下面的命令行安裝 yarn 。這是因為項目模塊依賴是用它來管理的，有關 npm vs yarn 請自行百度。

# step1: 安裝 yarnnpm i yarn -g# step2: 安裝成功後查看 yarn 版本yarn -V

3. 克隆或下載該項目。如果你本地安裝了 Git，請使用如下命令行進行克隆，或者你可以下載源碼然後解壓到本地磁碟。有關 Git 教程，請看廖雪峰Git教程。

git clone git@github.com:gongph/one-vue.git

4. 安裝模塊。進入項目根目錄打開終端執行如下命令行：

yarn install

5. 執行如下命令行啟動服務，並訪問：localhost:8080

npm run dev

注意： 建議谷歌瀏覽器調試，調試時請使用手機調試模式查看，快捷鍵（Ctrl+Shift+M）。

如何在真機上運行？

1. 首先你需要下載 HBuilder 開發工具，然後安裝，郵箱註冊一下。

2. 導入項目。

3. 將項目轉成 App 項目。點擊項目右鍵 - 配置 - Convert to App project

4. 手機連接電腦

5. 點擊工具欄中的運行 - 手機運行 - 選擇激活的手機設備，等待片刻即可。