# 尚品汇

**Repository Path**: mxchen-team/shangpinhui

## Basic Information

- **Project Name**: 尚品汇
- **Description**: 尚硅谷尚品汇的练习项目代码
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-05-31
- **Last Updated**: 2023-02-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 尚品汇

![](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/image-20220531225144460.png)

![](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/image-20220531225205800.png)

# [b站学习视频]([尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1Vf4y1T7bw))

# [P1]([尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1Vf4y1T7bw?p=1)) 开发需要

node + webpack + 淘宝镜像 + vue-cli

[webpack安装](https://blog.csdn.net/ivenqin/article/details/115948050?ops_request_misc=%7B%22request%5Fid%22%3A%22165400902416782395323759%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=165400902416782395323759&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-115948050-null-null.142^v11^control,157^v12^control&utm_term=webpack安装&spm=1018.2226.3001.4187)

[node+vue-cli安装](https://blog.csdn.net/weixin_43844418/article/details/114436815?ops_request_misc=%7B%22request%5Fid%22%3A%22165400893416782425151736%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=165400893416782425151736&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-114436815-null-null.142^v11^control,157^v12^control&utm_term=npm安装vueCli&spm=1018.2226.3001.4187)

![](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/image-20220531230354107.png)

# [P2](https://www.bilibili.com/video/BV1Vf4y1T7bw?p=2) vue-cli脚手架创建项目

![](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/image-20220531233531472.png)

![](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/image-20220531235117773.png)

### vue文件目录分析

```
public文件夹：静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。

pubilc/index.html是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html。

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

assets： 存放公用的静态资源
components： 非路由组件（全局组件），其他组件放在views或者pages文件夹中
App.vue： 唯一的跟组件
main.js： 程序入口文件，最先执行的文件

jsconfig.json，用@/代替src/，exclude表示不可以使用该别名的文件
babel.config.js: 配置文件（babel相关）
package.json: 项目的详细信息记录
package-lock.json: 缓存性文件（各种包的来源）
vue.config.js
```

### [P3]([尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili](https://www.bilibili.com/video/BV1Vf4y1T7bw?p=3)) 项目配置

#### 进入vue.config.js配置

```javascript
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    host:'127.0.0.1',
    open:true//自动打开浏览器
  },
  lintOnSave:false,//关闭eslint保存时自动检查
})
```

#### 初始化启动

![](https://mxchen-figure-bed.oss-cn-hangzhou.aliyuncs.com/picBed/image-20220531235751706.png)

3、组件页面样式
组件页面的样式使用的是less样式，浏览器不识别该样式，需要下载相关依赖
npm install --save less less-loader@5
如果想让组件识别less样式，则在组件中设置
<script scoped lang="less">

4、清除vue页面默认的样式
vue是单页面开发，我们只需要修改public下的index.html文件

<link rel="stylesheet" href="reset.css">

5、pages文件夹
创建pages文件夹，并创建路由组件
5.1创建router文件夹，并创建index.js进行路由配置，最终在main.js中引入注册

5.2 总结
路由组件和非路由组件区别：

非路由组件放在components中，路由组件放在pages或views中
非路由组件通过标签使用，路由组件通过路由使用
在main.js注册玩路由，所有的路由和非路由组件身上都会拥有$router $route属性
$router：一般进行编程式导航进行路由跳转
$route： 一般获取路由信息（name path params等）
5.3 路由跳转方式

声明式导航router-link标签 ,可以把router-link理解为一个a标签，它 也可以加class修饰
编程式导航 ：声明式导航能做的编程式都能做，而且还可以处理一些业务
6、footer组件显示与隐藏
footer在登录注册页面是不存在的，所以要隐藏，v-if 或者 v-show
这里使用v-show，因为v-if会频繁的操作dom元素消耗性能，v-show只是通过样式将元素显示或隐藏
配置路由的时候，可以给路由配置元信息meta,
在路由的原信息中定义show属性，用来给v-show赋值，判断是否显示footer组件