尚硅谷尚品项目汇笔记（一）

                                

1:vue-cli 脚手架初始化项目。

node+webpack+淘宝镜像

node_modules 文件夹：项目依赖文件夹

public 文件夹：一般放置一些静态资源（图片），需要注意，放置 public 文件夹中的静态资源，webpack 进行打包的时候，会原封不动打包到 dist 文件夹中

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

assets 文件夹：一般也是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在 asset 文件夹里面静态资源，在 webpack 打包的时候，webpack 会把静态资源当作一个模块，打包 Js 文件里面。

    components文件夹：一般放置的是非路由组件（全局组件）

    app.vue:唯一的根组件，Vue当中的组件都是.vue组件

    mian.js:程序入口文件，也是整个程序当中最先执行的文件

babel.config.js:配置文件（babel 相关组件）

package.json 文件：认为是项目的‘身份证’，记录项目叫什么，项目中有哪些依赖，项目怎么运行

package-lock.json:缓存文件（以前依赖缓存）

README.md:说明性质文件

2.项目的其他配置

2.1 项目运行起来的时候，让浏览器自动打开

----package.json 在 scripts 中加上--open

"scripts": {

"serve": "vue-cli-service serve --open",

"build": "vue-cli-service build",

"lint": "vue-cli-service lint"

},

2.2 eslint 校验功能关闭（防止你以为你代码写错了）

----在根目录下，创建一个 vue.config.js

比如：声明变量但是没有使用 eslint 校验工具报错。

----vue.config.js

加上： //关闭 eslint 工具

lintOnSave:false,

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

transpileDependencies: true,

//关闭 eslint 工具

lintOnSave:false,

})

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

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

{

"compilerOptions":{

"baseUrl":"./",

"path":{

"@/\*":["src/"]

}

},

"exclude":["node_modules","dist"]

}

3.项目路由分析

vue-router

前端所谓路由：KV 键值对

key:URL(地址栏中的路径)

value:相应的路由组件

注意：项目上中下

路由组件：

Home 首页路由组件，Search 路由组件、login 登录路由、Refister 注册路由

非路由组件：

Header【在首页、搜索页有】

Footer 【在首页、搜索页】，但是在登录、注册页面是没有的

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

在咋们项目当中，不再以 HTML+CSS 为主，主要搞业务、逻辑

在开发项目的时候： 1.书写静态页面（HTML+CSS） 2.拆分组件 3.获取服务器的数据动态展示 4.完成相应的动态业务逻辑

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

注意 2：咋们项目采用的 less 样式，浏览器不识别 less 样式，需要通过 less、less-loader(安装 5 版本的)进行处理，把 less 样式变为 css 样式，才可以识别

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

4.1 使用组件的步骤（非路由组件） -创建或者定义 -引入 -注册 -使用

5）路由组件的搭建

vue-router

在上面分析的时候，路由组件应该有四个：Home、Search、Login、Register

--components 文件夹：经常放置的非路由组件（公用全局组件）

--pages|views 文件夹：经常放置路由组件

5.1 配置路由

指令：cnpm install --save vue-router@（版本号 3 4 5）

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

5.2 总结

路由组件与非路由组件的区别？ 1.路由组件一般放置在 pages|views 文件夹，非路由组件一般放置在 components 文件夹中 2.在使用的时候一般需要 router 文件夹中进行注册（使用即为组件的名字），非路由组件在使用的时候都是以标签的形式

3.注册完路由，不管是路由组件、还是非路由组件身上都有$route、$router 属性

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

$router:一般进行编程式导航进行路由跳转

5.3 路由的跳转？

路由的跳转有两种形式：

声明式导航 router-link，可以进行路由的跳转

编程式导航 push|replace,可以进行路由的跳转

编程式导航：声明式导航能做的，编程式导航都能做

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

(6)Footer 组件的显示与隐藏

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

Footer 组件：在 Home、Search 显示 Footer 组件

Footer 组件：在登录、注册时候隐藏的

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

<!--   <Footer

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

    ></Footer> -->

这种效率低下

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

routes: [

{

path: '/home',

component: Home,

meta: {

show: true

}

},

（8）路由传参

8.1 路由跳转的几种方式？

比如：A->B

声明式导航：router-link(务必要有 to 属性)，可以实现路由的跳转

编程式导航:利用的是组件实例的$router.push|replace 方法，可以实现路由的跳转。（可以书写一些自己的任务）

8.2：路由传参，参数有几种写法

params 参数：属于当前路径中的一部分，需要注意，在配置路由的时候，需要占位

query 参数：不属于当前路径当中的一部分，类似于 ajax 中的 queryString /home?k=v&kv=,不需要占位

路由传递参数先关面试题

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

不可以：不能这样书写，程序会崩掉

2:如何指定 params 参数可传可不传?

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

4:如果指定 name 与 params 配置, 但 params 中数据是一个"", 无法跳转，路径会出问题

5: 路由组件能不能传递 props 数据?

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

答：路由跳转传参的时候，对象的写法可以是 name、path 形式，但是要注意的是，path 这种写法不能与 params 一起使用

this.$router.push({

path: '/search',

params: { keyword: this.keyword },

query: { k: this.keyword.toUpperCase() },

})

面试题 2:如何指定 params 参数可传可不传?

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

路径会出现问题

如果路由要求传递 params 参数，但是你就是不传的 params 参数，你会发现一个问题，URL 会有问题

如何指定 params 参数可以传递，或者不可以传递参数，在配置路由的时候，在占位的后面加上一个?

{

path: '/search/:keyword?',

component: Search,

meta: {

show: true

},

name: "search"

},

this.$router.push({

name: 'search',

query: { k: this.keyword.toUpperCase() },

})

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

使用 undefined 解决：params 参数可以传递，不传递（空的字符串）

this.$router.push({

name: 'search',

params: { keyword: '' },

query: { k: this.keyword.toUpperCase() },

})

如何解决?

this.$router.push({

name: 'search',

params: { keyword: '' ||undefined},

query: { k: this.keyword.toUpperCase() },

})

面试题 5: 路由组件能不能传递 props 数据?

//可以的：三种写法

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

// 布尔值写法

// props: true,

// 对象写法:额外的给路由组件传递一些 props

/_ props: {

a: 1,

b: 2

} _/

// 函数写法，可以 params 参数，query 参数，通过 props 传递给路由组件

props: ($route) => {

return {keyword: $route.params.keyword, k: $route.query.k};

}