/vant-app

H5移动APP，使用Vue全家桶VueCli3.x+Vant+Vuex+Vue-Router。

Primary LanguageCSS

Vant-App

一个弄着玩的APP，使用Vue全家桶VueCli3.x+Vant+Vuex+Vue-Router。

功能特色

  • Vant 按需加载组件
  • Vant 主题个性化定制
  • 移动端vw,rem适配
  • Vuex,Vue-Router模块化
  • axios组件http.js封装

功能预览

  • 小说首页

小说首页

  • 小说分类

小说分类

  • 小说简介

小说简介

运行项目

# 安装依赖
yarn install
# 启动
yarn serve
# 打包
yarn build

Vant定制主题

这里是基于Babel7环境

步骤一：在babel.config.js中

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  //添加下面代码
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: (name) => `${name}/style/less`,
      },
      'vant',
    ],
  ],
};

步骤二： 在main.js中

import 'vant/lib/index.less';

步骤三： 在vue.config.js中添加

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          //通过less文件覆盖（文件路径为绝对路径）
          hack: `true; @import "${path.resolve(
            __dirname,
            './src/assets/style/theme.less'
          )}";`
        }
      }
        //其他插件设置....  
      }
    }

参考博文

步骤四：在assets/style新建theme.less文件

theme.less中定义的变量可参照vant插件目录/node_modules/vant/lib/style/var.less已经定义的变量，通过在自定义的样式文件theme.less定义同名变量进行覆盖Vant原来的样式。

引入iconfont图标（font-class方式）

步骤一：以font-class方式下载字体图标并解压

默认文件如下

  • demo_index.html
  • demo.css
  • iconfont.css
  • iconfont.eot
  • iconfont.js
  • iconfont.json
  • iconfont.svg
  • iconfont.ttf
  • iconfont.woff
  • iconfont.woff2

其中demo.xxx不需要引入，其他文件拷贝至项目制定目录中，比如我这里是放在assets/font/iconfont目录下

在main.js导入图标

import './assets/font/iconfont/iconfont.css'

在组件中使用

通常使用在html的<i>和<span>标签中使用

<i class="iconfont icon-account"/>
<span class="iconfont icon-account"/>

Mockjs 模拟后端接口数据

安装mockjs

yarn add mockjs

使用mockjs模拟接口数据

在 mock 目录下新建 index.js文件

import Mock from 'mockjs'; // 引入mockjs
const Random = Mock.Random; // Mock.Random 是一个工具类，用于生成各种随机数据
let data = [];
for (let i = 0; i < 10; i++) {
  // 可自定义生成的个数
  let template = {
    Boolean: Random.boolean, // 可以生成基本数据类型
    Natural: Random.natural(1, 10), // 生成1到100之间自然数
    Integer: Random.integer(1, 100), // 生成1到100之间的整数
    Float: Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
    Character: Random.character(), // 生成随机字符串,可加参数定义规则
    String: Random.string(2, 10), // 生成2到10个字符之间的字符串
    Range: Random.range(0, 10, 2), // 生成一个随机数组
    Date: Random.date(), // 生成一个随机日期,可加参数定义日期格式
    Image: Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
    Color: Random.color(), // 生成一个颜色随机值
    Paragraph: Random.paragraph(2, 5), //生成2至5个句子的文本
    Name: Random.name(), // 生成姓名
    Url: Random.url(), // 生成web地址
    Address: Random.province(), // 生成地址
  };
  data.push(template);
}

Mock.mock('/api/v1/list', 'get', data); // 根据数据模板生成mock常规类型模拟数据

在main.js 中引入

require('@/mock/index');

在组件中使用接口获取模拟数据

    initMock(){
      this.$axios.get('/api/v1/list', {
        params: {}
      }).then(res => {
        console.log(res);
      }).catch(err => {
      })
    }