使用vue做一个“淘宝“项目——3

已于 2022-05-28 15:37:28 修改
阅读量2.5k 收藏 13
点赞数
分类专栏： vue 文章标签： vue.js 前端 vue
于 2022-05-10 11:41:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48462447/article/details/124428363
版权

做出分类页面

前言：做出首页，详细请看前两篇文章
1.使用vue做一个“淘宝“项目(做出首页)
2.使用vue做一个“淘宝“项目(显示商品栏)

目录：

创建项目文件
删除原有文件
引用资源文件
实现底部导航栏
显示页面
做出首页
显示商品栏
做出分类
一、调用数据(写API)

在调用数据之前先自行做一个搜索栏，代码截图如下：
在这里插入图片描述

现在正式开始调用数据，因为之前做过首页的API导入，所以现在与上回一样做分类页面的api导入
代码位置: src->api->api.js
代码如下：

//分类API  catalog/inndex
export function getcatalog(){
    return request(
        {
            url:"catalog/index",
            method:"get",
        }
    );
}

写完api之后要往 src->api->mock.js 下导入数据
数据代码如下：

let catalog={"errno":0,"data":{"currentCategory":{"id":1005000,"name":"居家","keywords":"","desc":"回家，放松身心","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/a45c2c262a476fea0b9fc684fed91ef5.png","picUrl":"http://yanxuan.nosdn.127.net/e8bf0cf08cf7eda21606ab191762e35c.png","level":"L1","sortOrder":2,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},
        "categoryList":[{"id":1005000,"name":"居家","keywords":"","desc":"回家，放松身心","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/a45c2c262a476fea0b9fc684fed91ef5.png","picUrl":"http://yanxuan.nosdn.127.net/e8bf0cf08cf7eda21606ab191762e35c.png","level":"L1","sortOrder":2,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1005001,"name":"餐厨","keywords":"","desc":"爱，囿于厨房","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/ad8b00d084cb7d0958998edb5fee9c0a.png","picUrl":"http://yanxuan.nosdn.127.net/3708dbcb35ad5abf9e001500f73db615.png","level":"L1","sortOrder":3,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1005002,"name":"饮食","keywords":"","desc":"好吃，高颜值美食","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/c9280327a3fd2374c000f6bf52dff6eb.png","picUrl":"http://yanxuan.nosdn.127.net/fb670ff3511182833e5b035275e4ac09.png","level":"L1","sortOrder":9,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1008000,"name":"配件","keywords":"","desc":"配角，亦是主角","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/11abb11c4cfdee59abfb6d16caca4c6a.png","picUrl":"http://yanxuan.nosdn.127.net/02f9a44d05c05c0dd439a5eb674570a2.png","level":"L1","sortOrder":4,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1010000,"name":"服装","keywords":"","desc":"贴身的，要亲肤","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/28a685c96f91584e7e4876f1397767db.png","picUrl":"http://yanxuan.nosdn.127.net/622c8d79292154017b0cbda97588a0d7.png","level":"L1","sortOrder":5,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1011000,"name":"婴童","keywords":"","desc":"爱，从心开始","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/1ba9967b8de1ac50fad21774a4494f5d.png","picUrl":"http://yanxuan.nosdn.127.net/9cc0b3e0d5a4f4a22134c170f10b70f2.png","level":"L1","sortOrder":7,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1012000,"name":"杂货","keywords":"","desc":"解忧，每个烦恼","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/c2a3d6349e72c35931fe3b5bcd0966be.png","picUrl":"http://yanxuan.nosdn.127.net/547853361d29a37282f377b9a755dd37.png","level":"L1","sortOrder":8,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1013001,"name":"洗护","keywords":"","desc":"亲肤之物，严选天然","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/9fe068776b6b1fca13053d68e9c0a83f.png","picUrl":"http://yanxuan.nosdn.127.net/1526ab0f5982722adbc8726f9f2a338c.png","level":"L1","sortOrder":6,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1019000,"name":"志趣","keywords":"","desc":"周边精品，共享热爱","pid":0,"iconUrl":"http://yanxuan.nosdn.127.net/7093cfecb9dde1dd3eaf459623df4071.png","picUrl":"http://yanxuan.nosdn.127.net/1706e24a5e605870ba3b37ff5f49aa18.png","level":"L1","sortOrder":10,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false}],"currentSubCategory":[{"id":1008002,"name":"布艺软装","keywords":"","desc":"各种风格软装装点你的家","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/8bbcd7de60a678846664af998f57e71c.png","picUrl":"http://yanxuan.nosdn.127.net/2e2fb4f2856a021bbcd1b4c8400f2b06.png","level":"L2","sortOrder":6,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1008008,"name":"被枕","keywords":"","desc":"守护你的睡眠时光","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/927bc33f7ae2895dd6c11cf91f5e3228.png","picUrl":"http://yanxuan.nosdn.127.net/b43ef7cececebe6292d2f7f590522e05.png","level":"L2","sortOrder":2,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1008009,"name":"床品件套","keywords":"","desc":"MUJI等品牌制造商出品","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/243e5bf327a87217ad1f54592f0176ec.png","picUrl":"http://yanxuan.nosdn.127.net/81f671bd36bce05d5f57827e5c88dd1b.png","level":"L2","sortOrder":4,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1008016,"name":"灯具","keywords":"","desc":"一盏灯，温暖一个家","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/c48e0d9dcfac01499a437774a915842b.png","picUrl":"http://yanxuan.nosdn.127.net/f702dc399d14d4e1509d5ed6e57acd19.png","level":"L2","sortOrder":8,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1010003,"name":"地垫","keywords":"","desc":"家里的第“五”面墙","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/83d4c87f28c993af1aa8d3e4d30a2fa2.png","picUrl":"http://yanxuan.nosdn.127.net/1611ef6458e244d1909218becfe87c4d.png","level":"L2","sortOrder":5,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1011003,"name":"床垫","keywords":"","desc":"承托你的好时光","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/316afeb3948b295dfe073e4c51f77a42.png","picUrl":"http://yanxuan.nosdn.127.net/d6e0e84961032fc70fd52a8d4d0fb514.png","level":"L2","sortOrder":3,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1011004,"name":"家饰","keywords":"","desc":"装饰你的家","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/ab0df9445d985bf6719ac415313a8e88.png","picUrl":"http://yanxuan.nosdn.127.net/79275db76b5865e6167b0fbd141f2d7e.png","level":"L2","sortOrder":9,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1015000,"name":"家具","keywords":"","desc":"大师级工艺","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/4f00675caefd0d4177892ad18bfc2df6.png","picUrl":"http://yanxuan.nosdn.127.net/d5d41841136182bf49c1f99f5c452dd6.png","level":"L2","sortOrder":7,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1017000,"name":"宠物","keywords":"","desc":"抑菌除味，打造宠物舒适空间","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/a0352c57c60ce4f68370ecdab6a30857.png","picUrl":"http://yanxuan.nosdn.127.net/dae4d6e89ab8a0cd3e8da026e4660137.png","level":"L2","sortOrder":10,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false},{"id":1036000,"name":"夏凉","keywords":"","desc":"夏凉床品，舒适一夏","pid":1005000,"iconUrl":"http://yanxuan.nosdn.127.net/13ff4decdf38fe1a5bde34f0e0cc635a.png","picUrl":"http://yanxuan.nosdn.127.net/bd17c985bacb9b9ab1ab6e9d66ee343c.png","level":"L2","sortOrder":1,"addTime":"2018-02-01 00:00:00","updateTime":"2018-02-01 00:00:00","deleted":false}]},"errmsg":"成功"}
