详细记录基于vue+nodejs+mongodb构建的商城学习（三）基于项目的vue框架梳理

前置：

本系列文章是一个本人边学习边梳理的学习笔记，俗话说好脑袋不如烂笔头，再好的记忆力时间长了也会有细节忘记，本项目选择的前端框架是vue,后端开发使用是node.js，数据库使用的是mongodb，本系列文章重要内容主要有四点：

1.云服务器的购买，怎么使用xshell工具连接云服务器；

2.在本地及云服务器安装mongodb数据库，及数据库的使用；

3.梳理我在学习vue这个前端框架之后的完整项目的实际运用总结；

4.关于node.js开发后端的学习与梳理总结；

5.完整项目的上线部署；

vue前端开发篇

本文主要概括为以下几点：

• 构建vue项目
• vue-router梳理
• vue-resource介绍、axios介绍与使用
• vue项目的分页

一、构建vue项目

vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。  

 vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。

1）安装vue-cli

① 使用 npm（默认已经安装node环境）全局安装 webpack，打开命令行工具输入： npm install webpack -g或者（ npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

注意： webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g

全局安装成功webpack:

全局安装vue-cli（命令：npm install -g vue-cli），安装完成后输入 vue -V（这里V是大写V）：

证明vue-cli脚手架全局安装成功。

2）使用vue-cli构建vue项目

① 我首先在新建如下目录作为项目存放地：

然后使用命令行cd进入到项目目录输入：

vue init webpack vue-node-webpack4复制代码

出现如下图所示：

选项前几个都是yes,ESLint是代码规范与错误检测工具，暂时不选，unit是单元测试工具，是站在开发者角度测试，暂时不选，e2e也是单元测试工具，e2e测试是把我们的程序堪称是一个黑盒子，我不懂你内部是怎么实现的，我只负责打开浏览器，把测试内容在页面上输入一遍，看是不是我想要得到的结果，暂时不选。

注意：unit测试是程序员写好自己的逻辑后可以很容易的测试自己的逻辑返回的是不是都正确。e2e代码是测试所有的需求是不是都可以正确的完成，而且最终要的是在代码重构，js改动很多之后，需要对需求进行测试的时候测试代码是不需要改变的，你也不用担心在重构后不能达到客户的需求。

② 配置完成后，可以看到目录下多出了一个项目文件夹vue-node-webpack4，然后cd进入这个文件夹，安装依赖：

npm install复制代码

( 如果安装速度太慢。可以安装淘宝镜像，打开命令行工具，输入：npm install -g cnpm --registry=https://registry.npm.taobao.org 然后使用cnpm来安装 )

然后安装完目录结构如下图：

3）启动项目

npm run dev复制代码

如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config里的index.js 

如果本地调试项目时，建议将build 里的assetsPublicPath的路径前缀修改为 ' ./ '（开始是 ' / '），因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。

我的端口没有被占用，直接成功（服务启动成功后浏览器会默认打开一个“欢迎页面”）：

启动命令这块解释：

注意：在进行vue页面调试时，一定要去谷歌商店下载一个vue-tool扩展程序。  

 4）vue-cli的webpack配置分析

从package.json可以看到开发和生产环境的入口 。

•  可以看到dev中的设置，build/webpack.dev.conf.js，该文件是开发环境中webpack的配置入口。 
  
• 在webpack.dev.conf.js中出现webpack.base.conf.js，这个文件是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置。 
• 更详细配置文件信息请看segmentfault.com/a/119000000… 
  

5）打包上线

注意，自己的项目文件都需要放到 src 文件夹下。

在项目开发完成之后，可以输入 npm run build 来进行打包工作。

npm run build复制代码

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看。 

项目上线时，只需要将 dist 文件夹放到服务器就行了。  

二、vue-router梳理

三、vue-resource介绍、axios介绍与使用

1、vue-resource

Vue.js的插件提供了使用XMLHttpRequest或JSONP 进行Web请求和处理响应的服务

单来说，vue-resource就像jQuery里的$.ajax，用来进行数据交互。

特点：

• 体积小
• 支持主流的浏览器（ie9以下不支持）
• 支持Promise API和URI Templates（Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。）
• 支持拦截器（拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
  拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。）

2、axios

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。

特点：

• 在浏览器中发送 XMLHttpRequests 请求
  
• 在 node.js 中发送 http请求
  
• 支持 Promise API
  
• 拦截请求和响应
  
• 转换请求和响应数据
  
• 取消请求
  
• 自动转换 JSON 数据
  
• 客户端支持保护安全免受 CSRF/XSRF 攻击

get请求方式如下：

方向代理的配置如下：

四、vue项目的滚动加载分页

vue滚动加载的插件:vue-infinite-scroll

安装命令如下：

npm install vue-infinite-scroll --save复制代码

五、左侧菜单高亮

通过索引判断高亮