基於 Vue+Mint-ui 的 Mobile-h5 的項目說明

本文轉載自查看原文 2019-08-28 23:32 1217

Vue作為前端三大框架之一，其已經悄然成為主流，學會用vue相關技術來開發項目會相當輕松。

對於還沒學習或者還沒用過vue的初學者，基礎知識這里不作詳解，推薦先去相關官網，學習一下vue相關的基礎知識。

a. vue.js 官網參考：https://cn.vuejs.org/

我的 github

一.搭建vue的相關環境與腳手架的說明

首先，要開發vue相關的項目，要會搭建vue的相關環境，要搭建的目錄如下：

1.安裝node.js和npm

2. webpack

3. vue-cli腳手架構建工具

具體這里不作詳解，站在前人的肩膀上學習即可
安裝node.js和npm
webpack和vue-cli腳手架構建工具

二. vue-cli腳手架創建的代碼詳解

利用腳手架（vue-cli）構建一個vue項目，接下來學習分析下代碼。

具體這里不作詳解，站在前人的肩膀上學習即可
教程參考： https://www.jianshu.com/p/2b661d01eaf8

三. 本項目 vue+mint-ui 的h5項目說明及詳解

1. 運行項目

因為項目配置和需要的模塊都已經配好了的，所以運行只需要：

1.在svn上把 mobile-h5 項目代碼下載下來。
2.直接進入mobile-h5目錄中，即是和 package.json 的文件同級目錄，或者直接用vsCode編輯器打開 mobile-h5 項目，在命令終端那里。
3. 安裝依賴，執行命令：

npm  install

或者簡寫：

npm i

沒有報錯時，安裝結果如圖：

安裝報錯時，會出現 error 的，或者直接中止了，window系統一般是因為npm 的環境沒有配置好。

安裝好模塊后，再執行如下命令來運行

npm  run dev

沒有報錯時，結果會如下圖：

npm run dev.png

直接打開本地鏈接 http://localhost:8080 就可訪問了，如下圖：

本地運行效果

2. 項目目錄說明

都寫在 README.md 里面了，具體的也可查看 README.md 的內容。

#目錄結構

├── mobile-h5 # 總項目目錄

├── build # webpack 配置文件目錄

├── config # webpack 配置文件引用的目錄

├── kpi # webpack 打包正式生成的目錄

├── src # 主開發文件的目錄

│ ├── assets # 圖片資源

│ ├── components # 組件模塊

| │ ├── app # 組件模塊

| | | ├── add # 本項目指標新增的組件的模塊

| | | ├── common # 組件通用的模塊

| | | ├── index # 本項目首頁組件通用的模塊

| | | ├── index # 本項目套餐組件通用的模塊

│ ├── filters # 過濾器模塊

│ ├── filters # 過濾器模塊

│ ├── less # less 的公共樣式模塊

│ ├── libs # 封裝的公共 js 文件模塊

│ ├── mixins # mixins 文件模塊

│ ├── router # 路由模塊

│ ├── store # vuex 的 store 模塊

│ ├── views # 主開發的 vue 模塊

│ ├──

├── static # webpack 打包依賴的目錄

├── index.html # 主頁面入口，也是生成打包生產環境代碼要依賴的文件

3. 修改webpack的配置，使其符合本項目的要示

a. 因為本地開發時，請求接口會跨域的問題，所以要用代理。

具體說明參考 https://my.oschina.net/lixiaoyan/blog/1797724

提示：要在手機上開發測試，npm run dev 運行的localhost是不行的，要配置nginx來做代理服務才行。

b.把打包的目錄修改成生產環境需要的目錄 kpi。

c. 添加別名，在其他地方引入文件時，可以省略部分路徑的書寫

4. 開發目錄規范說明

a. 開發要根據業務模塊來划分，進而進行文件模塊的划分。

比如：

組件components 里面

components/common是全局公共的組件，

components/app 是mobile-h5的開發組件

components/app/add mobile-h5的指標新增的組件

components/app/index 是mobile-h5的首頁的組件

components/app/setMeal 是mobile-h5的套餐的組件

mixins 里面

mixins/add 是mobile-h5的指標新增的 mixins

mixins/common 是mobile-h5的公共的 mixins

modules 里面

modules/add 是mobile-h5的指標新增的狀態數據保存

modules/setMeal 是mobile-h5的套餐的狀態數據保存

b. 開發鏈接的書寫。

domain.js 是域名的配置, 只要統一配置一項即可，方便。

urls.js 是請求的鏈接

比如：添加收藏 https://baidu.com:8443/emm/favorite/save

因為引入了 domain.js 了

所以我們只需要在urls.js里面寫： save(即別名): 'emm/favorite/save' 即可

c. 引入mock.js ，用來模擬請求接口數據，當后端接口還沒開發出來時，就大有用場了。

用法如下：

只要打開總開關，再打開你要用mock數據的具體接口的開關，接口就不會請求后台的接口了，只用mock返回的數據。

d. css樣式書寫

用法：

比如上圖的，全省的寬 280px ,高 58px , 正常開發下，程序的css上需要寫

{

width: 280px;

height: 58px;

}

但是我們只需要：

{

width: 280 / 100 rem;

height: 58 / 100 rem;

}

也即是：

{

width: 2.8rem;

height: 0.58rem;

}

換算公式就是具體: 像素/100 = rem, 還能指定7.5rem 寬就是屏幕的總寬

而且無論手機大小是多少，因為設計了 config_width = 750 ，所以滿寬都是 7.5rem。

字體大小等也同理。

注意： 因為 phone的分辨率高，所以 0.01rem 在 iphone真機上會不顯示，在 border設置的時候猶為明顯，至少要0.02rem 才行。

是因為引入了下面這個文件，要了解具體的內容，請看 rem_config.js。

還有一個方法就是非常簡單的,在 js 里面加入這句代碼即可，寫css時，也可像上面一樣寫，效果和上面介紹的一樣。

 // 屏幕適配（windowWidth/設計稿寬*100） ——*100為了方便計算。即font-size值是手機deviceWidth與設計稿比值的100倍
    document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/7.5+'px';
    // 如上：通過查詢屏幕寬度，動態的設置html的font-size值，設計稿大多以750*1334 設置的，通過上述換算后，在設計圖上一張150*150的圖，在css中對應的rem值則為：1.5*1.5rem

e. 其他

libs里的文件內容都是內有乾坤的，開發人員都有必要了解一下，這里就不多介紹了。