Mock.mock('http://localhost:8088/catalog/index',catalog);

上面这些全是数据不需要理解复制粘贴即可

二、分类页面显示

数据以及api全部完成，下面就是把数据输出到页面上去
首先，先在分类Category.vue页面拿到数据
代码位置： src->views->Category.vue
代码如下:

<script>
    // 1.导入api
    import {getcatalog} from '@/api/api.js'
    export default {
        name: "Category",
        // 做出data数据
        data(){
            return{
                cateloginfos:{}
            }
        },
        // 生命周期created
        created(){
            console.info("数据初始化之后-异步请求");
            getcatalog().then(resp=>{
                console.log(resp);
            })
        }
    }
</script>

然后在页面中看到这些数据就说明你的数据拿到了

在这里插入图片描述
现在我要再单独拿出来某一部分数据，代码截图如下：
在这里插入图片描述

三、做出侧边栏

现在已经做出来数据了，那就开始通过
vant 2文档 Sidebar 侧边导航——监听切换事件 作为参照来做出侧边导航栏，首先找到 Category.vue 下的搜索栏，开始编写导航，代码如下：
在这里插入图片描述
运行结果如下：
在这里插入图片描述
调节侧边栏样式，代码如下：
在这里插入图片描述
下面进行二级分类区，代码如下：
在这里插入图片描述
运行结果如下（有报错，但无所谓）：
在这里插入图片描述

