vue.js|B站尚品汇项目学习笔记整理（P1-P10） vue.js|javascript

课程传送门：尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili 1、初始环境安装本项目使用vue-cli搭建，需要准备的初始环境有:node.jswebpack
安装nodejs对应链接 Node.js
安装webpack对应链接 webpack
上面的初始环境配置好了后，全局安装vue-cli脚手架：

num install -g @vue/cli

2、创建vue-cli项目在电脑中创建目录 project-SHP
在对应目录下创建项目——创建项目命令：

vue create app

创建好项目后，先了解对应的目录结构

node_modules

项目依赖文件夹

public

静态资源目录，单页面应用SPA就是基于此文件夹中的index.html创建的。
一般放置一些静态资源（图片等），需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中

src

程序员源代码文件夹，你所写的代码都在这里

assets	放置静态资源（一般放置多个组件共用的静态资源），在webpack打包时，会把此文件夹中的静态资源当做一个模块打包到js文件中
components	放置非路由组件（全局组件）
App.vue	项目的唯一根组件，vue当中的组件都是.vue
main.js	程序入口文件，也是整个程序当中最先执行的文件

.gitgnore

git忽略文件，一般不碰它

babel.config.js

配置文件，与babel相关，功能很多，比如可以把ES6自动翻译为ES5

package.json

项目信息，类似人的身份证，记录了项目叫什么、有哪些依赖、项目怎么运行等

package-lock.json

缓存性文件，记录了项目中的依赖包是哪里来的，方便后续的扩展和变更

README.md

说明性文件，对于项目创建、运行、安装依赖等，都有基础的语法命令说明

3、项目的其他配置 3.1、项目运行时，浏览器自启动可以使用下面的命令运行项目：

npm run serve

项目运行后，浏览器不会自动打开，需要手动配置：
package.json文件里面是一个对象，只需要在package.json文件中的script属性里，对应的serve属性值后面加上open即可：

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

3.2、eslint校验功能关闭 eslint校验很严格，比如声明了的变量，如果没有使用的话，eslint校验工具就会进行报错，对于日常开发来说不太友好，需要进行配置：
在根目录下创建vue.config.js文件，并在其中添加以下代码：

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

3.3、src文件夹别名 src目录中的文件很多，对于需要import的目录，可能需要写很多的路径，可以将src目录配置为@
在根目录下创建jsconfig.json文件并添加如下代码：（这个文件是告诉vscode用的，表示说@代表你配置的这个src目录，你之后引入的所有文件，凡是带了@的，都会到对应的src目录中找，而使用exclude将node_modules和dist排除后，vscode就不会在这两个目录里面查找文件了，提高效率）

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

@代表src文件夹，如果将来文件过多，找的时候会很方便
注意：@符简写不应该在node_modules 和dist目录中使用！效率会变低，上面有说明！
4、项目路由分析线上项目链接：gulishop
根据页面，可以将项目分为上-中-下结构：

文章图片

文章图片

通过点击各个按钮，可以基本分析出以下结构——
路由组件：Home首页路由组件、Search路由组件、login登录路由、register注册路由
非路由组件：Header（所有页面都有）、Footer(首页、搜索页)
5、完成非路由组件 Header 和Footer业务在开发项目时的逻辑：
1、书写静态页面；
2、拆分组件；
3、获取服务器的数据动态展示；
4、完成相应的动态业务逻辑
----------------------------------------------------------------------
5.1非路由组件搭建创建Header 和 Footer文件夹
在Header目录中创建index.vue文件，并将对应的js/css/img放入
需要注意：本项目的css文件使用less写的，需要安装依赖，在安装less的时候，最新的版本是
less-loader@10.2.0
+ less@4.1.2
这样可能会报错，需要在命令的最后加上@5 ，表示安装的版本为less-loader 5版本

npm install --save less less-loader@5

安装好后提示如下：

文章图片

让组件识别less样式：
在Header-index.vue 的style中添加如下代码即可识别less

按照上面的方法拆分出Header和Footer，并在APP.vue中引入使用，同时需要在public目录中添加reset.css文件，清除页面默认样式。
需要注意几点：
1、在App中引入时，代码如下：引入注册并使用后，项目会自己找到Header目录中的index.vue文件

