项目的结构如下:
项目资源准备
准备项目的各种图片资源等等
注意:在webpack可以不用css sprite,直接用单张图片,因为它会帮忙打包。
还有SVG图片,放大之后不会影响质量,在移动端开发中,通常会把色彩单一的图片做成SVG图片。这些不是直接用,利用一些工具去把这些SVG图片去转化成一个叫图标字体的文件,就可以在CSS引用了。
图标字体制作
在项目开发前期,我们需要将设计师给的一些图片制作成字体图标
用一个叫IcoMoon的工具(https://icomoon.io/),它本身有的图标可以查看IcoMoon App,要用自定义图标的话可以在IcoMoon App里面点击Import Icons,将所有的SVG图片导入,就可以下载使用了。(里面的Get Code可以查看使用方法)。在下载之前可以点击左上角的preferences,设置一下名称:sell-icon
项目目录设计
所有代码都在src文件目录下
入口文件main.js;
整个页面的vue实例文件App.vue;
components:存放我们的组件文件,但我们不会像hello.vue一样直接放在里面,我们会多件一个子目录,像这样:
这样做是因为一个vue组件除了它的.vue文件以外,还可能包含一个图片相关资源等等。之前说过,组件一个很重要的设计原则就是就近维护,把一个组件相关资源都放在一个目录下。
还要创建一个common目录,包好一个公共的模块和资源,再在它其中添加三个子目录。
在这儿项目中,我们使用的css预处理器是stylus。
结构如下图:
并且将图标字体生成的style.css添加到stylus目录下,并改名为icon.styl,并改为stylus语法:把括号和分号去掉。
把asset目录删掉。
mock数据(模拟后台数据)
作为前端经常需要模拟后台数据,我们称之为mock。
http://blog.csdn.net/sysuzjz/article/details/50317531
mock 的真正意义在于简化测试环境。假如你现在要测试一个dao,但是你有不想构建数据库环境就可以用mock模拟数据库的返回结果。
数据来源:data.json
我们模拟的数据请求就是从这里面读取数据,接下来就来编写这些接口。
打开build目录-dev-server.js(就是我们开发的webpack打包的一个入口文件),打开之后使用express这个框架去指一个nodeserver,我们也可以用express-router来编写这些接口请求。
先拿到这些数据:
var appData = require('../data.json'); var seller = appData.seller; var goods = appData.goods; var ratings = appData.ratings;
如图:
在编写路由,并编写接口:
var apiRoutes = express.Router(); apiRoutes.get('/seller', function (req, res) { res.json({ errno: 0, 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 }); });
要在express使用它,我们需要调用express的变量app:
app.use('/api', apiRoutes);
这样我们就可以直接通过’/goods’来获取数据了。
完整的dev-server.js:
完了之后要重新运行cnpm run dev,因为我们改的是node文件,然后http://localhost:8080/api/seller,这样就返回了数据:
当然,我们也可以利用Google的插件jsonview将数据格式化。
http://localhost:8080/api/goods
http://localhost:8080/api/ratings
这样数据也已经有了,接下来就可以来编写这个页面了。
来源:http://www.cnblogs.com/Chen-XiaoJun/p/6248964.html