vue大型商城系统中遇到的问题(上)

news2024/11/13 11:52:11

一:创建仓库

1.领导创建git仓库(参考————这篇文章),新手下载git

2.打开cmd终端,将git仓库拉到本地

3.进入文件目录,查看分支(新手向——为什么需要创建分支,查看---)

4.创建新分支

5.提交到远程仓库(git)上

2023/2/2,如果在本地vs上切换了分支,是找不到写过的代码的

6.重复4 &&(缺一不可)5

bug日记,如果你是用vscode的操作,可能会报错

https://blog.csdn.net/qq_41548644/article/details/111999269

二:初始化一个项目

1、创建前端项目

vue create <项目名称>

剩下的不动,最后不安装(根据自己的需求)

2.创建后端项目

用express构建node项目

全局:(第一次不可省略)

cnpm install express-generator -g

快速进入目录文件路径:

将文件拖入终端

我这里是start,没什么意外,通过这个文件自定义可以修改启动命令

  1. 启动后端项目,并检查3000端口如下所示即启动成功

4.提交分分支到git

git clone -b 分支名称 地址

成员使用git分分支

直接git clone 是不行的,当你初次使用时,默认master分支,而该分支下此项目并未一定有文件

6.成员提交git分支

需要组长配置公钥ssh

7.额外可能用到的东西

配置本地身份

git config user.name'前端工程开发者小李'

git config user.email'15589197106@qq.com'

dev分支下查看日志,记录hash:ad500e9ed2e9ec0628a64f0f4a6c7e043a3820cb

git log

bug日志

1.img图片和vue方法

:image图片404

img在vue中作为了新方法(这么说),他有自己的属性

2.路径层级限制

小程序中有种限制路径超过10层(起了个专业名词)

vue为了规范和效率应该也会禁止这种行为

最终确定建立1层级为可行且最好

2023/1/25补充:

静态动态images区别

在一个vue项目中,如果很乱的项目会有很多images;官方应该给出了规定,两个images文件夹够用;public下的为动态加载;当然在初版构建项目demo的时候不比放在两个文件夹中,但这样后期删除不必要和重复事件会变得麻烦

你看同名不同级文件夹很多嘞

出现的问题

这种静态路径和我的插件冲突

问题解决

