Vue2尚品汇前台项目笔记——（1）项目初始化

Vue2尚品汇前台项目笔记

一、项目初始化

使用[脚手架创建项目，具体参考之前的脚手架配置笔记，我起名叫vue_shop_test

1.脚手架目录分析

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

2.1 项目运行，浏览器自动打开

package.json
    "scripts": {
    "serve": "vue-cli-service serve --open",	//加上--open
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
    },

2.2 关闭eslint校验工具（不关闭会有各种规范，不按照规范就会报错）

• 根目录下创建vue.config.js,进行配置
• 比如：声明变量但是没有使用eslint校验工具报错。

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

2.3 src文件夹配置别名

创建jsconfig.json，【用@代替src文件夹，这样将来文件很多，找的时候也方便很多】，exclude表示不可以使用该别名的文件

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

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

3.项目路由分析

vue-router

前端所谓路由：key-value键值对。

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

value:相应的路由组件

注意：项目上中下结构

路由组件：

​ 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样式变为css样式，浏览器才可以识别。

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

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

​ -创建或者定义

​ -引入

​ -注册

​ -使用

5路由组件的搭建

vue-router

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

​ -components文件夹：经常放置的非路由组件（共用全局组件）
​ -pages|views文件夹：经常放置路由组件

5.1配置路由

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

5.2总结

路由组件与非路由组件的区别？

1:路由组件一般放置在pages|views文件夹，非路由组件一般放置components文件夹中
2:路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字）,非路由组件在使用的时候，一般都是以标签的形
式使用
3:注册完路由，不管路由路由组件、还是非路由组件身上都有$route、$router属性

$route:一般获取路由信息【路径、query、params等等】
$router:一般进行编程式导航进行路由跳转【push|replace】

6.Footer组件显示与隐藏

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

v-if:操作dom在节点处是真有还是真没有，会频繁操作dom，很消耗性能

v-show:只是通过操作样式将元素显示或隐藏（display，blockl）

从性能的角度考虑，v-show更好

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

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

6.1路由路径判断

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

    <!-- 在Home和Search下是显示的，在Login和Register下是隐藏的 -->
    <Footer v-show="$route.path == '/home' || $route.path == '/search'"></Footer>

但如果以后路由很多，那么这种情况下写起来会非常麻烦，不是最终解决手段

6.2路由元信息判断

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

routes: [
        {
            path: '/home',
            component: Home,
            meta: { showFooter: true }
        },
        {
            path: '/search',
            component: Search,
            meta: { showFooter: true }
        },
        {
            path: '/login',
            component: Login,
            meta: { showFooter: false }
        },
        {
            path: '/register',
            component: Register,
            meta: { showFooter: false }
        },

<Footer v-show="$route.meta.showFooter"></Footer>

7.路由传参

7.1:路由跳转有几种方式？

比如：A->B
声明式导航：router-link(务必要有to属性）,可以实现路由的跳转
编程式导航：利用的是组件实例的$router.push|replace方法，可以实现路由的跳转。（可以书写一些自己业务）

7.2:路由传参，参数有几种写法？

query、params两个属性可以传递参数

query参数：不属于路径当中的一部分，类似于get请求，地址栏表现为 /search?k1=v1&k2=v2
query参数对应的路由信息 path: "/search"

params参数：属于路径当中的一部分，需要注意，在配置路由的时候，需要占位 ,地址栏表现为 /search/v1/v2
params参数对应的路由信息要改为path: "/search/:keyword" 这里的/:keyword就是一个params参数的占位符

//路由传递参数
//第一种：字符串传递
 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() }
})

• params传参问题
  （1）如何指定params参数可传可不传

  如果路由path要求传递params参数,但是没有传递,会发现地址栏URL有问题，详情如下：
  Search路由项的path已经指定要传一个keyword的params参数，如下所示：
  path: "/search/:keyword",
  执行下面进行路由跳转的代码：
  this.$router.push({name:"Search",query:{keyword:this.keyword}})
  当前跳转代码没有传递params参数
  地址栏信息：http://localhost:8080/#/?keyword=asd
  此时的地址信息少了/search
  正常的地址栏信息: http://localhost:8080/#/search?keyword=asd
  解决方法：可以通过改变path来指定params参数可传可不传 
  path: "/search/:keyword?",?表示该参数可传可不传

参考连接：https://blog.csdn.net/weixin_44867717/article/details/109773945

（2）由（1）可知params可传可不传，但是如果传递的是空串，如何解决 。

 this.$router.push({name:"Search",query:{keyword:this.keyword},params:{keyword:''}})
 出现的问题和1中的问题相同,地址信息少了/search
 解决方法： 加入||undefined，当我们传递的参数为空串时地址栏url也可以保持正常
 this.$router.push({name:"Search",query:{keyword:this.keyword},params:{keyword:''||undefined}})

（3）路由组件能不能传递props数据？
可以，有三种写法

//布尔值写法：params
props:true,
//对象写法：额外的给路由组件传递一些props
props:{a:1,b:2},
//函数写法：可以params参数、query参数，通过props传递给路由组件
props:($route)=>{
	return {keyword:$route.params.keyword,k:$route.query.k};
}

8、多次执行相同的push问题

多次执行相同的push问题，控制台会出现警告
例如：使用this.$router.push({name:‘Search’,params:{keyword:“…”||undefined}})时，如果多次执行相同的push，控制台会出现警告。

let result = this.$router.push({name:"Search",query:{keyword:this.keyword}})
console.log(result)

执行一次上面代码：

多次执行出现警告：

原因：push是一个promise，promise需要传递成功和失败两个参数，我们的push中没有传递。
方法：this.$router.push({name:‘Search’,params:{keyword:“…”||undefined}},()=>{},()=>{})后面两项分别代表执行成功和失败的回调函数。
这种写法治标不治本，将来在别的组件中push|replace,编程式导航还是会有类似错误
push是VueRouter.prototype的一个方法，在router中的index重写该方法即可(看不懂也没关系，这是前端面试题)

//1、先把VueRouter原型对象的push，保存一份
let originPush = VueRouter.prototype.push;
//2、重写push|replace
//第一个参数：告诉原来的push，跳转的目标位置和传递了哪些参数
VueRouter.prototype.push = function (location,resolve,reject){
    if(resolve && reject){
        originPush.call(this,location,resolve,reject)
    }else{
        originPush.call(this,location,() => {},() => {})
    }
}

绕了大半天，说白了就是push不是$router本来就带着的方法，而是原型上的，所以要统一修改的话必须从原型上下手而不是$router