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

已于 2022-05-10 11:50:02 修改
阅读量2.2k 收藏 5
点赞数 1
分类专栏： vue 文章标签： vue.js vue webstorm
于 2022-03-23 20:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48462447/article/details/123693383
版权

创建项目文件

前言：1.搭建好vue环境 2.设置好镜像 3.我用的编辑器是webstorm（其他编译环境也可以）

目录：

创建项目文件
删除原有文件
引用资源文件
实现底部导航栏
显示页面
做出首页
显示商品栏
做出分类

一、设置好环境之后呢，要用cmd来创建项目
我这里是在c盘下创建的项目文件，这里的项目名是mall-mobile（可根据自己的需求改变盘符）

vue create mall-mobile
若create之后与下面配图不一样的话请跳到最后
在这里插入图片描述
创建完之后选中最后一个文件（上下选择，空格确认）
在这里插入图片描述
选中（*）用" √ "代替了，记住将 Linter/Formatter 取消勾选
(√)Choose Vue version(如果没有这个选项则光选下面三个就可以了)
(√)Babel
(√)Router
(√)Vuex
( )Linter/Formatter
在这里插入图片描述
下一步选择Choose Vue version 之后再选择 2.x
在这里插入图片描述
然后下一步输入n
在这里插入图片描述
然后选择 In package.json
在这里插入图片描述
下一步输入y
加粗样式
输入保存的文件名，这里以vue0324命名
在这里插入图片描述
输入完文件名之后，下面将进行安装
在这里插入图片描述
这就是安装完成之后的样子

二、下面打开Webstorm
点击open打开mall-mobile项目文件夹
在这里插入图片描述

注意一定要打开mall-mobile文件
在这里插入图片描述
打开之后在控制台 Terminal 下输入npm run serve等待运行之后出现蓝色链接（如果8080端口被占用点击 端口被占用如何关闭）
在这里插入图片描述

点击蓝色链接之后出现这个页面就表示你的vue创建成功了
在这里插入图片描述

下一篇: 删除原有项目

今日推荐BGM: Lonely

