DAY1-尚硅谷Vue项目学习笔记（尚品汇）

1.vue-cli脚手架初始化项目(vue create app)

项目目录结构

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文件中配置（添加 - - open）：

"scripts": {
    "serve": "vue-cli-service serve --open",
  },

2.2eslint校验功能关闭。

因为eslint非常苛刻！！！（也可以在初始化项目的时候不选eslint）
例如：声明变量但是没有使用eslint校验工具报错。
在根目录下，创建一个Vue.config.js文件

module.exports = {
    // 关闭eslint
    lintOnSave:false
}

2.3src文件夹简写方法，配置别名。@

jsconfig.json配置别名@
@代表的是src文件夹，这样将来文件过多，找的时候方便很多。

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

如果报错，记得将设置中的check JS勾选上。

3.项目路由的分析

vue-router
前端所谓路由：kv键值对
key:URL(地址栏中的路径)
value:相应的路由组件
注意：本项目是上中下结构

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

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

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

在咱们项目开发中，不在以HTML + CSS 为主，主要搞业务、逻辑
开发项目的流程：
(1)书写静态页面（HTML + CSS）
(2)拆分组件
(3)通过axios获取服务器的数据，动态展示
(4)完成相应的动态业务逻辑

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

注意2：本项目采用的是less样式，浏览器不识别less样式，需要通过less、less-loader【安装5版本的】对less进行处理，把less样式变为css样式，浏览器才可以识别。
npm install --save less less-loader@5

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

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

• 创建或者定义
• 引入
• 注册
• 使用

5.路由组件的搭建

安装vue-router npm install --save vue-router
在上面分析的时候，路由组件应该有四个：Home、Search、Login、Register

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

5.1配置路由

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

5.2总结

路由组件与非路由组件的区别：
(1)路由组件一般放置在pages|views文件夹中，非路由组件一般放置在components文件夹中
(2)路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用
(3)注册完路由，不管是路由组件还是非路由组件，身上都有 $ route和$ router属性
(4)
$route:一般是获取路由信息（比如路由的路径、query参数、params参数等）

$router:一般进行编程式导航进行路由跳转（比如push|replace）

5.3路由的跳转

路由的跳转有两种形式：
声明式导航router-link,可以进行路由的跳转
编程式导航push|replace,可以进行路由的跳转

编程式导航：声明式导航能做的，编程式导航都能做，但是编程式导航除了可以进行路由跳转，还可以做一些其他的业务逻辑。

6.Footer组件显示与隐藏

显示或者隐藏组件：v-if(频繁操纵DOM，损耗性能)|v-show(通过样式将元素进行显示或隐藏)
Footer组件：在Home、Search显示Footer组件
Footer组件：在登录、注册时候是隐藏的

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

在Home、Search显示的，在登录、注册隐藏

<Footer v-show="$route.path == '/home' || $route.path == '/search'"></Footer>

上面这种方法只适合路由组件很少的情况。

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

在router文件夹下的index.js文件中添加路由元信息meta

// 创建路由
const routes = [
    // 重定向：在项目跑起来的时候，访问/,立马定向到首页
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        meta: { show: true }
    },
    {
        path: '/login',
        component: Login,
        meta: { show: false }
    },
    {
        path: '/register',
        component: Register,
        meta: { show: false }
    },
    {
        path: '/search/:keyword?',
        component: Search,
        meta: { show: true },
        name: "search",
        // 路由组件能不能传递props数据？（能）
        // 1.布尔值写法:只能传递params参数
        // props: true
        // 2.对象写法:额外给路由组件传递一些props
        // props: { a: 1, b: 2 }
        // 3.函数写法：可以把params参数、query参数，通过props传递给路由组件
        props: ($route) => ({ keyword: $route.params.keyword, k: $route.query.k })
    },
]

<!--在App.vue中使用：-->
<Footer v-show="$route.meta.show"></Footer>

7.路由传参

7.1路由跳转有几种方式？

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

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

params参数：属于路径当中的一部分，需要注意，在配置路由的时候需要占位
query参数：不属于路径当中的一部分，类似于ajax中的queryString /home?k=v&kv=,不需要占位

<script>
export default {
  name: "Header",
  data() {
    return {
      keyword: "",
    };
  },
  methods: {
    // 搜索按钮的回调函数：需要向search路由进行跳转
    goSearch() {
      // 路由传递参数：
      // 第一种：字符串形式
      // 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(),
         },
       }); 
    },
  },
};
</script>

8.路由传参相关面试题

面试题1:路由传递参数（对象写法）path是否可以结合params参数一起使用？
答：路由跳转传参的时候，对象的写法可以是name、path形式，但是需要注意的是，path这种写法不能与params参数一起使用

 this.$router.push({
    path: "/search",
    params: { keyword: this.keyword },
    query: { k: this.keyword.toUpperCase() },
 });

面试题2:如何指定params参数可传可不传？
比如：配置路由的时候，占位了(params参数),但是路由跳转的时候没有传递params参数，路径URL就会出现问题。
http://localhost:8080/?k=WQE(路径错误)
http://localhost:8080/search?k=WQE（正确路径）
那么如何指定params参数可传可不传呢，需要在在配置路由的时候，在占位的后面加上一个问号?(?代表params参数可传可不传)

 this.$router.push({
    name: "search",
    query: { k: this.keyword.toUpperCase() },
 });

面试题3:params参数可以传递也可以不传递，但是如果传递是空字符串，如何解决？

//使用undefined解决：params参数可以传递、不传递（空的字符串）
 this.$router.push({
    name: "search",
    params: { keyword: "" || undefined },
    query: { k: this.keyword.toUpperCase() },
 });

面试题4：路由组件能不能传递props数据？

// router文件夹下面的index.js文件
{
	path: '/search/:keyword?',
	component: Search,
	meta: { show: true },
	name: "search",
	// 路由组件能不能传递props数据？
	// 1.布尔值写法:只能传递params参数
	// props: true
	// 2.对象写法:额外给路由组件传递一些props
	// props: { a: 1, b: 2 }
	// 3.函数写法：可以把params参数、query参数，通过props传递给路由组件
	props: ($route) => ({ keyword: $route.params.keyword, k: $route.query.k })
}

// Header.vue文件中
 this.$router.push({
    name: "search",
    params: { keyword: this.keyword },
    query: {
      k: this.keyword.toUpperCase(),
    },

<!--search.vue组件-->
<template>
  <div>
    <h1>params参数-----{{ $route.params.keyword }}========{{ keyword }}</h1>
    <h1>query参数------{{ $route.query.k }}========{{ k }}</h1>
  </div>
</template>

<script>
export default {
  name: "Search",
  // 路由组件可以传递props
  // props: ["keyword", "a", "b"],
  props: ["keyword", "k"],
};
</script>