饿了吗css,【Vue.js】高仿饿了么外卖App(一)

1.架构从传统的MVC向REST API+前端MV*迁移

参考链接:

MV*包括:MVC、MVP、MVVM

vue.js是MVVM框架

84f5c654b61fa9678116d7cd4c765a61.png

2.Iconmoon制作图标字体

2.1 点击IconMoon App

f6f534519e99c1f7ea82052bdc7ece87.png

2.2点击import icons,导入svg图片

3f76c5da5fb43d9d91000a59890f49b1.png

2.3选择你导入的图标,并点击右下角generate font

370e157174e17bcb7f98b4b1b2f6a25e.png

2.4点击get code

5cb2fbb8f54c1f8e4fc9d0b7e22b2926.png

2.5点击preference命名font name

ea005aa9696fe15132153ec634a5a760.png

2.6导出后得到如下文件,拷贝fonts文件和style.css

b6e9954d4997be1de9a29896c60ae927.png

3.data.json中存放数据(模拟数据库),模拟的数据请求就从该源中读取数据。

3.1打开build目录,找到dev-server.js(webpack打包的入口文件),从data.json中读取数据(图中红色部分)

90b1bf478cc6b3cd6bff5b32f1c368fd.png

3.2编写路由(图中粉红色部分)

3.3通过接口查看数据

27a1b834a6f7ae71452a3e07de119720.png

4.reset.css的引入,其中自定义了一部分,去掉icon.styl中的{}和;

7e80ee358e403b1ca5225c4b92954efd.png

5.移动端的视口的相关设置

b473c43e2c319e0780c1cd756cd12782.png

6.在main.js中添加分号;

编译报错,可以访问提示的链接

a3381dea48430b647293637c44e16ab4.png

在eslintrc.js中修改关于分号的配置

4fc7ade4bc751f8dafdea0d4744152f9.png

将App.vue中的各个标签清空(等待重新编写),删掉hello.vue文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值