import Header from './components/Header'

5.2路由组件搭建安装vue-router

npm install --save vue-router

创建如下目录结构：

文章图片

pages用来存放所有的路由组件（一般vue里面的路由组件会放在pages或views目录中，自己建）；router里的index.js用来配置路由
5.3总结： 5.3.1路由组件和非路由组件的区别——
1、路由组件一般放在views和pages文件夹；非路由组件放在components文件夹中
2、路由组件一般需要在router文件夹中进行注册，使用的即为组件的名字；非路由组件在使用的时候一般都是以标签的形式使用。
3、注册完路由，不管是路由组件还是非路由组件，身上都有$route和$router属性
5.3.2$router和$route的区别：
$route一般用于获取路径、params query参数；
$router一般用于跳转路径，push replace等
5.3.3路由的跳转
路由的跳转分为——
声明式导航
编程式导航——自己写代码，功能比声明式导航更强大
5.4完善Header的路由跳转针对header组件的登录、注册和搜索进行相应的路由跳转，

文章图片

这里使用声明式导航即可，只跳转，不涉及到参数的传递；

文章图片

这里使用编程式导航，给对应的button绑定click事件，代码如下：
路由传参有3中写法：原始字符串拼接、模板字符串拼接、对象。需要注意，当使用对象传参的时候，需要对对应的跳转路由添加字段name

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()}}) }

对应的组件：

{ path:'/search/:keyword', //params参数需要占位，使用/:keyword 进行占位 component:Search, meta:{show:true}, name:'search' },

6、Footer组件显示与隐藏可以通过路由元信息来储存一个布尔值，通过该布尔值来控制组件是否显示还是隐藏：
route目录的index.js 文件中的代码：注意，vuerouter是一个配置对象，里面的属性不能自己乱写

routes:[ { path:'/home', component:Home, meta:{show:true} //路由元信息，相当于对应的组件中会添加这个属性，并存储了一个名为show的值 name:'footer' }, ]

App.vue的代码：

通过v-show指令，结合路由元信息里面的meta值来控制组件的显示与隐藏。
7、编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicated的警告错误

文章图片

路由跳转分为声明式导航和编程式导航，声明式导航没有此类问题，因为vue-router底层已经处理好了。
编程式导航出现警告错误是因为当使用this.$router.push()方法时，其返回的是一个Promise参数，可以通过给push方法传递相应的成功、或失败的回调函数，来捕获当前错误进行解决（治标不治本），相当于每个push都要加两个回调函数：

this.$router.push({name:'search',params:{keyword:this.keyword},query:{k:this.keyword.toUpperCase()}},()=>{},(error)=>{ console.log(error); });

this:指当前组件实例（search）
this.$router属性:当前的这个属性，属性值VueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加$router|$route属性；
push:VueRouter类的一个实例。
最终解决方法：重写push方法和replace方法：

// 先把VueRouter原型对象的push保存一份 let originPush = VueRouter.prototype.push; let originReplace = VueRouter.prototype.replace; // 重写push|replace // 第一个参数：告诉原来push方法，你往哪里跳转（传递哪些参数） VueRouter.prototype.push=function(location,resolve,reject){ if(resolve && reject){ // call与apply区别：相同点：都可以调用函数一次，都可以篡改函数的上下文一次 // 不同点：call与apply传递参数：call传递参数用逗号隔开，apply方法执行，需要传递数组 originPush.call(this,location,resolve,reject); }else{ originPush.call(this,location,()=>{},()=>{}); } }; VueRouter.prototype.replace=function(location,resolve,reject){ if(resolve && reject){ // call与apply区别：相同点：都可以调用函数一次，都可以篡改函数的上下文一次 // 不同点：call与apply传递参数：call传递参数用逗号隔开，apply方法执行，需要传递数组 originReplace.call(this,location,resolve,reject); }else{ originReplace.call(this,location,()=>{},()=>{}); } };

【vue.js|B站尚品汇项目学习笔记整理（P1-P10）】