一:创建仓库
1.领导创建git仓库(参考————这篇文章),新手下载git
2.打开cmd终端,将git仓库拉到本地
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0Lzk0ODZmZjMyYzU3NDMyYWNmMmI3NDRiY2NiMzFhN2YyLnBuZw%3D%3D.png?w=700&webp=1)
3.进入文件目录,查看分支(新手向——为什么需要创建分支,查看---)
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzVmYTU4ODhlZWYxN2Y5ZjE3MDY0Y2RmYTdlZjk4YjE4LnBuZw%3D%3D.png?w=700&webp=1)
4.创建新分支
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzdhNDk4Yzg5OWYwMmFiMTEyOGJiZDVkYTY5NjExZmE4LnBuZw%3D%3D.png?w=700&webp=1)
5.提交到远程仓库(git)上
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzA1ZDBhYzZhNTY1MDU0NDA3Yjk5OGUxZjExNDIzZjJiLnBuZw%3D%3D.png?w=700&webp=1)
2023/2/2,如果在本地vs上切换了分支,是找不到写过的代码的
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0L2ZiNmY3ZWFhMzVmYmI2N2U5ZjliNzRjODA2MmFiMWUwLnBuZw%3D%3D.png?w=700&webp=1)
6.重复4 &&(缺一不可)5
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzE2MmNkZmNlMDM3MGIwNjE5NmZlMzg0MDlhMjJhZDk3LnBuZw%3D%3D.png?w=700&webp=1)
bug日记,如果你是用vscode的操作,可能会报错
https://blog.csdn.net/qq_41548644/article/details/111999269
二:初始化一个项目
1、创建前端项目
vue create <项目名称>
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzRmZTg3MjBkMWM4ZGEwMzM1N2ExMTgwMDI3ZDk0NzY2LnBuZw%3D%3D.png?w=700&webp=1)
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0L2JlNTZjYjgwZmUwODRkNDU2MTQwYjM1NzhjYzZlZDA1LnBuZw%3D%3D.png?w=700&webp=1)
剩下的不动,最后不安装(根据自己的需求)
2.创建后端项目
用express构建node项目
全局:(第一次不可省略)
cnpm install express-generator -g
快速进入目录文件路径:
将文件拖入终端
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0L2NmMzMzNzJmODg4YTZhZTlkY2I0N2IzNTAxZDliNmFkLnBuZw%3D%3D.png?w=700&webp=1)
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzNmMjQ3NzNiYWYzM2EwOTJhMTIwODNkOTIyY2E0MDQyLnBuZw%3D%3D.png?w=700&webp=1)
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzVmMzliZDQxZjIwZjJjYTljYmVhZWMzMjAyZDJjMjMxLnBuZw%3D%3D.png?w=700&webp=1)
我这里是start,没什么意外,通过这个文件自定义可以修改启动命令
启动后端项目,并检查3000端口如下所示即启动成功
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0Lzc5NmVhNTA4MmRjM2RiY2JkMGI1ZjNmMGEzZjE5MTRlLnBuZw%3D%3D.png?w=700&webp=1)
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzQ0NDIyYTc0ODg1YWViZDJmYzUzNjM2NTQxMDkyZmUwLnBuZw%3D%3D.png?w=700&webp=1)
4.提交分分支到git
git clone -b 分支名称 地址
成员使用git分分支
直接git clone 是不行的,当你初次使用时,默认master分支,而该分支下此项目并未一定有文件
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0L2ZmMGMzNDIxYTU3Mjc2OGU5ODgwMmQ5MWUyMmQ2YzBlLnBuZw%3D%3D.png?w=700&webp=1)
6.成员提交git分支
需要组长配置公钥ssh
7.额外可能用到的东西
配置本地身份
git config user.name'前端工程开发者小李'
git config user.email'15589197106@qq.com'
dev分支下查看日志,记录hash:
ad500e9ed2e9ec0628a64f0f4a6c7e043a3820cb
git log
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0L2VjZWQyNTBmZDhmMTg4Y2NmZGM1MWM1MmQ1MmM4MDRmLnBuZw%3D%3D.png?w=700&webp=1)
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzcwMzJjZTJjOWNhZDVkN2Y5NDk1MTRjYzMwZDRjNmNiLnBuZw%3D%3D.png?w=700&webp=1)
bug日志
1.img图片和vue方法
:image图片404
img在vue中作为了新方法(这么说),他有自己的属性
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzI5MzEzOWYwNmU5ZTQ2MzhjMWE4ODEyZDFiMTEzZDdhLnBuZw%3D%3D.png?w=700&webp=1)
2.路径层级限制
小程序中有种限制路径超过10层(起了个专业名词)
vue为了规范和效率应该也会禁止这种行为
最终确定建立1层级为可行且最好
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzhlOGQ2MjlkZDg3NGE0MzdiODc5NDg1NGI1N2RjZTUwLnBuZw%3D%3D.png?w=700&webp=1)
2023/1/25补充:
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzNhYjQwMGYyNWUwMmQ1YTY3NTZkMDBkMGIzOTRjMDc3LnBuZw%3D%3D.png?w=700&webp=1)
静态动态images区别
在一个vue项目中,如果很乱的项目会有很多images;官方应该给出了规定,两个images文件夹够用;public下的为动态加载;当然在初版构建项目demo的时候不比放在两个文件夹中,但这样后期删除不必要和重复事件会变得麻烦
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0L2JmZmRjMzZkNmVmNjg1NGIwMTMzMDA5MmUzMWM3NWNlLnBuZw%3D%3D.png?w=700&webp=1)
你看同名不同级文件夹很多嘞????
出现的问题
这种静态路径和我的插件冲突
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzQ3ZDdiNGMyMGJiZGE0YjEyN2RjODJiYTJhNTI3NjAwLnBuZw%3D%3D.png?w=700&webp=1)
问题解决
[vue 获取本地图片路径(动态引入 / 静态引入)web前端 zxp的博客-CSDN博客vue,require本地路径](
vue大页面和vue页面组件区别
views页面
components页面中的组件(模块)
你需要知道一些代理*
@代/ ../ ./ ../../等
具体有待补充
选项卡;c1微博原生还原话题
这里是引入了个插件,地址:待补充
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzUxNDgxY2M5NTg3OTRkZjEzMmI2MjdkNzI3ZDNkZWNjLnBuZw%3D%3D.png?w=700&webp=1)
后面好像很多复用部分都用组件了,因为这是5年前兴起的,5年加上各种版本更迭;
轮播图组件
同上js版复刻加vue版复用到gitee上
npm install vue-awesome-swiper@3.1.3 -S
https://blog.csdn.net/qq_44163269/article/details/106039581)
分页器问题
暂时模块放置
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0L2U2NDg3ZTc0MDY1NzdiOGM1ZThhYzNhNDQ3MTcwMTRjLnBuZw%3D%3D.png?w=700&webp=1)
可能额外出现的问题
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzJmZjk1NGNiMGM3MjBkZDk5YWJhZjU3Mjg0ZjZjNTZkLnBuZw%3D%3D.png?w=700&webp=1)
异步问题
img写法问题2
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzU0ZDg1N2VkMDlhYWEzM2I5ZTRjMWI4ZmFlMTAxYmVkLnBuZw%3D%3D.png?w=700&webp=1)
不要忘记
2023/1/29
item.url的图片已经放置在了public文件夹下,但新的部分依旧出现了404
仍然是img的问题3
import引入路径时,vs自动补全的受文件名影响
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzkyMDUxNGRmZTQ3OGRiMTIxNjQxNzNiZDM5NmM4ZGY3LnBuZw%3D%3D.png?w=700&webp=1)
滑动插件
npm install better-scroll -S
国内镜像
https://gitee.com/mirrors/better-scroll?_from=gitee_search
使用
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzJkNDU5NTFiMWEzMjc2ZDZiN2ViNWY0NWI5ZGFjYjY2LnBuZw%3D%3D.png?w=700&webp=1)
vue中mounted和created
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0L2YzZTY5MTRhZjg3MjA2NTg2MWE4NWUzNmQ3Y2NkY2JiLnBuZw%3D%3D.png?w=700&webp=1)
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.
解决:外面套一个盒子
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0L2YwY2QzNGI1OGRjZTFmYWI2YzYzYWI4ZDNiN2VlMDQxLnBuZw%3D%3D.png?w=700&webp=1)
如果你掉了return
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzMyMTljOTk5YTExYjU4MDE0YWU0ZWE1ZTU5NjA4MTcxLnBuZw%3D%3D.png?w=700&webp=1)
跨域代理vue configjs问题后大量报错
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0L2FkMDYyMzNiMDU2MjhjOTkyMDIwZmU4NTJmMGEyYjQ2LnBuZw%3D%3D.png?w=700&webp=1)
这个报错数量应该是和你目前项目文件大小有关
解决
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzNlMjMzMjJkOWRhOTY0Mjg0Yjc0OWUwODQ2MWNjMmVjLnBuZw%3D%3D.png?w=700&webp=1)
额,如果你在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
![vue大型商城系统中遇到的问题(上) vue大型商城系统中遇到的问题(上)](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWctYmxvZy5jc2RuaW1nLmNuL2ltZ19jb252ZXJ0LzNlYTA5MWVlODk2MDljYTY1NDk2Y2Y1ZDMwNWVlNGMwLnBuZw%3D%3D.png?w=700&webp=1)
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
},
};