Vue高仿饿了么学习笔记（一）

前几天在慕课网上学习了Vue高仿饿了么，将里面的知识点在这里记录下来。因为学习的是Vue1.0版本，自己学习升级为Vue2.0版本。但最近看到已经有了Vue2.0的视频讲解。GitHub地址：https://github.com/Hai-Jing1995/Vue-WebApp点击打开链接一、创建Vue-cli脚手架工具1、安装官方命令行工具$npm install --global

HaiJing1995

4153人浏览 · 2017-03-27 09:41:02

HaiJing1995 · 2017-03-27 09:41:02 发布

前几天在慕课网上学习了Vue高仿饿了么，将里面的知识点在这里记录下来。因为学习的是Vue1.0版本，自己学习升级为Vue2.0版本。但最近看到已经有了Vue2.0的视频讲解。

GitHub地址：https://github.com/Hai-Jing1995/Vue-WebApp点击打开链接

一、创建Vue-cli脚手架工具

1、安装官方命令行工具

$npm install --global vue-cli

2、创建一个基于webpack的新项目

$vue init webpack your-project

这里的my-project是项目的名称。注意：创建项目前一定要先cd到想要的盘符

3、安装依赖

$cd your-project

$npm install

4、运行

$npm run dev

二、制作图标字体

一般色彩单一的图片都会做成SVG格式的图片，这里我们需要用 iconMoon把它转换成图标字体。

1、点击import icons选择自己的SVG图片

2、选择图标，点击右下角的genterate font

3、找到对应图标的get code就可以看到任何使用

4、preference可以在这里设置font name（也就是生成图标字体的文件名）

5、Download

三、mock数据（模拟后台数据）

1、编写接口：build目录中dev-server.js（就是webpack打包的入口文件；$npm rn dev就是运行的这个文件）

2、这里使用express框架的router编写接口请求。

注意：因为这里改写的是node文件，需要重新运行

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^