Vue2项目实战--b站尚硅谷--尚品汇项目--详细笔记--day01_尚硅谷大型vue项目实战-尚品汇笔记

1 脚手架使用初始化项目

初始化项目：vue create 项目名称
脚手架目录:public + assets文件夹区别

• node_modules：放置项目依赖的地方

• public：一般放置一些共用的静态资源（图片），webpack打包的时候，public文件夹里面资源原封不动打包到dist文件夹里面

• src：程序员源代码文件夹的

  • ​ assets文件夹经常放置一些静态资源（一般放置多个组件公用的静态资源），assets文件夹里面的静态资源，webpack会把静态资源当作一个模块，打包到JS文件夹里面

  • ​ components文件夹一般放置非路由组件（或者项目共用的组件-全局组件）

  • ​ App.vue唯一的根组件

  • ​ main.js入口文件【程序最先执行的文件】

  • ​ babel.config.js:babel配置文件

  • ​ package.json项目描述、项目依赖、项目运行指令，项目的身份证

  • ​ package-lock.json缓存性文件

  • ​ README.md项目说明文件，依赖是哪里来的都给你记录了

2 项目的其他配置

2.1 浏览器自动打开

"serve": "vue-cli-service serve"，后面加上--open

注意：要进去app文件里面去CMD启动项目npm run serve

错误的话要再加一句： "serve": "vue-cli-service serve --open --host=localhost"

在package.json文件中
"scripts": {
	"serve": "vue-cli-service serve --open",
	"build": "vue-cli-service build",
	"lint": "vue-cli-service lint"
},
1
2
3
4
5
6

2.2 关闭eslint校验工具

创建vue.config.js文件：需要对外暴露
module.exports = {
   lintOnSave:false,
}
1
2
3
4

2.3 src文件夹的别名的设置

因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些
创建jsconfig.json文件（5.12—09.29现在vue项目初始化的时候就有@了）

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3 路由的分析和配置

vue-router

前端所谓路由：Key-Value键值对

K即为URL（网络资源定位符）

V即为相应的路由组件

确定项目结构顺序：上中下

跳转的时候只有中间部分的V在发生变化，所以中间部分应该使用的是路由组件

由2个非路由组件|四个路由组件组成：

• 两个非路由组件：Header 【首页、搜索页】、Footer【首页、搜索页】，但是登入、注册页是没有的
• 路由组件:Home、Search、Login（没有底部的Footer组件–带有二维码的）、Register（没有底部的Footer组件–带二维码的）

4 创建非路由组件Header与Footer业务

本次项目主要以业务和逻辑为主，不写html和css了

项目开发的时候：

• 书写静态页面（html+css）
• 拆分组件
• 获取服务器的数据动态展示
• 完成相应的动态业务逻辑

注意点：

• 创建组件的时候需要：组件结构 + 组件样式 + 图片资源 （意思就是将静态页面copy过来的时候一部分一部分来）
• 本项目采用less样式，但是浏览器不识别，所以需要通过安装less、less-loader进行处理，注意安装版本，此处安装的是npm i less-loader@6
• 安装完成之后，还是会报错，想让组件识别less样式，需要在style标签上添加lang="less"

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

第一步：创建或定义

第二步：引入

第三步：注册

第四步：使用

注意清除默认的样式css文件，放在public文件夹下，记得引入

还有记得把app.vue里面的样式给他删除了！！！！！

给你 html 和 less 和资源图片文件时

• 首先第一步创建一般组件index.vue
• 第二步找到对应的html和less结构分别放入template和style中，其中style记得写上 lang="less"
• 第三步在组件中新建资源文件夹images，然后找到html中所需要的，放进去
• 第四步在app.vue中引入组件，注册组件，使用组件

5 路由组件的搭建

安装 vue-router 注意安装@3版本

路由组件有四个：Home、Search、Login、Register

components文件夹经常存放的是非路由组件（共用全局组件）