[vue 获取本地图片路径(动态引入 / 静态引入)web前端 zxp的博客-CSDN博客vue,require本地路径](

vue大页面和vue页面组件区别

views页面

components页面中的组件(模块)

你需要知道一些代理*

@代/ ../ ./ ../../等

具体有待补充

选项卡;c1微博原生还原话题

这里是引入了个插件,地址:待补充

后面好像很多复用部分都用组件了,因为这是5年前兴起的,5年加上各种版本更迭;

轮播图组件

同上js版复刻加vue版复用到gitee上

npm install vue-awesome-swiper@3.1.3 -S

https://blog.csdn.net/qq_44163269/article/details/106039581)

分页器问题

暂时模块放置

可能额外出现的问题

异步问题

img写法问题2

不要忘记

2023/1/29

item.url的图片已经放置在了public文件夹下,但新的部分依旧出现了404

仍然是img的问题3

import引入路径时,vs自动补全的受文件名影响

滑动插件

npm install better-scroll -S

国内镜像

https://gitee.com/mirrors/better-scroll?_from=gitee_search

使用

vue中mounted和created

vue中ref: 获取dom的方式

比如,<div ref='aaa'> </div>

获取:this.$refs.aaa

v-for使用bug

Cannot use v-for on stateful component root element because it renders multiple elements.

解决:外面套一个盒子

如果你掉了return

跨域代理vue configjs问题后大量报错

这个报错数量应该是和你目前项目文件大小有关

解决

额,如果你在json文件加了注释...会报错

注意

之后你需要执行的并不是运行这个项目的;😶‍🌫博主发现很多文章解决这个问题的时候不写清楚,对刚遇到这个问题的小白并不友好,所以博主在这里写的清楚些

npm run serve/start

而是

npm run link

因为这里的link作用是修改我们编译中造成的错误

1、打开package.json,在script里添加一行 "lint": "eslint --fix --ext .js,.vue src", 注意不要和别的命令冲突,src表示要修复的目录 2、终端运行npm run lint修复不符合的代码 3、最后终端运行npm run ... 就不会报ESLint错误了

之后你可能遇到的驼峰命名问题

vue/multi-word-component-names报错处理

这种错误只要是用vue-cli搭建的,博主在电商和后台项目中分别遇到过,

问题在eslint默认是要求检测,这里可以手动关闭检测

修改.eslintrc.js文件的规则如下:

'vue/multi-word-component-names': 0

module.exports = {

root: true,

env: {

node: true,

},

extends: [

"plugin:vue/essential",

"eslint:recommended",

"plugin:prettier/recommended",

],

parserOptions: {

parser: "@babel/eslint-parser",

},

rules: {

"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",

"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",

// 在配置代理的几个问题

'vue/multi-word-component-names': 0

},

};

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HCIP笔记

第一天 ARP协议 正向ARP&#xff1a;通过IP地址获取目的MAC地址 过程&#xff1a; 目的IP到目的MAC再到ARP表中&#xff0c;所需时间是180s 反向ARP&#xff1a;通过目标MAC地址获取目标IP地址 免费ARP&#xff1a;利用正向ARP的原理请求自己的IP地址 1.自我检测 2.检测地址冲…

使用JMeter 录制脚本

使用JMeter 录制脚本&#xff0c;参考的一个博主的&#xff0c;我记录到我这里&#xff0c;留着以后用哈哈哈哈 1&#xff0c;添加 HTTP代理服务器 测试计划右键–》添加–》非测试元件–》http代理服务器 2&#xff0c;添加线程组&#xff0c;用来存放录制脚本的&#xff0c…

C语言设计模式:实现简单工厂模式和工程创建

目录 一&#xff0c;设计模式概念引入 ① 什么是设计模式 ② 什么是类和对象 ③ 什么是工厂模式 二&#xff0c;C语言工厂模式的实现 ① 普通类和对象的代码实现 ② 工厂模式代码实现 ● cat.c ● dog.c ● person.c ● animal.h ● mainpro.c ● 完善mainpro.c …

硕士毕业论文常见的排版小技巧

word排版陆续更新吧&#xff0c;更具我所遇到的一些小问题&#xff0c;总结上来 文章目录1.避免题注&#xff08;图或者表的标题&#xff09;与图或表格分不用页注意点&#xff1a;光标移动到表的题注后面2.设置论文的页眉关键点&#xff1a;需要将每一章节末尾&#xff0c;都要…

Hadoop 运行环境搭建(开发重点)

文章目录Hadoop 运行环境搭建&#xff08;开发重点&#xff09;一、安装JDK二、安装配置 Hadoop1、安装 hadoop2、hadoop 目录结构3、设置免密登录4、完全分布式模式&#xff08;开发重点&#xff09;1&#xff09;分发jdk2&#xff09;集群配置(1) 集群部署规划(2) 配置文件说…

2.3 二分搜索技术

二分搜索算法是运用分治策略的典型例子。给定己排好府的 n个元素a10:n-1]&#xff0c;现要在这n个元素中找出一特定元素3。首先较容易想到的是用顺序搜索方法&#xff0c;逐个比较a10:1-1]中元素&#xff0c;直至找出元素&#xff0c;或搜索遍整个数组后确定&#xff0c;不在其…

现代HYUNDAI EDI需求分析

现代集团(HYUNDAI)是韩国一家以建筑、造船、汽车行业为主&#xff0c;兼营钢铁、机械、贸易、运输、水泥生产、冶金、金融、电子工业等几十个行业的综合性企业集团。本文主要介绍HYUNDAI 的EDI需求&#xff0c;带大家快速理清思路&#xff0c;明确EDI项目的推进流程。 通信标准…

前端——2.HTML标签1

这篇文章我们从0来介绍一下HTML的相关标签内容 目录 1.HTML语法规范 1.1基本语法概述 1.2标签关系 2.HTML的基本结构标签 2.1第一个HTML网页 2.2基本结构标签总结 1.HTML语法规范 下面&#xff0c;我们来看一下HTML的语法规范的内容 1.1基本语法概述 首先&#xff0c…

【0成本搭建个人博客】——Hexo+Node.js+Gitee Pages

目录 1、下载安装Git 2、下载安装Node.js 3、使用Hexo进行博客的搭建 4、更改博客样式 5、将博客上传到Gitee 6、更新博客 首先看一下Hexo的博客的效果。 1、下载安装Git Git 是一个开源的分布式版本控制系统&#xff0c;可以有效、高速地处理从很小到非常大的项目版本…

