前端开发
关注
分享
扫一扫
文章平均质量分 72
果冻儿upupup
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Vue前端项目实战--移动商城--首页开发
项目总博客见《Vue前端项目实战–网上商城–总结篇（coderwhy老师的商城项目）》https://blog.youkuaiyun.com/Jelly_11/article/details/113851138这篇博客是记录项目中的首页开发过程。一、顶部导航栏navbar的封装实现效果：在components/common/navbar文件夹中新建NavBar.vue文件，设置三个插槽，用于用户设置导航栏左中右三块内容。首页中只需要用到中间这个插槽，在Home.vue中引用NavBar.vue。详细代码：原创 2021-02-19 20:49:14 · 3476 阅读 · 1 评论 -
Vue前端项目实战--移动商城-Bug记录及常用方法总结
使用this.$router.push或this.$router.repalce指令时报错“NavigationDuplicat: Avoided redundant navigation to current location”。解决方法：vue-router版本问题持续更新中……原创 2021-02-19 18:27:24 · 652 阅读 · 0 评论 -
前端开发-移动商城-底部标签栏tabbar组件化封装(可在其他项目中通用)
该组件为网上商城项目的底部导航栏，整体项目见我的博客：https://blog.youkuaiyun.com/Jelly_11/article/details/113851138实现效果：注意：虽然最终的目的是封装成一个可通用的组件，但是在开发的过程中可先不按照封装的思想进行，例如先直接写在一个vue文件中，也不设置插槽，等实现基本的功能之后，再抽离封装。开发步骤在components/common/tabbar文件夹下建了TabBar.vue、TabBarItem.vue，在components/c原创 2021-02-19 18:05:25 · 772 阅读 · 1 评论 -
Vue前端项目实战--移动商城--总结篇
一、创建项目（划分目录）1、在VScode终端用Vue CLI3创建项目npx vue create jelly-mall如何安装Vue CLI见我之前的博客：https://blog.youkuaiyun.com/Jelly_11/article/details/113389663注意：项目名称不可以有大写字母。在这里我只选择了基本的babel，其他的例如vue-router等用到时我再手动安装。2、创建好项目后，删除一些默认内容删掉默认给出的HelloWord.vue和logo.png；删原创 2021-02-18 20:18:28 · 3973 阅读 · 3 评论 -
vue报错“NavigationDuplicat: Avoided redundant navigation to current location”解决方法
方法1查看自己的vue-router版本，如果在在3.0版本以上，将其改为3.0版本。方法2修改push源码，在router下的index.js文件中添加下列代码即可。// 解决vue-router在3.0版本以上重复报错问题const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, locati原创 2021-02-08 20:51:39 · 4364 阅读 · 0 评论 -
Vue CLI 脚手架安装方法以及初始化项目特别慢的解决方法
Vue CLI 安装方法1、前提安装Vue CLI的前提是已经安装好了NodeJS和全局Webpack，两者的安装方法见我之前的博客：webpack安装配置相关问题https://blog.youkuaiyun.com/Jelly_11/article/details/1130691852、安装Vue CLI3版本打开电脑的cmd，输入命令npm install -g @vue/cli@3.2.1如果安装速度特别慢，可以采用淘宝NPM镜像，采用cnpm命令代替npm:npm install -g原创 2021-01-29 15:29:21 · 3062 阅读 · 0 评论 -
webpack打包css文件时报错：TypeError: this.getResolve is not a function的解决方法
安装好了webpack后，想要打包css文件还需要安装loadernpm install --save-dev css-loadernpm install --save-dev style-loaderwebpack.config.js文件中添加：module.exports = { module: { rules: [ { test: /\.css$/i, use: ["style-loader", "css-loader"],原创 2021-01-24 10:56:14 · 972 阅读 · 0 评论 -
webpack安装配置相关问题
webpack是一个现代的JavaScript应用的静态模块打包工具。一、安装webpack1、安装Node.js安装webpack首先需要安装Node.js，它自带了npm软件包管理工具。（若已安装Node.js，可忽略这一步）Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/选择合适的版本下载后，双击即可进入安装，安装过程很简单，选择安装目录后，基本上就一直下一步即可，不过注意有一步选择安装模式时要选择Add to PATH。查看自己的no原创 2021-01-24 10:38:46 · 418 阅读 · 0 评论 -
前端开发-HTML+CSS实现网易新闻网右侧新闻列表
实现网易新闻网右侧新闻列表：html5+css3<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网易新闻右侧列表</title> <link rel="s原创 2020-11-17 19:27:57 · 3401 阅读 · 0 评论 -
前端开发-HTML+CSS实现京东官网左侧导航条列表
实现京东左侧导航条列表：html5+css3<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东左侧导航条列表</title> <link rel="st原创 2020-11-17 18:36:18 · 2032 阅读 · 0 评论