pages/views文件夹经常存放路由组件

5.1 路由的配置

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

router文件夹中创建index.js文件

需要引入Vue和VueRouter

然后暴露路由实例，然后里面配置对象(路由)----就是写一个个对象，里面是path和component

之后将要暴露的路由组件引入–对象中需要告诉路径path和组件component

之后需要路由文件执行一次，路由文件需要在入口文件main.js中注册

//引入路由
import router from '@/router'
new Vue({
  render: h => h(App),
  //注册路由
  router
}).$mount('#app')
1
2
3
4
5
6
7

注册完还看不见，需要在app.vue中展示

Vue中借助router-link标签实现路由的切换----目前这个用不到
<router-link to="/about">About</router-link>
以及指定位置展示----需要
<router-view></router-view>
1
2
3
4

5.2 小结

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

• 路由组件放在pages或views中，非路由组件放在components中
• 路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字component: SearchYu）、非路由组件在使用的时候，一般都以标签的形式使用（重要！！！！
• 注册完路由，不管是路由组件还是非路由组件身上都会拥有$route,$router属性

 //注册路由信息：写下下面这句的时候，组件身上都会拥有$route,$router属性
 router
1
2

还需要在路由中，重定向，在项目运行时，访问/，立马定位到首页 
{
	path: "*",
	redirect: "/home"
}
1
2
3
4
5

$route：一般获取路由信息【路径、query、params等】

$router：一般进行编程式导航进行路由跳转【push、replace】

5.3 路由的跳转

路由的跳转就两种形式：

声明式导航router-link和编程式导航push | replace 都可以进行路由跳转

编程式导航更好用：编程式导航除了路由跳转，还可以在路由跳转之前做一些其他的业务逻辑

修改登入和注册跳转

在修改Header组件中的跳转
<!-- 声明式导航，需要to属性，告诉他往哪里跳 该有的样式不要丢了-->
<router-link to="/login">登入</router-link>
<router-link to="/register" class="register">免费注册</router-link>
同理，点击头部的企业图片是往主页跳转
<router-link class="logo" title="尚品汇" to="/home" target="_blank">
	<img src="./images/logo.png" alt="" />
</router-link>
同理，点击头部的搜索按钮也要跳转----注意这个是按钮，将来要收集文本框里用户的输入信息----用编程式导航
@click="goSearch"
<button class="sui-btn btn-xlarge btn-danger" type="button" @click="goSearch">搜索</button>
methods中配置相应回调
goSearch() {
  this.$router.push("/search");
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

6 Footer组件显示与隐藏

显示和隐藏组件：v-if或v-show

FooterYu组件：在主页和搜索页显示，在登入和注册页隐藏

面试题：v-show与v-if区别

v-show：通过样式display控制

v-if：通过元素上树与下树进行操作，操作DOM，效率低

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

<Footer v-show="$route.path == '/home' || $route.path == '/search'" />
优化写法----路由元信息----在配置路由的时候自己定义一些属性（show）在meta对象中
routes: [
	{
		path: "/home",
		component: Home,
		meta: { show: true }
	},
	{
		path: "/login",
		component: Login,
		meta: { show: false }
	},
	...都要配置meta...
]
然后直接判断$route中的属性
<Footer v-show="$route.meta.show" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

配置路由的时候，可以给路由添加路由元信息meta，路由需要配置对象，meta是规定的，我们不能随意添加想要的key，这是不行的

7 路由传参

7.1 路由的跳转方式

声明式导航router-link和编程式导航push | replace 都可以进行路由跳转（需要指定 to去哪里 写路由路径）
编程式导航更好用：编程式导航除了路由跳转，还可以在路由跳转之前做一些其他的业务逻辑

7.2 路由传参，有几种写法

params参数：路由需要占位，属于URL当中一部分
query参数：路由不需要占位，写法类似于ajax当中query参数/home?k=v&k=v,

获取搜索框中的用户输入信息，用v-model

data中配置keyword用来收集
data() {
	return {
		keyword: "",
	};
},

<input
	type="text"
	id="autocomplete"
	class="input-error input-xxlarge"
	v-model="keyword"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13

7.3 路由传递参数

• 字符串写法
• 模板字符串写法
• 对象写法

这是在编程式路由导航中的写法，params和query都有以上这三种写法

点击搜索的时候要接受路由传递过来的参数，params和query参数都要，params需要占位----在路由中写好

就是将搜索框中的参数用params和query传给搜索组件

字符串写法

小写是parans参数，大写是query参数（带问号的键值对形式
this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase());
这样子search组件就可以拿到params和query参数，可以在search中展示一下----取出来展示一下，在$route中
<h1>params参数{{ $route.params.keyword }}</h1>
<h1>query参数{{ $route.query.k }}</h1>
1
2
3
4
5