openpnnp - 载入板子后,要确定板子的放置角度

文章目录openpnnp - 载入板子后,要确定板子的放置角度概述用openpnp提供的功能来确定被夹住的板子的左下角原点位置和板子的角度备注ENDopenpnnp - 载入板子后,要确定板子的放置角度 概述 设备是有夹具的, 用百分表打过, 夹具本身在Z方向的平行度是没问题的. 但是, PCB板子的…

Flink Table Store 0.3 构建流式数仓最佳实践

摘要&#xff1a;本文整理自阿里巴巴高级技术专家&#xff0c;Apache Flink PMC 李劲松&#xff08;之信&#xff09;&#xff0c;在 FFA 2022 实时湖仓的分享。本篇内容主要分为四个部分&#xff1a;挑战&#xff1a;Streaming DW 面临的难题案例&#xff1a;FlinkFTS 典型场景…

Active Directory DNS备份和恢复

DNS是Active Directory域服务&#xff08;AD DS&#xff09;不可或缺的一部分&#xff0c;因为它全权负责DNS名称解析。当发生DNS服务器灾难时&#xff0c;无法在网络中查找资源&#xff0c;并且所有AD操作都将暂停。因此&#xff0c;恢复DNS服务器是绝对必要的。Active Direct…

JS实现css的hover效果,兼容移动端

Hi I’m Shendi JS实现css的hover效果&#xff0c;兼容移动端 功能概述 CSS的hover即触碰时触发&#xff0c;在电脑端鼠标触碰&#xff0c;移动端手指触摸 有的时候光靠css实现不了一些效果&#xff0c;例如元素触发hover&#xff0c;其他元素触发动画效果&#xff0c;所以需要…

npm i 安装报错

npm WARN EBADENGINE Unsupported engine { npm WARN… npm WARN deprecated stable0.1.8: Modern JS… 诸如此类的报错。大部分都是因为 node 版本问题&#xff01;比如node版本无法满足&#xff0c;对应项目里需要的那些模块和依赖所需要的条件。 有些模块对node版本是有要…

【兴趣探索】采用Docker部署Rustdesk自建服务器

采用Docker部署Rustdesk自建服务器 场景&#xff1a;本想找一个远程手机的软件&#xff0c;使用的三款都存在限制&#xff1a; ①向日葵一天只能远程三次&#xff0c;需要花钱升级会员 ②Todesk因为手机兼容问题&#xff0c;需要花钱买插件解决 ③Airdorid免费200M&#xf…

23年如何备考PMP考试呢?攻略+资料

我建议准备的最短时间至少1个半月到2个月&#xff0c;集中精力备考大约4个小时&#xff0c;大家可以根据自己的专注力的长短去调节每天的备考时间。 1、《PMBOK指南》第六版&#xff08;16天&#xff09; 教材是要读的&#xff0c;虽然说考试考纲和教材不太一样&#xff0c;但…

led灯性价比最高的品牌有哪些?2023名牌led灯有这些品牌值得推荐

Led灯是现在人造灯具中使用最为普遍的一种灯光&#xff0c;具有高效节能、光线柔和等特点&#xff0c;这方面有一些专业的品牌做的很不错&#xff0c;比如松下、南卡、雷士照明等等&#xff0c;那么它们好在哪儿呢&#xff1f; 一个是光线舒适度高。采用高品质的led灯珠&#…

网络编程之UDP套接字(四)

12. 基于 UDP 的套接字 UDP 是无链接的&#xff0c;可以实现服务端与多个客户端进行同时进行通讯&#xff0c;无论先启动哪一端都可以。&#xff08;qq 聊天 UDP 服务&#xff09; 12.1 基于 udp 套接字模板 UDP 服务端 s socket(AF_INET, SOCK_DGRAM) # 创建一个服务器的…

MySQL运维篇之分库分表

03、分库分表 3.1、介绍 3.1.1、问题分析 随着互联网及移动互联网的发展&#xff0c;应用系统的数据量也是呈指数式增长&#xff0c;若采用单数据库进行数据存储&#xff0c;存在以下性能瓶颈&#xff1a; IO瓶颈&#xff1a;热点数据太多&#xff0c;数据库缓存不足&#…