目录
11.2 在项目中，经常会有API文件夹【里面存放的就是axios请求】
14.3 this.$state.dispatch与this.$state.commit的主要区别
21.2 用watch + this.$neckTick（较为完美的解决方案）
24.1 Search模块中子组件SearchSelector.vue的动态开发
37.1 放大镜操作——ImageList组件和Zoom组件之间的小操作
39.2 路由传递参数结合会话存储(成功路由跳转与参数传递)
五十四. 表单验证（插件：vee-validate）【了解即可，看懂就行】
VUE2项目尚品汇笔记
将Typora记录的笔记、以及手写的笔记进行二次整理。
整理完本次笔记，也会继续将之前学习HTML、CSS、JS、Vue的笔记进行二次整理。
方便以后查找，同时有需要改正或补充的，还请大家指教。
一、vue-cli脚手架初始化项目各文件夹
node_modules文件夹：项目依赖文件夹
public文件夹：一般放置一些静态资源（图片等）。注：放在public文件夹中的静态资源，当webpack进行打包时候，会原封不动打包到dist文件夹中。
src文件夹（程序员源代码文件夹）：
assets文件夹：一般放置静态资源（一般放置多个组件共用的静态资源）。注：放置在assets文件夹里的静态资源，在webpack打包时，会把它当做一个模块，打包到JS文件里。
components文件夹：一般放置的是非路由组件（全局组件）。
App.vue：唯一的根组件，Vue当中的组件（.vue）。
main.js：程序入口文件，也是整个程序当中最先执行的文件。
babel.config.js：配置文件（babel相关）。
package.json文件：类似于项目的‘身份证’，记录项目叫什么，当中有哪些依赖，如何运行。
package.lock.json文件：缓存性文件。
README.md文件：说明性文件。
二、 项目的其他配置
2.1 项目运行，让浏览器自动打开
在package.json文件中配置
{
......
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
......2.2 eslint校验功能（各种规范的报错）的关闭
eg:声明了变量，但未进行使用，则eslint校验工具会报错
-
在根目录下创建文件vue.config.js
module.exports = { //关闭eslint lintOnSave: false }
2.3 src文件夹简写方法，配置别名
①.jsconfig.json配置别名，可用@提示
【@代表的是src文件夹，常在js文件中使用。"exclude"表示“除了......”，意为配置的别名不能在"node_modules"和"dist"使用】
{
"compilerOptions":{
"baseUrl":"./",
"paths":{
"@/*":["src/*"]
}
//表示不能在"node_modules"和"dist"中使用这种配置的别名。
"exclude":["node_modules","dist"]
},②.也可在.css中配置别名@提示 【在@前面加上~这个符号】
<style>
......
background-image: url(~@/assets/images/icons.png);
......
</style>2.4 样式的引入
在public文件夹下的index.html中引入同级reset.css样式
<link href="/reset.css">
三. 本次项目路由的分析
vue-router 前端的路由：KV键值对。
key：URL（地址栏中的路径） value：相应的路由组件 注：本次项目是上中下结构
- 本次项目的路由组件可分为：
Home首页路由组件、Search搜索路由组件、login登录路由组件、Refister注册路由组件
- 本次项目的非路由组件可分为：
Header组件：【存在于首页、搜索页】 Footer组件：【存在于首页、搜索页，但登录和注册页面没有】
四. 完成非路由组件Header与Footer业务
本次项目主要关注业务、逻辑。
- 开发项目步骤：
- 书写静态页面（HTML+CSS）(本次项目已提前准备好了)
- 拆分组件（静态组件、路由组件等）
- 获取服务器的数据动态展示
- 完成相应的动态业务逻辑（eg:Js动态业务等）
- 注意：
- 创建组件=组件结构 + 组件的样式 + 图片资源。
- 本次采用less样式。
需通过less、less-loader【安装版本五npm install --save less less-loader@5】进行处理less，将其变为css样式。
若想让组件识别less样式，需在style标签上加上lang=less。<style lang="less" scoped>
五. 路由组件的搭建
经过上面的分析，本次项目的路由组件有四个：
Home首页、Search搜索、Login登录、Register注册。
components文件夹：经常放置非路由组件（共用的全局组件）.
pages或views文件夹：经常放置路由组件
5.1 配置路由
项目当中配置的路由一般放置在router文件夹中的index.js里。路由配置好之后在入口文件main.js中引入。
5.2 路由组件与非路由组件的区别？
- 共同点：
注册完路由，不管是路由组件、还是非路由组件，它们身上都会有$route、$router属性。
$route：一般获取路由信息【路径、query、params等】
$router：一般进行编程式导航，进行路由跳转【push或replace（其中一个是有缓存记忆的）】
- 不同点：
| 路由组件 | 非路由组件（普通组件） |
| 一般放置在pages或views文件夹中 | 一般放置在components文件夹中。 |
| 一般需要在router文件夹中进行注册 （使用的名字即为组件的名字，例如router文件中的index.js的写法） 在App.vue中展示时， 用的是<router-view></router-view> |
一般以标签的形式使用 （例如App.vue里的<Header></Header>标签）。 |
5.3 路由的跳转的两种形式
① 声明式导航：router-link
② 编程式导航：push或replace
编程式导航：声明式导航能做的，编程式导航都能做；而且编程式导航不仅可以进行路由跳转，还做一些其他业务逻辑。
5.4 重定向
redirect重定向：在项目跑起来时就访问该页面（该方法可以立马让其定向到首页）
在router的index.js里书写重定向代码：
//redirect重定向：在项目跑起来时就访问该页面(该方法可以立马让其定向到首页)
//配置路由,路由的单词都是小写的
export default [
......
{
path: '*',
redirect: './home'
}
......
]六. Footer组件显示与隐藏
6.1 v-if和v-show的区别
显示or隐藏，可用v-if或者v-show。两者都是动态显示DOM元素。
v-if初始化较快，但代价较高；v-show初始化较慢，但切换成本低。
| v-if | v-show |
|---|---|
| 动态向Dom内添加或删除DOM元素 | 通过设置DOM元素的display样式属性控制显示或隐藏 |
| 切换有一个局部编译/卸载的过程，过程中可能会销毁和重建内部的事件监听和子组件。 | 单纯地基于css切换 |
| 惰性的； 初始值为假时，不作任何操作；只有在条件第一次为真时才开始局部编译。被缓存后，再次切换时进行局部卸载。 |
无论首次条件是否为真，都可被编译；被缓存且DOM元素保留。 |
| 有更高的切换消耗 | 有更高的初始化渲染消耗 |
| 适合运营条件不大可能改变的场景 | 适合频繁切换的场景 |
6.2 Footer组件编写
本次项目在Home首页、Search搜索显示Footer组件，但是在Login登录、Register注册时隐藏Footer组件。
可根据组件身上的$route获取当前路由的信息，通过路由路径判断Home和Footer这俩非路由组件的显示与隐藏。
<!-- 写法一(不推荐)： -->
<Footer v-show="$route.path=='/home'||$route.path=='/search'"></Footer>配置路由时，可给路由添加路由元信息【meta】，注意路由配置对象的key不能乱写。
在APP.vue文件中：
<!-- 写法二： -->
<Footer v-show="$route.meta.show"></Footer>在router文件的index.js中配置【meta】：
//配置路由
export default new VueRouter({
routes: [{
path: "/home",
component: Home,
meta: { show: true }
},{
path: "/search",
component: Search,
meta: { show: true }
},{
path: "/login",
component: Login,
meta: { show: false }
},{
path: "/register",
component: Register,
meta: { show: false }
},
//重定向：在项目跑起来时就访问该页面(该方法可以立马让其定向到首页)
{
path: '*',
redirect: './home'
}
]
})七. 路由传参
了解URL语法格式
https://blog.csdn.net/Thaley/article/details/122286201
格式：protocol :// hostname[:port] / path / [;parameters][?query]#fragment
[ ]中的内容可有可无
即：协议 :// 主机名[:端口号] / 路径 / [;参数][?查询]#信息片断
7.1 路由跳转的两种形式
eg：A -> B
①声明式导航：router-link（务必要有to属性），<router-link to="......"></router-link>可实现路由跳转。
②编程式导航：利用组件实例的$router.push或replace方法，可实现路由的跳转，也可书写一些自己的业务逻辑。
7.2 路由传参（params、query）
①params参数：属于路径的一部分，需注意，在配置路由的时候，需要占位。
如路径的path:"/search/:keyword"，/:keyword即为params参数的占位符。
②query参数：不属于路径的一部分，类似于ajax中的queryString /home?k=v&kv=, 不需占位。
| params参数 | query参数 |
|
|