Mockplus把我们的想法画出来
Mockplus是产品经理装逼使用的利器，但是真的很好用，作为一个已经工作的程序员必须舔产品经理的脸，所以你也要对Mockplus的使用有所了解，并会简单的使用。其实Mockplus就是一个线框图制作工具，能把我们的想法或者不太好用语言表达的地方，快速画出线框草图增加理解能力。
MockPlus软件下载：
Mockplus是一款免费的软件，你可以随便下载：https://www.mockplus.cn/ 。下载好后你需要注册一个账户，就可以正常使用了。
软件的基本需求分析和画的过程，请看视频，这里就不用文字描述了，去看视频吧。
项目框线图；
下面是我们用Mockplus制作的应用框线图，虽然简单，但是已经把我脑海中快餐店Pos系统的大体样式画出来了。在作项目之前，一定要画出框线图，反复讨论需求和技术实现，这样能避免开发中
我们采用Vue-cli进行快速搭建，如果你对Vue-cli还不了解，请观看下面的文章，大概30分钟可完全掌握Vue-cli。
搭建项目架构：
项目采用Webpack+Vue-router的架构方式，开始安装（全部在windows系统上操作，我也没有mac电脑）。
- 按Win+R，然后在文本框中输入cmd，回车打开命令行，输入vue-cli安装命令：
mpm install vue-cli -g
2.在命令行中初始化项目，我们采用的是webpack模板，输入初始化命令：
vue init webpack
3.在命令行中，进入项目目录，使用npm install 安装package.json里项目的依赖包。如果你网速较慢的话，可以使用淘宝镜像的cnpm来进行安装。
4.查看是否安装正确。在命令行中输入 npm run dev ，如果能在浏览器中正常打开页面，说明安装正确。
到这里为止，我们的项目架构就建立好了，我们需要对Vue-cli给我们生成的文件进行一些必要的修改。
修改项目文件内容：
- 修改根目录下的index.html文件，我们想写一些CSS样式，这样作是为了更好的布局，然后修改一下标题栏。让标题符合项目这里起名叫“AwesomePOS-快餐店管理系统”。index.html修改后内容如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AwesomePOS-快餐管理系统</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">
<style>
html,body,#app{height:100%;padding: 0;margin:0;}
</style>
</head>
<body >
<div id="app" ></div>
<!-- built files will be auto injected -->
</body>
</html>
2.新建Pos组件，这个相当于程序员的入口文件。在src/components/page/目录下新建Pos.vue文件。文件内容写出vue模板的架构就可以。
<template> <div class="pos"> Hello Pos Demo! </div> </template> <script> export default { name: 'Pos' } </script> <style scoped> </style>
3.修改路由文件，项目根目录/src/router/index.js，让入口文件变成Pos组件。
先用import引入了Pos模板组件，然后修改routes里边的内容。如果你对Vue-router的知识还不了解，可以去看我以前的课程，这里就不作过多的讲解了。
import Vue from 'vue' import Router from 'vue-router' import Pos from '@/components/page/Pos' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Pos', component: Pos } ] })
这时候看一下浏览器中的网页，如果显示出了Hello Pos Demo.我们就算成功搭建项目架构了。下节课我们确定一下项目中使用的图标。
搞定项目图标Iconfont
在开发中经常会遇到小图标的使用问题，小图标的使用可以让程序更美观和增加可用性。网上给程序加上小图标的方法有很多。曾经为了寻找一款使用简单，图标美观的图标库，我真的是到处搜索，直到遇到了IconFont，我觉的它能满足我的大部分要求。那在这里我推荐大家使用IconFont，这是阿里巴巴的矢量图标库。（这绝对不是广告，只是自己使用的一些感受）
挑选自己喜欢的图标
Iconfont中有很多图标，我们可以像在超市逛街一样，挑选自己喜欢的商品，然后放入购物车。
挑选图标的过程（共6步）
- 进入网站：Iconfont网址：http://www.iconfont.cn
- 点击网站上方的“官方图标库”，选择自己喜欢的图标。在这里我选择天猫的图标库。
- 选择好自己喜欢的图标，你可以有两个选择，下载代码 和 添加至项目。
- 我们这两选择添加至项目，然后新建项目，并输入名称。
- 项目添加好后，会自动给我们转入到我们项目库中。点击查看在线链接。
- 生产css引入的代码，生成后就可以在项目首页index.html引入了。
<link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">
图标的使用：
图标顺利引入到项目中，已经可以使用它们了，在“我的项目中”你会看到图标的font class值。可以直接复制代码粘贴，也可以自己写代码。
<i class="icon iconfont icon-hanbao"></i>
这样在页面中就可以看到图标了。
添加更多图标：
如果在项目中觉的图标不够用了，需要添加更多图标。可以利用下面四步进行添加。
- 去Iconfont网站继续挑选，把相中的图标加入购物车中。
- 把购物车中的图标加入到项目中。
- 重新生成在线链接。（这部很重要）
- 在项目主页中(index.html)，更换css引入链接。
实战项目开发的知识点就是很多，也很杂，但是这些都很实用，你也会快速成长，不要感觉和Vue无关就忽略，让我们共同努力，变成更好的自己。
扫一扫
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
