項目資源和目錄設計和mock模擬數據

項目資源和目錄設計和mock模擬數據

項目圖片資源

1. psd裏面標註座標(設計師完成),相關使用工具也能夠markman來協助輔助

2. 對於在webpack裏面使用的一些小圖片,不建議使用雪碧圖來進行處理,由於自己webpack會自動幫助處理每一張小圖片,因此有時候須要單獨切出來一個個小圖片,而且分別對應2x和3x的版本

3. 2x和3x圖是爲了適應不一樣dpr比例的,不一樣比例的顯示是不同的.

   1. 2x就是普通的dpr爲1的屏幕使用的

   2. 對於高清屏幕就是用3x,dpr爲2或者以上

   3. 2x和3x就是尺寸的大小,2x的圖片比3x的小

4. svg圖片(優點是伸縮,圖片質量不降低),使用工具轉化爲圖標字體文件來引入,使用於那些圖片logo使用

5. 在使用webpack狀況下,小於必定大小的圖片會轉化爲base64而後放到js引入,

關於drp的科普:

• window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips

• 非視網膜屏幕的iphone上，屏幕物理像素320像素，獨立像素也是320像素，所以，window.devicePixelRatio等於1.

• 在視網膜屏幕的iphone上，屏幕物理像素640像素，獨立像素仍是320像素，所以，window.devicePixelRatio等於2.

參考:
設備像素比devicePixelRatio簡單介紹

製做圖標字體

icomoon的使用介紹
https://icomoon.io/

課程提供了圖標字體的svg文件來使用

項目目錄設計

.
├── README.md
├── build
├── config
├── data.json
├── index.html
├── node_modules
├── package.json
├── resource
├── src #這裏是項目的源代碼目錄
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── common #公共引用的資源的目錄
    │   ├── fonts #裏面存放了圖標字體(svg生成後的)
    │   └── stylus #stylus的目錄
    ├── components #vue組件的目錄
    │   ├── goods
    │   ├── header
    │   ├── ratings
    │   └── seller
└── main.js

└── static

1. 基於組件化設計

   1. 一個模塊組件一個目錄,這樣方便理解和整理代碼

2. 建立公共目錄common放公共的模塊和資源,例如js css stylus和fonts

   1. 從icomoon裏面處理以後的圖標字體會有2個東西,一個是fonts目錄,一個是styel.css文件

   2. 將styel.css更名爲icon.styl,而後去掉裏面的分號和大括號來改成stylus的語法的文件

   3. 而後放到stylus目錄裏面去

課程使用的stylus的

mock數據模擬

mock就是作假數據,這樣能夠便於先後端分離開發,前端不須要等後端作好數據來開發或者測試驗證

準備一個測試數據源

data.json是課程提供的https://github.com/ustbhuangyi/vue-sell/blob/master/data.json

須要結合設計圖和設計來一塊兒看

大體的數據結構以下:

{
    "seller":{......},
    "goods":{.....},
    "ratings":{.....}
}

ress來作模擬數據訪問的服務器

在vue-cli裏面,node安裝好了express

在/sell/build/dev-server.js文件裏面編輯

//截取的部分,其餘部分略
var app = express() //在實例化express的後面開始編寫測試數據的相關策略

var appData = require('../data.json'); // 引入測試數據
var seller = appData.seller; 
var goods = appData.goods;
var ratings = appData.ratings;

var apiRoutes = express.Router();// 生成express的路由實例

//這裏的意思是訪問一個/seller連接,而後返回數據
apiRoutes.get('/seller',function (req,res) { // express的路由實例寫法
  res.json({ // 返回的是json數據,而且這裏是res參數是表明response
    errno:0, //設計返回的json數據的結構
    data:seller
  })
});

apiRoutes.get('/goods',function (req,res) {
  res.json({
    errno:0,
    data:goods
  })
});

apiRoutes.get('/ratings',function (req,res) {
  res.json({
    errno:0,
    data:ratings
  })
});

app.use('/api',apiRoutes); // 調用apiRoutes

var compiler = webpack(webpackConfig)

重啓dev server

npm dev run

而後訪問/seller或者/goods 或者/ratings就能看到數據了,相似作了一個api接口服務器