基于Vant组件库的Vue2.x单页面程序项目开发演示

开发步骤如下：

安装和配置 Vue 和 Vant 组件库

安装Vue：vue create 项目名称（记得选上 vue-router 项）

启动项目：npm run serve

了解一下创建后的项目目录：

其中，src 里面的 components 文件夹用来存放可以复用的组件的，views 文件夹用来存放使用 路由 来显示的组件的。

清空App.vue里的默认代码。

删除项目里components和views里的默认组件。

删除router/index.js里的默认路由等。

安装Vant：使用官网安装说明中的 npm方式 安装即可！

项目中引入Vant：按照官网引入说明中第三种，在main.js文件引入所有组件，项目部署时再优化即可！(注意：不要多次导入Vue）。

创建自己的组件文件

在 src 里面的 components 创建需要的 .vue 组件在 views 文件夹里创建自己的组件文件夹，分类存放 .vue 组件。

然后初始化 .vue 组件的基本代码。

使用 Vant 组件库

官网Vant找组件：

找到相应组件，按照说明进行使用，导入就不用再次导入了，上面已经一次性导入所有了！

如何定制主题：

这里说一下定制主题的问题：定制主题就是按照自己想法去覆盖原有的相应的默认CSS样式，注意的是，官方是使用Less的。

查看官方的定制主题文档--定制方法。步骤一：在main.js中引入vant/lib/index.less文件（手动引入即可，记得将刚开始导入的css那一行去掉）。步骤二：修改样式变量（我们是用vue-cli创建的，所以使用在vue.config.js配置[没有就自己在根目录创建一个】，注意：配置时使用通过 less 文件覆盖方式比较方便，即在src目录下建立theme.less文件，然后将文件绝对路径配置到hack里面去，之后修改样式就在theam.less修改就可以了，不然每次修改配置文件每次都要重启服务太麻烦！！）。

vue.config.js 文件:

查看代码

// 在 vue.config.js 这个配置文件中，可以对整个项目的打包、构建进行全局性的配置
 
// webpack 在进行打包的时候，底层用到了 node.js
// 因此,在 vue.config.js 配置文件中，可以导入并使用 node.js 中的核心模块
const path = require('path')
const themePath = path.join(__dirname, './src/theme.less')
 
module.exports = ({
  css: {
    loaderOptions: {
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 通过 less 文件覆盖（文件路径为绝对路径）
            hack: `true; @import "${themePath}";`,
          },
        },
      },
    },
  }
})

theme.less 示例:

查看代码

 
// 在 theme.less 文件中，覆盖 Vant 官方的 less 变量值
@blue: #007bff;
 
// 覆盖 Navbar 的 less 样式
@nav-bar-background-color: @blue;
@nav-bar-title-text-color: #fff;

封装axios（重点）

引入组件，并且自己编写好必要的HTML和CSS页面后，开始发起axios请求，请求数据。要弄清楚在哪个组件发请求，一般来说是父组件。

这里重点讨论 axios 封装思想。

关于如何封装，移步：Vue项目中封装axios

接下来就是渲染请求回来的数据了。一切以 Vant 组件库官网为重，想要实现什么功能，参考组件库基本能够实现。