四、做出侧边栏按钮交互

首先参考Sidebar 侧边导航——监听切换事件
代码如下：
在这里插入图片描述

现在侧边栏就能进行交互了

下面导入通知栏Notify与Toast（看哪个好用用哪个）
import { Notify,Toast} from 'vant';
在这里插入图片描述
在这里插入图片描述
现在能交互了，但是还没有数据
先做出api，代码如下：
在这里插入图片描述
然后在Mock.js中写入数据，代码如下:

let getCurrentCatelog={
    "errno": 0,
    "data": {
        "currentCategory": {
            "id": 1005001,
            "name": "餐厨",
            "keywords": "",
            "desc": "爱，囿于厨房",
            "pid": 0,
            "iconUrl": "http://yanxuan.nosdn.127.net/ad8b00d084cb7d0958998edb5fee9c0a.png",
            "picUrl": "http://yanxuan.nosdn.127.net/3708dbcb35ad5abf9e001500f73db615.png",
            "level": "L1",
            "sortOrder": 3,
            "addTime": "2018-02-01 00:00:00",
            "updateTime": "2018-02-01 00:00:00",
            "deleted": false
        },
        "currentSubCategory": [
            {
                "id": 1005007,
                "name": "锅具",
                "keywords": "",
                "desc": "一口好锅，炖煮生活一日三餐",
                "pid": 1005001,
                "iconUrl": "http://yanxuan.nosdn.127.net/4aab4598017b5749e3b63309d25e9f6b.png",
                "picUrl": "http://yanxuan.nosdn.127.net/d2db0d1d0622c621a8aa5a7c06b0fc6d.png",
                "level": "L2",
                "sortOrder": 1,
                "addTime": "2018-02-01 00:00:00",
                "updateTime": "2018-02-01 00:00:00",
                "deleted": false
            },
            {
                "id": 1005008,
                "name": "餐具",
                "keywords": "",
                "desc": "餐桌上的舞蹈",
                "pid": 1005001,
                "iconUrl": "http://yanxuan.nosdn.127.net/f109afbb7e7a00c243c1da29991a5aa3.png",
                "picUrl": "http://yanxuan.nosdn.127.net/695ed861a63d8c0fc51a51f42a5a993b.png",
                "level": "L2",
                "sortOrder": 4,
                "addTime": "2018-02-01 00:00:00",
                "updateTime": "2018-02-01 00:00:00",
                "deleted": false
            },
            {
                "id": 1005009,
                "name": "清洁",
                "keywords": "",
                "desc": "环保便利，聪明之选",
                "pid": 1005001,
                "iconUrl": "http://yanxuan.nosdn.127.net/e8b67fe8b8db2ecc2e126a0aa631def0.png",
                "picUrl": "http://yanxuan.nosdn.127.net/3a40faaef0a52627357d98ceed7a3c45.png",
                "level": "L2",
                "sortOrder": 9,
                "addTime": "2018-02-01 00:00:00",
                "updateTime": "2018-02-01 00:00:00",
                "deleted": false
            },
            {
                "id": 1007000,
                "name": "杯壶",
                "keywords": "",
                "desc": "精工生产制作，匠人手艺",
                "pid": 1005001,
                "iconUrl": "http://yanxuan.nosdn.127.net/0b244d3575b737c8f0ed7e84c5c4abd2.png",
                "picUrl": "http://yanxuan.nosdn.127.net/ec53828a3814171079178a59fb2593da.png",
                "level": "L2",
                "sortOrder": 2,
                "addTime": "2018-02-01 00:00:00",
                "updateTime": "2018-02-01 00:00:00",
                "deleted": false
            },
            {
                "id": 1008011,
                "name": "清洁保鲜",
                "keywords": "",
                "desc": "真空保鲜，美味不限时",
                "pid": 1005001,
                "iconUrl": "http://yanxuan.nosdn.127.net/dc4d6c35b9f4abb42d2eeaf345710589.png",
                "picUrl": "http://yanxuan.nosdn.127.net/04cd632e1589adcc4345e40e8ad75d2b.png",
                "level": "L2",
                "sortOrder": 6,
                "addTime": "2018-02-01 00:00:00",
                "updateTime": "2018-02-01 00:00:00",
                "deleted": false
            },
            {
                "id": 1008012,
                "name": "功能厨具",
                "keywords": "",
                "desc": "下厨省力小帮手",
                "pid": 1005001,
                "iconUrl": "http://yanxuan.nosdn.127.net/22db4ccbf52dc62c723ac83aa587812a.png",
                "picUrl": "http://yanxuan.nosdn.127.net/5b94463017437467a93ae4af17c2ba4f.png",
                "level": "L2",
                "sortOrder": 3,
                "addTime": "2018-02-01 00:00:00",
                "updateTime": "2018-02-01 00:00:00",
                "deleted": false
            },
            {
                "id": 1008013,
                "name": "茶具咖啡具",
                "keywords": "",
                "desc": "先进工艺制造，功夫体验",
                "pid": 1005001,
                "iconUrl": "http://yanxuan.nosdn.127.net/9ea192cd2719c8348f42ec17842ba763.png",
                "picUrl": "http://yanxuan.nosdn.127.net/be3ba4056e274e311d1c23bd2931018d.png",
                "level": "L2",
                "sortOrder": 5,
                "addTime": "2018-02-01 00:00:00",
                "updateTime": "2018-02-01 00:00:00",
                "deleted": false
            },
            {
                "id": 1013005,
                "name": "刀剪砧板",
                "keywords": "",
                "desc": "传统工艺 源自中国刀城",
                "pid": 1005001,
                "iconUrl": "http://yanxuan.nosdn.127.net/9d481ea4c2e9e6eda35aa720d407332e.png",
                "picUrl": "http://yanxuan.nosdn.127.net/555afbfe05dab48c1a3b90dcaf89b4f2.png",
                "level": "L2",
                "sortOrder": 7,
                "addTime": "2018-02-01 00:00:00",
                "updateTime": "2018-02-01 00:00:00",
                "deleted": false
            },
            {
                "id": 1023000,
                "name": "厨房小电",
                "keywords": "",
                "desc": "厨房里的省心小电器",
                "pid": 1005001,
                "iconUrl": "http://yanxuan.nosdn.127.net/521bd0c02d283b80ba49e73ca84df250.png",
                "picUrl": "http://yanxuan.nosdn.127.net/c09d784ba592e4fadabbaef6b2e95a95.png",
                "level": "L2",
                "sortOrder": 8,
                "addTime": "2018-02-01 00:00:00",
                "updateTime": "2018-02-01 00:00:00",
                "deleted": false
            }
        ]
    },
    "errmsg": "成功"
}
Mock.mock('http://localhost:8088/catalog/current',getCurrentCatelog)

