Vue 电商项目学习

vue_cli脚手架¹初始化项目

node + webpack + 淘宝镜像

项目文件夹

1. node_modules： 项目依赖；
2. public文件夹:一般放置一些静态资源（图片），需要注意 ，放这public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中；
3. src文件夹 （程序员源代码文件夹）：
   assets文件夹：一般是放置静态资源（一般放置多个组件共用的静态资源），需要注意，放置在assets文件夹里的静态资源，在webpack打包的时候，webpack会把静态资源当作一个模块，打包JS文件里面。
   components文件夹：一般放置的是非路由组件（全局组件）
   APP.vue：唯一的根组件，Vue当中的组件（.vue）
   main.js:程序入口文件，也是整个程序当中最先执行的文件
4. babel.config.js: 配置文件（babel相关）；
5. package.json文件：认为项目“身份证”，记录项目叫做什么、项目当中有哪些依赖、项目怎么运行；
6. package-lock.json:缓存性文件；
7. README.md:说明性文件。

项目的其他配置

1.项目运行起来的时候,让浏览器自动打开。 如下：

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

2.eslint校验功能关闭。

----在根目录下,创建一个vue.config.js
比如：声明变量但是没有使用，eslint校验工具报错。

3.src文件夹简写方法，配置别名。
jsconfig.json配置别名@提示 【@代表的是src文件夹，这样将来文件过多，找的时候方便很多】

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

项目路由的分析

vue-router
前端所谓路由：KV键值对。

键值对	说明
key	URL（地址栏中的路径）
value	相应的路由组件

路由组件

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

非路由组件

Header【首页、搜索页】；
Footer【在首页、搜素页】，但是在登录|注册页面没有。

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

-创建或者定义
-引入
-注册
-使用

路由组件的搭建

四个：Home、Search、Login、Register

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

路由的跳转

有两种形式：

声明式导航：router-link,可以进行路由的跳转
编程式导航：push|replace,可以进行路由的跳转

组件显示与隐藏

1.我们可以根据组件身上的$route获取当前路由的信息，通过路由路径判断Footer显示与隐藏。
2.配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象，它的key不能乱写。

路由传参

路由跳转方式

A->B
声明式导航：router-link（务必要有to属性）
编程式导航：利用的是组件实例的 $router.push|replace

参数

参数	是否属于路径	是否占位
params	属于路径当中的一部分	需要占位
Quotes	不属于路径当中的一部分，类似于ajax中的queryString /home?k=v&kv=	不需要占位

NavigationDuplicated的警告错误

注意:编程式导航（push|replace）才会有这种情况的异常，声明式导航是没有这种问题，因为声明式导航内部已经解决这种问题。这种异常，对于程序没有任何影响的。

1.为什么会出现这种现象:

由于vue-router最新版本引入了promise，当传递参数多次且重复，会抛出异常。

第一种解决方案

是给push函数，传入相应的成功的回调与失败的回调 ()=>{}，可以捕获到错误，暂时解决当前问题，但是以后再用push|replace还是会出现类似现象，因此我们需要从‘根’治病；

this:当前组件实例（search）；

this.router属性:属性值就是VueRouter类的一个实例，挡在入口文件注册路由的时候，给组件实例添加 router。

第二种解决方案

治本push:

先把VueRouter原型对象的push先保存一份：

let orignPush = VueRouter.prototype.push;

重写push|replace,第一个参数告诉原来push方法，往哪跳传哪些参数：

VueRouter.prototype.push = function(location,resolve,reject){
​	if(resolve && reject){
​		//call||apply区别：都可以调用函数一次，篡改函数上下文一次；call传参用逗号，apply方法传递数组
​		orignPush.call(this,location,resolve,reject);
	}else{
​		orignPush.call(this,location,()=>{},()=>{});
	}
}

总结

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

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

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

3:注册完路由，不管路由组件还是非路由组件身上都有route、router属性。

---

1. vue_cli脚手架说明 ↩︎