1.需求分析
2.設備像素比DPR的概念
可以參看張鑫旭老師的博客：http://www.zhangxinxu.com/wordpress/?p=2568
http://www.fly63.com/article/detial/3208
手機上設置的像素是物理像素的兩倍?
Svg是矢量圖
3.IconMoon圖標字體制作
通過svg文件在APP網站上最終生成的是一個fonts資源文件夾和一個css文件，css文件定義了圖標的樣式。只需在標籤中引入相應樣式即可使用圖標。
網站地址:https://icomoon.io/
4.項目目錄設計
Components目錄，每一個組件例如header.vue放在header文件夾下面。（就近原則）
Common文件夾，新建公共模塊和資源
Common下新建js，stylus和fonts文件夾.
Stylus是css預處理文件，語法就是css去掉花括號和分號。
5.後臺mock造數據
Vue-cli集成express的流程:
- npm install express
- 將data.json文件拷入制定目錄
- 在webpack.dev.conf.js文件中
//首先
const express = require('express')
const app = express()
var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
//找到devServer,添加
before(app) {
app.get('/api/seller', (req, res) => {
res.json({
// 這裏是你的json內容
errno: 0,
data: seller
})
}),
app.get('/api/goods', (req, res) => {
res.json({
// 這裏是你的json內容
errno: 0,
data: goods
})
}),
app.get('/api/ratings', (req, res) => {
res.json({
// 這裏是你的json內容
errno: 0,
data: ratings
})
})
}
這樣就可以通過http://localhost:8080/api/seller訪問後端數據了。
這之後導入static/reset.css，將瀏覽器常用標籤的默認樣式reset掉。
Npm install stylus 和 stylus-loader
6. 組件拆分
整個頁面分爲頭部header，tab頁和內容區
header在component/header/下寫一個自定義組件header.vue，在App.vue中引入
7. 路由
編寫goods，ratings和seller的.vue文件
在router/index.js中引入
使用<router-link to='指向要鏈接的組件'>做標籤
<router-view></router-view>顯示對應的內容頁面
8. 像素border實現
手機上設置的像素是物理像素的兩倍，根據dpr的概念需要做縮放。
tab的boder-bottom實現1px的思路
因爲dpr的影響，需要對tab底部畫出來的線進行縮放，實現真正1px的效果。
在tab中定義了一個僞類:after,:after絕對定位在tab的下方，內容爲空，僞類的border-top: 1px solid $color。
同時在base.styl中定義全局樣式.border-1px，根據不同的dpr對僞類進行縮放。
在App.vue中的tab標籤中引入全局樣式.border-1px.
注意:
a.新建mixin.styl實現一些樣式函數，例如border-1px($color)，方便不同的vue文件調用。
b.新建base.styl實現一些全局樣式例如.border-1px，方便vue文件直接使用。
c.新建index.styl引入包括字體，mixin.styl，base.styl在內的樣式文件，並在main.js中引用index.styl,這樣這幾個樣式文件均可以全局使用。
d.webpack.base.conf.js中的alias可以定義路徑別名，例如
'@': resolve('src'),
'common':resolve('src/common')
草料網站根據應用網址生成二維碼，微信掃碼可以手機預覽。（手機與電腦需在同一個局域網）