在数据中创建分类变量
在这里插入图片描述
先导入
在这里插入图片描述
最后调用当前所选分类的最新数据，就完成了分类页面

在这里插入图片描述

分类页面全部代码

上一篇:显示商品栏

推荐BGM:Shape of You

曼陀罗.feng
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
使用vue-cli脚手架工具搭建vue-webpack项目
10-17
Vue官方提供了一个强大的脚手架工具——vue-cli，它可以简化项目的初始化过程，帮助开发者快速搭建项目结构。 首先，搭建VueWebpack项目的第一步是确保你已经安装了Node.js环境。Node.js是JavaScript的服务器端运行...
vue2.x+webpack快速搭建前端项目框架详解
08-28
然后，在components目录下新建一个header的目录，新建两个文件header.vue和header.scss，引入到app.vue中使用。 另外，需要引入axios接口请求框架，使用命令npm install axios --save-dev和npm install qs来安装...
使用vue做一个“淘宝“项目——2
weixin_48462447的博客
04-19 2064
做出首页 前言：做出底部导航栏与显示页面 目录： 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 做出首页 一、将导航栏修改颜色 首先打开vant 2文档中的tabbar组件 打开 src->components->Tabbar.vue 文件中有一个active它的默认值为0是干什么用的 没错，就是默认的状态栏，若为0，默认就是Home，若为1，默认就是分类，以此类推 默认的导航栏是蓝色在vant 2文档中写到可以自定义颜色 代码为 <van-tabbar v-mo
在Vue3这样子写页面，更快更高效！
趣谈前端
09-28 254
点击关注公众号，更多精彩前言 在开发管理后台过程中，一定会遇到不少了增删改查页面，而这些页面的逻辑大多都是相同的，如获取列表数据，分页，筛选功能这些基本功能。而不同的是呈现出来的数据项。还有一些操作按钮。对于刚开始只有 1，2 个页面的时候大多数开发者可能会直接将之前的页面代码再拷贝多一份出来，而随着项目的推进类似页面数量可能会越来越多，这直接导致项目代码耦合度越来越高。这也是为什么在项目中一些可...
2024年最新Vue移动端用淘宝弹性布局lib-flexible插件做适配，web前端开发面试简历
最新发布
2401_84447207的博客
05-15 551
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue3 如何实现一个全局搜索框
fang_my的博客
11-26 3597
之所以不喜欢使用真代码去写文章而大量使用截图的原因是：我自己在搜索到自己想要的文章后，也会喜欢直接看有没有最后的成品代码，然后直接复制就拿过去用了，而往往忽略了自己动手去实现一遍才是真正理解了的过程。所以我写代码的时候，尽量不写特别复杂的逻辑，而写一些很简单的几行代码去实现某一个功能。是因为我希望你们真正带入自己的思考，和一步步体会这个实现过程，从而举一反三。如果你认真看了该文章，你也许会明白现在很多组件库的底层实现原理其实就是这样的，比如全局弹出的dialog，modal框等等。
使用vue做一个“淘宝“项目——1
weixin_48462447的博客
03-30 2200
实现底部导航栏 前言：将需要的文件做好引用 目录： 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 一、实现静态版底部导航栏 先进行引用组件，在 src->components 下新建vue组件 将组件取名为Tabbar (底部导航栏) 创建完Tabbar之后在 Tabbar.vue 下的 template 标签中创建一个跟标记 div 标签，然后引用 vant的Tabbar 组件 （自定义组件再引用文档vant中的组件），然后找到文档中的Tabbar创建 van-tabbar 标签，代
Vue前后端项目开发指南（二）【首页的搭建】
HelloWorld, GraspWorld!
06-24 928
续上篇：Vue前后端项目开发指南（一）【前端项目的创建】创建完成的项目目录如下所示 主要有以下几个目录 assets：是资源存放的目录 components: 主要页面中的组件 plugins：是所使用到的插件 router：是项目的路由 store：进行数据存储 views：所使用到的页面 App.vue：画面的进入点接下来我们要创建一个首页 修改 修改后的主页显示如下： 这里修改了布局，具体可以参考elementui的官网>>>container布局设计 此处想讲一下，router-view组件进
前端毕业设计——淘宝网
10-14
【前端毕业设计——淘宝网】项目是一个以Vue2.0和Vuex为核心技术构建的电商网站，旨在模拟淘宝网的基本功能。在这个项目中，开发者利用现代前端技术栈，实现了用户友好的界面和交互，以及一些关键的电商特性。以下是...
vue-cli4搭建脚手架.doc
01-20
Vue CLI 4（也称为vue-cli 3.x，尽管标题提到的是vue-cli4，但内容描述的是vue-cli 3）是一个用于快速搭建Vue.js项目的工具，它集成了Webpack和其他必要的构建设置，使得开发者无需手动配置就能开始开发。...
Vue第三部分：脚手架的搭建以及原理学习.pdf
08-17
Vue CLI 提供了一个命令行界面，允许开发者自动化地搭建项目结构、生成文件模板和配置运行环境，极大地提高了开发效率。 首先，搭建Vue CLI的前提是需要安装Node.js环境。Node.js不仅是一个JavaScript运行环境，还...
开源vue淘宝客项目可直接使用！
08-26
对接好单库淘宝API,实现领取优惠券，包含主页，我的，9.9包邮、天猫、全网超级搜、商品列表、热门抖货、天猫商品、品牌爆款、商品详情、立即领券、分享、一键复制，足迹，收藏、精选好货、为你推荐、30元封顶等功能
商城手机端vue仿淘宝商品详情demo
05-19
使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
10-15
主要介绍了Vue移动端用淘宝弹性布局lib-flexible插件做适配的操作方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
基于VUE25仿天猫移动端首页的SPA
08-12
基于VUE2.5仿天猫移动端首页的SPA
【VUE】Vue.js安装淘宝NPM初始化
鲜衣怒马楼兰月
07-20 1514
安装淘宝npm镜像（推荐）： npm install -g cnpm --registry=https://registry.npm.taobao.org 安装vue-cli脚手架： cnpm install -g vue-cli 创建初始化项目“my-project”: vue init webpack my-project 安装项目依赖： cnpm install 运行项目： ...
使用淘宝镜像cnpm安装Vue.js
热门推荐
Small_Lee的博客
03-29 3万+
前言Vue.js是前端一个比较火的MVVM框架，要使用它，我们必须提前配置，其中有一种安装方式是使用npm，比较适合比较大型的应用。今天就来看看这种方式如何操作，由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.步骤首先我们需要下载npm，因为我已经提前安装了node.js,安装包里面集成了npm，然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。 1.打开命令
vuecli仿淘宝
宏斌的博客
07-15 882
仿淘宝 项目地址： https://github.com/tangmusenLiu/miniTaobao
使用vue3写一个项目
05-11
好的，下面我将为您提供一个简单的Vue3项目示例，您可以根据自己的需求进行修改和扩展。 首先，您需要安装Vue CLI： ``` npm install -g @vue/cli ``` 然后，使用以下命令创建一个新的Vue3项目： ``` vue create my-project ``` 在创建项目时，选择手动设置并选择Vue3作为默认选项。 创建完成后，进入项目并启动开发服务器： ``` cd my-project npm run serve ``` 现在，您可以在浏览器中访问 http://localhost:8080 查看项目。 接下来，我们可以开始编写我们的Vue3组件。在 src/components 目录下创建一个新的组件，例如 MyComponent.vue： ```vue <template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template> <script> import { defineComponent } from 'vue'; export default defineComponent({ name: 'MyComponent', props: { title: String, content: String, }, }); </script> ``` 然后在 App.vue 中使用它： ```vue <template> <div id="app"> <MyComponent title="Hello" content="World" /> </div> </template> <script> import MyComponent from './components/MyComponent.vue'; export default { name: 'App', components: { MyComponent, }, }; </script> ``` 最后，您可以继续添加更多的组件和功能，以满足您的项目需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

曼陀罗.feng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值