曼陀罗.feng
关注
专栏目录
Vue--》超详细教程——vue-cli脚手架的搭建与使用
ztK63LrD的博客
11-14 4633
它简化了程序员基于webpack创建工程化的Vue项目的工程。其好处就是简省了程序员花费时间去配置webpack，从而目标只需专注在撰写项目应用上。，基于vue-cli这个系统，我们就可以快速搭建好“（英文名：Singleagepplication）简称SPA，顾名思义指的是，所有的功能与交互都在这唯一的一个页面内完成。
云E办Springboot+vue——前端项目完整版（含源码）
热门推荐
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
08-10 5万+
本项目基于Vue+Spring Boot构架一个前后端分离项目。前端使用社区非常活跃的开源框架vue进行构建。受疫情的影响，许多企业由线上办公转为线下办公。随着线上办公的人数的增多，线上办公的优点逐步凸显：通过实现工作流程的自动化、节省企业办公费用、实现绿色办公，同时提升办公效率。前端使用的技术有： Vue、Vue-cli、Vuex、VueRouter、ElementUI、Axios、ES6、Webpack、WebSocket、font-awesome、js-file-download、vue-chat 项
vue+element仿淘宝项目
06-17
期中作业 下载解压运行npm run serve
使用vue做一个“淘宝“项目——3
weixin_48462447的博客
05-10 2633
做出分类页面 ———————————————————————————————————————————— 前言：实现首页做完，详细请看前两篇文章 1.使用vue做一个“淘宝“项目(做出首页) 2.使用vue做一个“淘宝“项目(显示商品栏) ———————————————————————————————————————————— 目录： 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 做出首页 显示商品栏 做出分类页面 ————————————————————————————————————
使用vue做一个“淘宝“项目(引用资源文件)
weixin_48462447的博客
03-30 1652
前言：1.创建好文件2.删除原有的vue文件与代码 目录： 创建项目文件 删除原有文件 做出底部导航栏 一、在做导航栏之前要先引用两个文件**—>** 底部导航栏所需文件 将引用的文件放在src->assets下 然后打开main.js 在main.js下添加外部资源引用代码 import '@/assets/reset.css' 二、下面我们导入依赖，安装vant-ui组件库 还记得我们之前在创建文件的时候有一项选的是2.x吗，这里有 Vant 2组件开发指南 点击打开 在快速上手中找到安
使用vue做一个“淘宝“项目——2
weixin_48462447的博客
04-19 2149
做出首页 前言：做出底部导航栏与显示页面 目录： 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 显示页面 做出首页 一、将导航栏修改颜色 首先打开vant 2文档中的tabbar组件 打开 src->components->Tabbar.vue 文件中有一个active它的默认值为0是干什么用的 没错，就是默认的状态栏，若为0，默认就是Home，若为1，默认就是分类，以此类推 默认的导航栏是蓝色在vant 2文档中写到可以自定义颜色 代码为 <van-tabbar v-mo
vue仿淘宝商品详情demo
11-09
使用vue2仿照了淘宝商品详情以及加入购物车。包含的页面有首页、分类更多、商品详情，其中商品详情的加入购物车利用了vue的组件功能
Mac系统下使用vue做一个购物页面项目——0
weixin_64101764的博客
03-26 1339
前提：1.搭建好vue开发环境 2.设置好淘宝镜像 一、设置好环境之后，要在终端完成创建项目的操作 我这里是在/library/中先创建一个文件夹命名为vue2022，然后在终端中打开这个文件夹，创建一个命名为mall- mobile的项目（命名随意、盘符位置可根据自己的需求） vue create mall- mobile 创建完之后控制上下选择最后一个文件（空格确认） 取消Linter / Formatter的选项 选中 Babel Router Vuex 如果有Choo.
Vue系列——在vue项目中使用echarts
qq_57558631的博客
05-27 291
该示例使用vue-cli脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像： 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 1 使用 cnpm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts from 'echarts' ..
使用脚手架（Vue-Cli）快速创建一个vue项目的步骤
qq_59808309的博客
01-22 5106
一、安装vue https://cn.vuejs.org/v2/guide/installation.html 二、先确定是否安装了node.js、npm和cnpm node.js的下载地址：Node.js NPM（node package manager）是随同node.js一起安装的包管理工具，能解决前端代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编
开源vue淘宝客项目可直接使用！
08-26
对接好单库淘宝API,实现领取优惠券，包含主页，我的，9.9包邮、天猫、全网超级搜、商品列表、热门抖货、天猫商品、品牌爆款、商品详情、立即领券、分享、一键复制，足迹，收藏、精选好货、为你推荐、30元封顶等功能
详解Vue demo实现商品列表的展示
10-17
主要介绍了Vue demo实现商品列表的展示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-shopmall:vue商城项目-刘龙宾
05-31
项目说明文档 第一步：安装包依赖 npm install 第二步： 运行脚本 npm run dev 即可在浏览器中查看项目
Vue仿淘宝购物车网页
weixin_46077567的博客
01-15 3672
用vue实现淘宝网页购物车页面，自己练习，有什么不足请多多指教 功能主要包括： 全选； 店铺全选； 商品的选中和删除 结算 效果图如下： 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准...
Vue 电商项目学习
鑫的博客
04-22 1203
Vue电商项目初学习，使用Vue CLI。Vue CLI 是 Vue 官方基于 webpack 的构建工具。
vue淘宝镜像
qq_43272035的博客
03-12 2228
记录一下 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 验证 npm config get registry 应用 cnpm install vue-amap --save 结果
使用vue做一个“淘宝“项目——1
weixin_48462447的博客
03-30 2241
实现底部导航栏 前言：将需要的文件做好引用 目录： 创建项目文件 删除原有文件 引用资源文件 实现底部导航栏 一、实现静态版底部导航栏 先进行引用组件，在 src->components 下新建vue组件 将组件取名为Tabbar (底部导航栏) 创建完Tabbar之后在 Tabbar.vue 下的 template 标签中创建一个跟标记 div 标签，然后引用 vant的Tabbar 组件 （自定义组件再引用文档vant中的组件），然后找到文档中的Tabbar创建 van-tabbar 标签，代
Vue学习，使用Vue完成商品展示
最新发布
qq_60656889的博客
08-20 414
仅供参考，个人学习记录
【vue】仿淘宝商品详情---实现滚动显隐标签页&锚点导航
一位前行者的博客
11-08 1913
封装成组件复用的话，首先快捷键的每一项数据需要父组件传入；在父组件定义一个数组作为右侧导航栏的数据；由于左侧区域的某一块内容没有数据时，其对应的导航项不显示； 要给每一块的内容最外层绑定ref，是为了获取该dom元素，通过点击导航栏某一项时，让页面可以滚动到对应的元素内容； 导航在抽屉里做的，给最外层绑定ref=“drawer”，可以获取到当前页面最外层的dom元素，根据最外层容器的dom元素来获取滚动高度； 组件要接收导航栏数据、接收当前是否是抽屉(默认为抽屉，传false为普通正常页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

曼陀罗.feng

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

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

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

打赏作者

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

抵扣说明：

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

余额充值