Day 1

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

node + webpack + 淘宝镜像

（1）安装 node，然后再 cmd 命令执行安装 vue脚手架

npm install -g @vue/cli

（2）然后执行，查看版本

vue -V

（3） 创建一个名为 “app” 的 vue 2 项目

vue create app

（3）可以把 “app”项目拖拽到 VS code 编辑器中查看

（4）文件夹说明

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 项目的其他配置

（1）运行项目

npm run serve

（2）eslint 校验功能关闭

根目录 vue.config.js 文件

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

（3）src 文件夹简写方法，配置别名。

jsconfig.json 配置别名 @ 提示

3 项目路由的分析

vue-router

前端所谓路由：理解为 KV 键值对

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

value：相应的路由组件

项目案例分析 Demo：

注意：项目上中下结构

路由组件：

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

非路由组件：

Header【首页、搜索页】、

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

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

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

在开发项目的时候：

1）：书写静态页面（HTML + CSS）

2）：拆分组件

3）：获取服务器的数据动态展示

4）：完成相应的动态业务逻辑

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

注意2：咱们项目采用 less样式，浏览器不识别 less 样式，需要通过 less 、 less-loader 进行处理less，把less样式处理 less ，把less 样式变为css样式，浏览器才可以识别。

install --save less less-loader

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

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

- 创建或者定义

- 引入

- 注册

- 使用

参考：屏蔽 eslintrc 报错：修改vue.config.js

添加：

lintOnSave:false

5 路由组件的搭建

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

插件：vue-router 安装

npm install --save vue-router  //安装最新版
npm install --save vue-router@3  // Vue 2 安装需要添加 @3

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

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

（1）配置路由

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

（2）总结

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

1）路由组件一般放置在 pages| views 文件夹，非路由组件一般放置 components 文件夹中

2）路由组件一般需要在 router 文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用

$route：一般获取路由信息（路径，query，params 等）

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

（3）路由的跳转

路由的跳转有两种形式：

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

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

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

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

6 Footer 组件的显示与隐藏

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

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

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

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

（2）配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象，它的 key 不能随意定义。

8 路由传参

（1）路由跳转有几种方式？

比如：A-> B

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

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

（2）路由传参，参数有几种写法？

params 参数：不属于路径当中的一部分，类似 ajax中的 queryString  ；home?k=v ，不需要占位。

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

9 路由传参面试题

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

不能

（2）如何指定 params 参数可传可不传？

path:"/search/:keyword?",   // 配置路由后面增加 “?”

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

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

this.$router.push({
name: "search",
params: { keyword: '' || undefined },
query: { keyword: this.keyword.toUpperCase() }
});

（4）路由组件能不能传递 props 数据？

可以，

1）布尔值写法 

props:true

2）对象写法

props:{a:1,b:2}

3）函数写法：可以params参数、query参数、通过props 传递给路由组件

props:($route)=>{
    return {keyword:$route.params.keyword,k:$route.query.k}
}