一、开发环境构造
Vue-cli 脚手架初始化项目
node 平台 和 webpack 和 淘宝镜像 环境
（一）脚手架
1.安装脚手架
在我们的项目文件夹中路径输入 cmd 然后在终端中输入 vue create app(项目名)
选择 vue 2 然后安装 （因为是基于 vue2 开发的）
2.脚手架内容介绍
1）node_modules ：项目依赖文件夹
就是我们开发依赖的一些资源和框架
@babel 把 es6 的语法转化成 es5
@vue 框架
2）public：静态资源文件夹
单页面的 html 文件 和 图标
放到 public 文件夹中的静态资源 webpack 打包的时候会原封不动的打包到 dist 文件夹中
3）src ：源代码文件夹
程序员源代码文件夹，程序员开发使用的
assets：静态资源 但是一般是多个组件共用的静态资源
放到 assets 文件夹中的静态资源 webpack 打包的时候会将静态资源当作一个模块打包到 JS 文件夹中
components：放非路由组件，常用的全局组件
App.vue 项目中唯一的根组件
main.js：程序的入口文件 最开始执行的文件
gitgnore ：git 的忽略文件 一般不碰
4）babel-config.js；配置文件
babel 相关 一般不碰
5）package.json ：项目介绍
可以看成项目的身份证，项目叫什么，有哪些依赖，怎么运行里面都有
6）package-lock.json：缓存性文件
依赖从哪下的 都有记录 第二次下的速度会变快 因为有缓存
7）readme.md ：说明文件
对脚手架项目使用和说明的认知 里面有一些指令可以使用
3.运行浏览器自动打开网页
package.json 文件中修改属性 在后面加上一句 空格 --open
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},4.eslint 校验功能关闭
有时候声明变量不适用就报错我们不想这么轻易就报错 影响我们使用我们就直接关了
在根目录下创建一个 vue.config.js 文件
里面配置如下即可关闭
module.exports = {
lintOnSave: false
}
5.src 文件夹配置别名 @
在 jsconfig.json 文件中配置如下
遇见 @ 文件就当成 src 文件夹 未来文件过多 找的时候方便很多
但是不能在
"node_modules",
"dist"
这两个文件夹中使用
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"exclude": [
"node_modules",
"dist"
]
}二、项目路由分析
（一）路由回顾
vue-router
前端路由 可以看成 kv 键值对
key：url 地址栏中的路径
value：相应的路由组件
（二）拆分
网页有上中下三部分
上下不变 中间变所以拆分结果为
路由组件：
Home 首页路由组件，Search 路由组件，login 登录路由，Register 注册路由
非路由组件：
Header
都有头部的组件
Footer
有的没有 footer 组件
注意1:
开发项目 不以html css 为主 主要涉及业务逻辑
开发顺序：
1.书写静态页面
2.拆分组件
3.通过 axios 获取服务器的数据进行动态展示
4.完成相应的动态的业务逻辑
创建组件时 组件结构 组件样式 组件资源 这三个部分都要有 而且要放到正确的位置
注意2：
我们的项目采用 less 的样式 浏览器不识别 less 样式 我们通过 less，less-loader 进行处理
变成 css 样式 浏览器就能识别了
安装依赖：npm install less
而且还得 让组件识别 less style 里面就加上 lang=less 即可
三、使用组件的步骤（非路由组件）
放在 components 文件夹中
（一）创建或者定义
创建新的组件 新建文件/文件夹
先粘贴 结构（html） 再粘贴样式（css） 然后还有图片等静态资源
（二）引入
在根组件 App 中引入新创建的组件
清除默认样式 引入 reset.css 文件清除默认的 css 样式
（三）注册
在 App 中 用 components 注册组件
（四）使用
在App 中 使用组件标签使用
四、路由配置使用
（一）处理路由组件
非路由组件放在 components 文件夹中，路由组件放在 pages/views 文件夹中
根据刚才分析的结果 应该有四个路由组件
（二）路由配置
配置的路由放在 router 文件夹中
1.在 router 文件夹中配置路由
因为 vue-router 是路由中的一个插件 所以得引入 vue 然后再引入 vue-router
2.引入路由组件
3.配置路由
4.在入口文件中 引入路由
5.设置路由显示的位置
在 App 中 头部尾部标签中间 放一个 router-view 标签 就会显示到这里
6.定向首页
{
path: "*",
redirect: '/home'
},（三）路由跳转
router-link 声明式路由导航 得有to 属性
把 a 标签跳转别的页面的标签都替换成 router-link 然后配置 to 属性
push/replace 编程式路由导航
如果不是 a 标签就用这个 绑定点击事件 然后回调函数里面使用 push/replace 来跳转
this.$router.push('跳转路径')
（四）路由组件显示和隐藏
根据组件身上的 route 属性 获得当前路由的信息，通过路由路径判断 Footer 的显示和隐藏
通过 v-show 直接就能实现 但是 给路由配置 meta 属性比较好（配置路由元信息）
路由中有这个信息
（五）路由传参
路由跳转的时候顺便把数据也传过去
搜索栏搜索时我们得把参数带过去 就得用到路由传参
搜索的时候通过按钮把参数传给 /search 路由
params 参数：属于路径中的一部分，配置路由时需要占位
1.字符串形式
query 参数 ：不属于路径的一部分 类似于 ajax 中 的queryString /home?k=v&k=v 不需要占位
2.模板字符串形式
前面时 parmas 参数 后面是 query 参数
3.对象形式
需要给路由起个名字 name 指定给谁传数据
里面 params query 参数都能写
小面试题：
面试题1：
面试题2：
在路由中加入一个问号就能解决 可传可不传的问题，代表params 参数可传可不传
面试题3：
面试题4：
为了组件用我们传的数据方便一点 但是不太用
正常路由跳转 和 发送数据
1.布尔型
首先在路由中 添加一个布尔类型的属性 props 只能传递 params 参数
接收 参数 props 就能接收到我们传入的 keyword
2.对象型
给 props 里面写成对象 能额外传递一些 props
直接接收 a b 就能用
3.函数型
返回的 props 数据是 箭头函数 有一个参数就是 $route 里面可以返回 query 型 和 params 型
接收数据 keyword 和 k
（六）编程式导航的错误
1.提出问题
编程式路由 跳转到 当前路由（参数不变）多次执行会抛出 NavigationDuplicated 的警告错误
路由跳转有两种形式 声明式导航 编程式导航
声明式导航 没有这种问题
编程式导航有这种问题 因为 最新的 vue-router 引入了 promise 没有回调
返回一个 promise 对象 我们需要给一个成功或者失败的回调 但是我们没有
2.解决问题（不完全）
我们把正确和失败的回调都写上即可 虽然为空 但是可以解决这个问题 但是治标不治本 在别的组件中 有 push 和 replace 编程式导航还是有这个问题
3.完全解决
this 是当前组件实例 search
this.$router属性：当前属性 属性值VueRouter 类的一个实例 当在入口文件给文件注册路由的时候 给组件添加 $router $route 属性
push：是VueRouter 类的一个实例
所以我们得重写一下VueRouter 原型对象上的 push 方法
先保存一下
总结
路由知识前面 vue2 笔记中都有不多做叙述
路由非路由组件区别
文件夹不同 components pages/Views
使用方式不同 一个是注册使用 一个是标签
都有 $route $router属性