模板字符串写法

this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);
1

对象写法

注意：如果是对象写法，而且是路由跳转传参，传的还是params参数，那就需要给我们的路由命名

在路由配置文件中，给search路由起个名字 name: "search"

this.$router.push({
      name: "search",
      params: {
        keyword: this.keyword,
      },
      query: {
        k: this.keyword.toUpperCase(),
      },
});
1
2
3
4
5
6
7
8
9

总结流程：在头部Header组件中可以用v-model拿到用户的输入keyword，然后通过三种方式（字符串，模板字符串，对象写法）给search组件传递收集来的keyword，然后search组件就可以展示了（在$route中可以读取到）

8 关于路由传参的面试题

路由传递参数（对象写法）path是否可以结合params参数一起使用？

不可以，不能进行路由的跳转。对象的写法可以是name或者path，但是path写法不能与params参数一起使用，params需要与name搭配

如何指定params参数可传可不传

比如：配置路由的时候，占位了（params参数），但是路由跳转的时候我就故意不传递值

会导致路径地址中连search都没有：

http://localhost:8080/#/?k=QWE

http://localhost:8080/#/search?k=QWE（至少应该要有search，但是不传递的话，连search都没有）

指定params可传可不传的时候，可以在路由占位的时候，加上?，代表将来传或者不传都可以

{
   path: "/search/:keyword?",
   component: Search,
   meta: { show: true },
   name: "search"
},
1
2
3
4
5
6

params参数可以传递也可以不传递，但是如果传递的是空串，该怎么解决

传递空串的话，会出现路径当中少了search

使用undefined解决：{ name: 'search', params: { keyword: ' ' || undefined }, query: {...} }一个小技巧

路由组件能不能传递props数据

可以的，有三种写法

路由的props配置----意思就是在配置路由（index.js）的时候写上props

第一种：布尔值方式 注意只能传递params参数
在配置路由的时候加上 { props: true }
同时在组件中用 props: ['keyword'] 接收，组件中的模板就可以直接使用参数了{{ keyword }}，不用写$route.params.XXX
相当于一个开关，true就可以接受到了。Header中该传的还得传：this.$router.push("/search/" + this.keyword);

第二种：对象写法 额外给路由组件传递一些props
props: { a: 1, b: 2 }

第三种：函数写法 可以params参数和query参数，通过props传递给路由组件，最常用----可以写一般写法props($route){}
props: ($route) => {
	return {
		keyword: $route.params.keyword,
		k: $route.query.k
	}
}

如果用props来传参数的话，就是说先把参数传到路由组件身上去，用的时候就不用在$route里面去取了----直接用{{ keyword }}
获取路由参数就是为了组件获取参数方便一些，上面模板的写法简单一点；路由那边（路由配置index.js文件中的函数写法）处理好了，组件拿的时候更方便一些
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

今天犯错的几个点：

• App组件的模板中忘记加一个最外层的div

• App组件中注册其他组件时，把components因为自动输入写成commits没有发现，导致引入失败

• ES6模板字符串的写法