项目资源和目录设计和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接口服务器