外卖商城类app(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tangjie109411/article/details/83717226

外卖商城类app(一),基于vue.js(2.x版本)
数据是通过Mob平台提供的数据API接口进行模拟的。

第一步:需求分析
实际项目中这一部分其实很重要,但是貌似一些小公司并不重视,我前端生涯的第一份工作就是一家小公司,需求分析基本不做,看着原型就开始做,什么效果,什么事件全靠自己想。客户不满意又重新做,毫无效率,代码也很乱。
第二步:技术选型
这里使用vue,mint-ui。
扩展:这里使用的icon图标是阿里巴巴矢量图标
使用方式:

  1. 去阿里图标矢量图标库将想要的图标添加入库
  2. .再去库中将图标添加到项目。然后下载代码到本地
  3. 在vue项目的assets文件夹下新建一个iconfont文件夹(名字随意),将刚刚下载下来的代码包中的iconfont.css、iconfont.eto、iconfont.svg、iconfont.ttf、iconfont.woff复制到iconfont文件夹下。
  4. 在main.js中全局引入iconfont.css(import './assets/iconfont/iconfont.css'
  5. 之后就可以在项目中正常使用了< i class = "iconfont icon-icon-chaxun"></i>

第三步:项目结构划分
主要目录src,这个是由vue-cli生成,大体目录是如下划分
在这里插入图片描述

建立项目遇到的问题:
1.sass编译不成功

  • 第一个是css-loader没下载
  • 第二个是sass-loader因为网络问题下载失败
    配置sass
{
	test: /\.scss$/,
	loaders: ["style", "css", "sass"]
}

关于页面子路由问题
我喜欢用父级路由嵌套子路由的做法,然后在切换标签的div加上自定义属性,属性值为子路由的name。具体代码如下:

< div class="tab-item flex-1 txt-c" data-type="good" 
@click="tabChange($event)" >
       商品
< /div >
tabChange(e){
   console.log(e.target.dataset.type)
}

在事件中传参$event是关键的一点

展开阅读全文

没有更多推荐了,返回首页