Vue2尚品汇前台项目笔记——（1）项目初始化

Vue2尚品汇前台项目笔记

一、项目初始化

使用[脚手架创建项目，具体参考之前的脚手架配置笔记，我起名叫vue_shop_test

1.脚手架目录分析

node_modules文件夹：项目依赖文件夹

public文件夹：一般放置一些静态资源（图片）,需要注意，放在public文件夹中的静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。

src文件夹（程序员源代码文件夹）:

​ assets文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源）,需要注意，放置在assets文件夹里面静 态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包JS文件里面。

​ components文件夹：一般放置的是非路由组件（全局组件）

​ App.vue:唯一的根组件，Vue当中的组件（.vue)

​ main.js:程序入口文件，也是整个程序当中最先执行的文件

babel.config.js:配置文件（babel相关）

package.json文件：认为项目身份证，记录项目叫做什么、项目当中有哪些依赖、项目怎么运行。

package-lock.json:缓存性文件

README.md:说明性文件

2.项目的其他配置

2.1 项目运行，浏览器自动打开
package.json"scripts": {"serve": "vue-cli-service serve --open",	//加上--open"build": "vue-cli-service build","lint": "vue-cli-service lint"},
2.2 关闭eslint校验工具（不关闭会有各种规范，不按照规范就会报错）
  • 根目录下创建vue.config.js,进行配置
  • 比如：声明变量但是没有使用eslint校验工具报错。
module.exports = {//关闭eslintlintOnSave: false
}
2.3 src文件夹配置别名

创建jsconfig.json，【用@代替src文件夹，这样将来文件很多，找的时候也方便很多】，exclude表示不可以使用该别名的文件

 {"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}},"exclude": ["node_modules","dist"]}

3.项目路由分析

vue-router

前端所谓路由：key-value键值对。

key:URL(地址栏中的路径）

value:相应的路由组件

注意：项目上中下结构

路由组件：

​ Home首页路由组件、Search路由组件、login登录路由、Register注册路由

非路由组件：
Header【首页、搜索页】
Footer【在首页、搜索页】，但是在登录和注册页面是没有

4、完成非路由组件Header与Footer业务

在咱们项目当中，不在以HTML+CSS为主，主要搞业务、逻辑

在开发项目的时候：
1:书写静态页面（HTML+CSS)
2:拆分组件
3:获取服务器的数据动态展示
4:完成相应的动态业务逻辑

注意1:创建组件的时候，组件结构+组件的样式+图片资源

注意2:咱们项目采用的less样式，浏览器不识别less样式，需要通过less、less-loader【安装五版本的】进行处理
less,把less样式变为css样式，浏览器才可以识别。

注意3:如果想让组件识别less样式，需要在style标签的身上加上1ang=less

4.1使用组件的步骤（非路由组件）

​ -创建或者定义

​ -引入

​ -注册

​ -使用

5路由组件的搭建

vue-router

在上面分析的时候，路由组件应该有四个：Home、Search、Login、Register

​ -components文件夹：经常放置的非路由组件（共用全局组件）
​ -pages|views文件夹：经常放置路由组件

5.1配置路由

项目当中配置的路由一般放置在router文件夹中

5.2总结

路由组件与非路由组件的区别？

1:路由组件一般放置在pages|views文件夹，非路由组件一般放置components文件夹中
2:路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字）,非路由组件在使用的时候，一般都是以标签的形
式使用
3:注册完路由，不管路由路由组件、还是非路由组件身上都有 r o u t e 、 route、 route、router属性

$route:一般获取路由信息【路径、query、params等等】
$router:一般进行编程式导航进行路由跳转【push|replace】

6.Footer组件显示与隐藏

显示或者隐藏组件：V-if|v-show

v-if:操作dom在节点处是真有还是真没有，会频繁操作dom，很消耗性能

v-show:只是通过操作样式将元素显示或隐藏（display，blockl）

从性能的角度考虑，v-show更好

Footer组件：在Home、Search显示Footer组件

Footer组件：在登录、注册时候隐藏的

6.1路由路径判断

我们可以根据组件身上的$route获取当前路由的信息，通过路由路径判断Footer显示与隐藏

    <!-- 在Home和Search下是显示的，在Login和Register下是隐藏的 --><Footer v-show="$route.path == '/home' || $route.path == '/search'"></Footer>

但如果以后路由很多，那么这种情况下写起来会非常麻烦，不是最终解决手段

6.2路由元信息判断

配置的路由的时候，可以给路由添加路由元信息【meta】路由需要配置对象，它的key不能瞎写、胡写、乱写

routes: [{path: '/home',component: Home,meta: { showFooter: true }},{path: '/search',component: Search,meta: { showFooter: true }},{path: '/login',component: Login,meta: { showFooter: false }},{path: '/register',component: Register,meta: { showFooter: false }},

<Footer v-show="$route.meta.showFooter"></Footer>

7.路由传参

7.1:路由跳转有几种方式？

比如：A->B
声明式导航：router-link(务必要有to属性）,可以实现路由的跳转
编程式导航：利用的是组件实例的$router.push|replace方法，可以实现路由的跳转。（可以书写一些自己业务）

7.2:路由传参，参数有几种写法？

query、params两个属性可以传递参数

query参数：不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2
query参数对应的路由信息 path: "/search"

params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,地址栏表现为 /search/v1/v2
params参数对应的路由信息要改为path: "/search/:keyword" 这里的/:keyword就是一个params参数的占位符

//路由传递参数
//第一种：字符串传递this.$router.push('/search/' + this.keyword + '?k=' + this.keyword.toUpperCase())
//第二种：模板字符串this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`)
// 第三种：对象的写法（常用）   需要给路由命名
this.$router.push({name: 'search',params: { keyword: this.keyword },query: { k: this.keyword.toUpperCase() }
})
  • params传参问题
    （1）如何指定params参数可传可不传
  如果路由path要求传递params参数,但是没有传递,会发现地址栏URL有问题，详情如下：Search路由项的path已经指定要传一个keyword的params参数，如下所示：path: "/search/:keyword",执行下面进行路由跳转的代码：this.$router.push({name:"Search",query:{keyword:this.keyword}})当前跳转代码没有传递params参数地址栏信息：http://localhost:8080/#/?keyword=asd此时的地址信息少了/search正常的地址栏信息: http://localhost:8080/#/search?keyword=asd解决方法：可以通过改变path来指定params参数可传可不传 path: "/search/:keyword?",?表示该参数可传可不传

参考连接：https://blog.csdn.net/weixin_44867717/article/details/109773945

（2）由（1）可知params可传可不传，但是如果传递的是空串，如何解决 。

 this.$router.push({name:"Search",query:{keyword:this.keyword},params:{keyword:''}})出现的问题和1中的问题相同,地址信息少了/search解决方法： 加入||undefined，当我们传递的参数为空串时地址栏url也可以保持正常this.$router.push({name:"Search",query:{keyword:this.keyword},params:{keyword:''||undefined}})

（3）路由组件能不能传递props数据？
可以，有三种写法

//布尔值写法：params
props:true,
//对象写法：额外的给路由组件传递一些props
props:{a:1,b:2},
//函数写法：可以params参数、query参数，通过props传递给路由组件
props:($route)=>{return {keyword:$route.params.keyword,k:$route.query.k};
}

8、多次执行相同的push问题

多次执行相同的push问题，控制台会出现警告
例如：使用this.$router.push({name:‘Search’,params:{keyword:“…”||undefined}})时，如果多次执行相同的push，控制台会出现警告。

let result = this.$router.push({name:"Search",query:{keyword:this.keyword}})
console.log(result)

执行一次上面代码：

在这里插入图片描述

多次执行出现警告：

在这里插入图片描述

原因：push是一个promise，promise需要传递成功和失败两个参数，我们的push中没有传递。
方法：this.$router.push({name:‘Search’,params:{keyword:“…”||undefined}},()=>{},()=>{})后面两项分别代表执行成功和失败的回调函数。
这种写法治标不治本，将来在别的组件中push|replace,编程式导航还是会有类似错误
push是VueRouter.prototype的一个方法，在router中的index重写该方法即可(看不懂也没关系，这是前端面试题)

//1、先把VueRouter原型对象的push，保存一份
let originPush = VueRouter.prototype.push;
//2、重写push|replace
//第一个参数：告诉原来的push，跳转的目标位置和传递了哪些参数
VueRouter.prototype.push = function (location,resolve,reject){if(resolve && reject){originPush.call(this,location,resolve,reject)}else{originPush.call(this,location,() => {},() => {})}
}

绕了大半天，说白了就是push不是$router本来就带着的方法，而是原型上的，所以要统一修改的话必须从原型上下手而不是$router

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/694001.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java项目：20 基于SSM实现的支教管理系统

Java项目：20 基于SSM实现的支教管理系统

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 ssm支教管理系统&#xff08;前台后台&#xff09; 前台角色&#xff1a;支教学校志愿者 支教学校功能模块&#xff1a;支教学校查询报名职位…
阅读更多...
3DTile是不是没有坐标的选择？

3DTile是不是没有坐标的选择？

可参考以下内容&#xff1a; 一、坐标参考系统(CRS) 3D Tiles 使用右手笛卡尔坐标系;也就是说&#xff0c;x和y的叉积产生z。3D Tiles 将z轴定义为局部笛卡尔坐标系的向上。tileset的全局坐标系通常位于WGS 84地心固定(ECEF)参考系(EPSG4978)中&#xff0c;但它不是必须的&am…
阅读更多...
【数据结构】单向循环链表

【数据结构】单向循环链表

一、mian函数 #include <stdio.h> #include "./3.looplinklist.h" int main(int argc, const char *argv[]) {looplinklist* head create_looplinklist();insertHead_looplinklist(head,100);insertHead_looplinklist(head,200);insertHead_looplinklist(hea…
阅读更多...
瑞盟MS5188N——16bit、8 通道、500kSPS、 SAR 型 ADC

瑞盟MS5188N——16bit、8 通道、500kSPS、 SAR 型 ADC

产品简述 MS5188N 是 8 通道、 16bit 、电荷再分配逐次逼近型模数 转换器&#xff0c;采用单电源供电。 MS5188N 拥有多通道、低功耗数据采集系统所需的所有 组成部分&#xff0c;包括&#xff1a;无失码的真 16 位 SAR ADC &#xff1b;用于将输入配 置为单端输入…
阅读更多...
【Flink状态管理（八）】Checkpoint：CheckpointBarrier对齐后Checkpoint的完成、通知与对学习状态管理源码的思考

【Flink状态管理（八）】Checkpoint：CheckpointBarrier对齐后Checkpoint的完成、通知与对学习状态管理源码的思考

文章目录 一. 调用StreamTask执行Checkpoint操作1. 执行Checkpoint总体代码流程1.1. StreamTask.checkpointState()1.2. executeCheckpointing1.3. 将算子中的状态快照操作封装在OperatorSnapshotFutures中1.4. 算子状态进行快照1.5. 状态数据快照持久化 二. CheckpointCoordin…
阅读更多...
pyson语言身份证实名认证接口标准版调用-身份证实名认证API

pyson语言身份证实名认证接口标准版调用-身份证实名认证API

身份证实名认证功能主要是确保用户身份的真实性&#xff0c;降低欺诈风险&#xff0c;提高平台安全性。翔云身份证实名认证API&#xff0c;高效、准确且合规&#xff0c;是广大开发人员的优质选择。 翔云身份实名认证API对接简单易集成&#xff0c;支持各种主流编程语言&#…
阅读更多...
图的遍历-----深度优先遍历（dfs）,广度优先遍历（bfs）【java详解】

图的遍历-----深度优先遍历（dfs）,广度优先遍历（bfs）【java详解】

目录 简单介绍&#xff1a;什么是深度、广度优先遍历&#xff1f; 深度优先搜索&#xff08;DFS&#xff0c;Depth First Search&#xff09;&#xff1a; 大致图解&#xff1a; 广度优先搜索&#xff08;BFS&#xff0c;Breadth First Search&#xff09;&#xff1a; 大致图…
阅读更多...
Python学习笔记——自定义函数（传递任意数量的实参）

Python学习笔记——自定义函数（传递任意数量的实参）

Python允许函数从调用语句中收集任意数量的实参。例如下面自定义函数制作一个披萨&#xff0c;它需要接受很多配料&#xff0c;但无法预先确定顾客要点多少种配料。 下面行数只有一个形参*toppings&#xff0c;不管调用语句提供多少个实参&#xff0c;这个参数都会收集到&…
阅读更多...
用 LangChain 和 Milvus 从零搭建 LLM 应用

用 LangChain 和 Milvus 从零搭建 LLM 应用

如何从零搭建一个 LLM 应用&#xff1f;不妨试试 LangChain Milvus 的组合拳。 作为开发 LLM 应用的框架&#xff0c;LangChain 内部不仅包含诸多模块&#xff0c;而且支持外部集成&#xff1b;Milvus 同样可以支持诸多 LLM 集成&#xff0c;二者结合除了可以轻松搭建一个 LL…
阅读更多...
MySQL高级特性篇(7)-数据库版本控制与迁移

MySQL高级特性篇(7)-数据库版本控制与迁移

MySQL数据库版本控制与迁移 在软件开发的过程中&#xff0c;数据库版本控制和迁移是非常重要的一部分。这些过程确保了数据库的结构及数据的追踪和更新。在本篇博客中&#xff0c;我们将介绍如何使用Markdown语法来编写MySQL数据库版本控制与迁移的相关内容。 1. 什么是MySQL…
阅读更多...
在Discord上添加自己的服务器并邀请midjourney机器人加入

在Discord上添加自己的服务器并邀请midjourney机器人加入

我开发的chatgpt网站&#xff1a; https://chat.xutongbao.top
阅读更多...
【ES】es查询term、match、match_phrase、mast_not、mast...

【ES】es查询term、match、match_phrase、mast_not、mast...

这里写自定义目录标题 数据类型不分词的匹配&#xff08;会去匹配分词的数据&#xff09;分词匹配模糊匹配其他 数据类型 keyword&#xff1a;不分词非keyword&#xff1a;分词 不分词的匹配&#xff08;会去匹配分词的数据&#xff09; 对属性名.keyword&#xff0c;就是全…
阅读更多...
考研英语单词29

考研英语单词29

Day 29 unify v.统一&#xff0c;使成一体【union n.结合&#xff0c;联合&#xff0c;工会&#xff0c;团结 unity n.团结&#xff0c;统一&#xff0c;协调】 offend v.冒犯&#xff0c;使不愉快【offender n.冒犯者 offensive a.冒犯的&#xff0c;无礼的】 d…
阅读更多...
运动重定向学习笔记

运动重定向学习笔记

目录 c++ bvh 动画重定向 unity动画重定向 深度学习 重定向 2020年的模型：
阅读更多...
vue2--多设备访问本地调试项目

vue2--多设备访问本地调试项目

背景 在vue2开发阶段&#xff0c;为了更好的和小伙伴对项目进行讨论&#xff0c;需要让小伙伴可以看到自己本地的项目。 方案 修改vue2项目配置 在本地进行项目调试时&#xff0c;都是使用的127.0.0.1:8080&#xff0c;为了让局域网中的其他小伙伴可以访问&#xff0c;需要…
阅读更多...
阿里云国际-在阿里云服务器上快速搭建幻兽帕鲁多人服务器

阿里云国际-在阿里云服务器上快速搭建幻兽帕鲁多人服务器

幻兽帕鲁是最近流行的新型生存游戏。该游戏一夜之间变得极为流行&#xff0c;同时在线玩家数量达到了200万。然而&#xff0c;幻兽帕鲁的服务器难以应对大量玩家的压力。为解决这一问题&#xff0c;幻兽帕鲁允许玩家建立专用服务器&#xff0c;其提供以下优势&#xff1a; &am…
阅读更多...
Docker中如何删除某个镜像

Docker中如何删除某个镜像

1. 停止使用镜像的容器 首先&#xff0c;您需要停止所有正在使用该镜像的容器。您可以使用 docker stop 命令来停止容器&#xff1a; docker stop 11184993a106如果有多个容器使用该镜像&#xff0c;您需要对每个容器都执行停止命令。您可以通过 docker ps -a | grep core-ba…
阅读更多...
数据结构 计算结构体大小

数据结构 计算结构体大小

一、规则&#xff1a; 操作系统制定对齐量&#xff1a; 64位操作系统&#xff0c;默认8Byte对齐 32位操作系统&#xff0c;默认4Byte对齐 结构体对齐规则&#xff1a; 1.结构体整体的大小&#xff0c;需要是最大成员对齐量的整数倍 2.结构体中每一个成员的偏移量需要存在…
阅读更多...
Selenium常见问题解析

Selenium常见问题解析

1、元素定位失败&#xff1a; 在使用Selenium自动化测试时&#xff0c;最常见的问题之一是无法正确地定位元素&#xff0c;这可能导致后续操作失败。解决方法包括使用不同的定位方式&#xff08;如xpath、CSS selector、id等&#xff09;&#xff0c;等待页面加载完全后再进行…
阅读更多...
【Oracle】玩转Oracle数据库（三）：数据库的创建和管理

【Oracle】玩转Oracle数据库（三）：数据库的创建和管理

前言 嘿&#xff0c;各位数据库小能手们&#xff01;今天我们要进入数据库的创世纪&#xff0c;探索Oracle数据库的创建和管理&#xff01;&#x1f527;&#x1f4bb; 在这篇博文【Oracle】玩转Oracle数据库&#xff08;三&#xff09;&#xff1a;数据库的创建和管理中&#…
阅读更多...
最新文章

Copyright @ 2022~2023