项目介绍

电商前台项目

技术架构：vue+webpack+vuex+vue-router+axios+less..

• 封装通用组件
• 登录注册
• token
• 购物车
• 支付
• 项目性能优化

一、项目初始化

使用vue create projrct_vue2在命令行窗口创建项目

1.1、脚手架目录介绍

├── node_modules:放置项目的依赖
├── public:一般放置的是静态资源（图片），需要注意：放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中，不会当做一个模块打包到 JS 里面
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src:程序员源代码文件夹
│   ├── assets: 存放静态资源(一般放置多个组件公用的的静态资源），需要注意：放置在assets文件夹里面的资源，webpack打包的时候，会把静态资源当做一个模块，打包到JS文件里面
│   │   └── logo.png
│   │── component: 存放组件【一般放置的是非路由组件（全局组件）】
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件(唯一的根组件，Vue当中的组件都是(.vue))
│   │── main.js: 入口文件(程序的入口文件，也是整个程序当中最先执行的文件)
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件(记录着项目信息，叫什么…有哪些依赖…项目怎么运行…) 
├── README.md: 应用描述文件，说明性文件
├── package-lock.json：包版本控制文件,缓存性文件

1.2、项目的其他配置

2.1、项目运行起来的时候，让浏览器自动打开。【我不想把默认浏览器设置成Google，但是又想调整项目的时候使用Google浏览器，所以我选择手动打开，没有修改此处的文件】
找到package.json文件，找到"scripts"进行如下修改：

2.2、eslint语法校验功能关闭。

修改vue.config.js文件：

2.3、src文件夹简写方法，配置别名。【默认配置好了的】

在jsconfig.json文件中。@代表的是src文件夹，这样将来文件过多，找的时候方便很多。

二、项目的路由分析及搭建

2.1、项目的路由分析

本项目和品优购差不多，上中下结构的  

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

key：URL（地址栏中的路径）

value：相应的路由组件

非路由组件：

• Header
• Footer（首页，搜索页）

路由组件：

• 【Home首页】
• 【Search搜索】
• 【login登录（无Footer）】
• 【register注册（无Footer，可以通过条件渲染搞没）】

2.2、开发项目的步骤

1. 书写静态页面（HTML，CSS）
2. 拆分组件（路由/非路由）
3. 获取服务器的数据动态展示
4. 完成相应的动态业务逻辑

• 注意1：创建组件的时候，找准 组件结构 + 组件的样式 + 图片资源
• 注意2：项目如果采用的less样式，浏览器不识别less样式，需要通过less、less-loader【安装6版本】进行处理less：npm i less-loader@6，如果想要组件识别less样式，需要在style标签加上lang=“less”。
  • 
  • 
• 注意3：引入清除默认样式，将默认样式文件放在public文件夹内，在index.html里引入。 <link rel="stylesheet" href="<./css/reset.css">
  • 

2.3、非路由组件的搭建

非路由组件都搞在components文件夹里，本项目有Header和Footer
1、创建或定义组件
2、引入组件
3、注册组件
4、使用组件

2.4、路由组件的搭建

2.4.1、配置路由器

Vue2安装vue-router，命令：npm i vue-router@3
Vue3安装vue-router，命令：npm i vue-router

路由组件有四个：Home，Search，Login，Register（注册）

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

2.4.2、使用路由组件

用<router-view></router-view>指定展示位置，然后登录，注册，搜索这几个a标签都换成router-link标签，href换成to

2.4.3、路由组件与非路由组件的区别

• 路由组件一般放置在pages | views文件夹，非路由组件一般放置在components文件夹中
• 路由组件一般需要在router文件夹中的index.js文件中配置路由规则（使用路径和组件名字等属性），非路由组件在使用的时候，一般都是以标签的形式使用
• 注册完路由，不管是路由组件还是非路由组件，身上都有 $route,$router属性
  • $route：一般获取路由信息【路径，query，params等等】，其实非路由组件当中的this.$route就是当前显示的路由组件的一些信息，比如路径，name，meta等
  • $router：一般进行编程式导航进行路由跳转【push | replace】

2.4.4、重定向

在项目跑起来的时候，访问/，立马让他定向到首页 写在 src/router/index.js文件里

2.4.5、路由跳转的两种方式

1. 声明式导航router-link
2. 编程式导航 push | replace

声明式路由导航可以做的事情 编程式导航都能做，除此之外，编程式导航还能做一些其他的业务

三、Footer组件的显示和隐藏--路由元信息

显示或隐藏组件：v-if | v-show
Footer组件在 Home，Search中是显示的，在Login和Register中是隐藏的
我们可以根据$route.path是否是home或search来控制Footer的显示与隐藏

若有很多组件都要显示Footer，就要写很多，这样不方便且冗余。

路由元信息 | Vue Router

定义路由的时候可以配置 meta 字段：

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

 四、路由传参

params和query参数可以一起传

4.1、路由跳转的两种方式

methods: {//搜索按钮的回调函数，需要向search路由进行跳转goSearch() {//路由传递参数//第一种：字符串形式//this.$router.push('/search/' + this.keyword + '?k=' + this.keyword.toUpperCase());//第二种传参方式:模板字符串//this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);//第三种传参方式:对象写法this.$router.push({// path: '/search',  注意：此处和params一起时不能用path只能namename: 'search',params: { keyword: this.keyword },query: { k: this.keyword.toUpperCase() },})},},

  params:{keyWord:'' || undefined,},

this.$router.push({// 第三种：对象写法name:'search',// params参数params:{keyWord:'' || undefined,},// query参数query:{k:this.keyWord.toUpperCase()}},()=>{},()=>{})