从0到0.1 撸一个基于Vant的H5简单框架(一)

前言

本文适合对vue刚入门的小白，通过vue-cli快速创建vue项目，以vant ui框架为基础搭建的H5简单框架。适配主流手机浏览器。内容可能有些不严谨或者理解错误的地方，欢迎提出指正。

通过本文，大致可以达到以下目的:

通过vue-cli创建一个vue项目
sass的配置
axios的二次封装
vue-router简单使用
vuex简单使用
vant的简单应用
post-css-to-viewport移动端适配(兼容vant)
登录的token设置
权限设计

阅读之前，你最好对阅读以下官方文档，以便快速理解：

创建项目

安装vue-cli并创建项目

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create vue-vant-demo

# 运行项目
cd vue-vant-demo
npm run serve

服务启动浏览器访问http://localhost:8080/预览页面

简单的vue项目已建好，接下来再根据需求添砖加瓦。

SASS预编译处理

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：

# 安装Sass
npm install -D sass-loader node-sass

装node-sass的失败率很高，执行命令后默默祈祷吧

sass-loader node-sass 这两个包安装成功后，无需任何配置，可以直接在页面中庸sass写css了

来测试验证一下:

修改App.vue文件删除自动生成的内容，加上测试代码

<template>
  <div id="app">
    <div class="test">
      测试sass
    </div>
  </div>
</template>

<style lang="scss" scoped>
#app {
  width: 100%;
  height: 30px;
  .test {
    color: red;
    font-size: 14px;
  }
}
</style>

注: style 标签上需要加上lang 字段来指定预编译的语言 ; scoped字段表示当前的样式只对当前的页面(组件)生效，编译时会加上唯一的attribute(比如data-v-7ba5bd90)

我们写最简单的sass嵌套的语法，看页面效果，文字已经变成红色，说明sass已经生效。可以放心大胆的用了。

01.jpg

vue-router路由

安装与配置

Vue Router 是 Vue.js 官方的路由管理器。(具体可以阅读vue-router的官网)

首先安装

# 安装vue-router
npm install -s vue-router

在src目录下新建一个views目录，用来存放页面。我们新建两个页面登录和列表页模板.

在src目录下新加router目录，用来管理路由。

具体目录结构如下:

src
  --views
    --login
      Index.vue
    --list
      Index.vue
  --router
    index.js

随便在登录页和列表页写几个字以示区分，接下来，我们来配置路由

/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// @会从src目录查找
import Login from '@/views/login/Index.vue'
import List from '@/views/list/Index.vue'

// Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use()
Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: Login,
    // meta这个字段有什么用？ 稍等会说
    meta: {
      title: "登录"
    }
  },
  {
    path: '/list',
    name: 'List',
    component: List,
    meta: {
      title: "列表"
    }
  },
]

const router = new VueRouter({
    // 注意：key名是routes 不是routers!!!
  routes
})

export default router

/scr/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
    // 注册路由
  router,
  render: h => h(App),
}).$mount('#app')

这样我们是不是就可以通过路由访问了？

重启服务访问/login 试一下发现登录页面写的内容并没有显示出来，也没有报错。。

原来我们漏了很重要的一步需要在加上router-view 路由匹配的组件讲在这里显示

/src/App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

这时访问 http://localhost:8080/#/login http://localhost:8080/#/list都可以正确访问了

自定义页面Title

思考：现在登录和列表页面的title都是默认的项目名，怎么去改成自定义的title呢？

/src/views/login/Index.vue

<script>
export default {
  mounted(){
    document.title = '登录'
  }
}
</script>

等页面加载完成后，去改变页面的title，这样虽然也能解决问题，但是如果每个页面都加上这段操作会显得麻烦。是否还记得我们刚才在做路由配置的时候加了一个meta属性，里面配置了title字段，这时我们可以通过全局前置守卫来解决这个问题

/src/main.js

// 路由守卫
router.beforeEach((to, from, next) => {
  if(to.meta.title){
    document.title = to.meta.title
  }
  next()
})

meta字段就是路由元信息字段，我们console.log(to)可以看到，通过to.meta或者to.matched数组中拿到我们配置的title信息。这样就可以为每个页面都加上自定义的title了。

引入移动端UI框架 Vant

Vant是有赞团队开发的轻量级的移动端UI组件库。

安装

# 安装vant
npm install vant -s

配置

我们选择一次性引入所有组件。按需引入方式可以参考官方文档

在main.js中注册vant

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

在登录页我们引入按钮组件看一下效果

/views/login/Index.vue

<template>
  <div>
    <van-button type="primary">主要按钮</van-button>
  </div>
</template>

02.jpg

vant已经生效，然鹅，我们看到vant的样式，单位是px，并不能适配不同分辨率的手机。

Vant适配

vant的官方文档提供了Rem的适配方式，具体的可以参考官方文档

rem还要去做px->rem的计算，有点麻烦。我们通过viewport来解决适配问题。

postcss-px-to-viewport是将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.

安装

# 安装到开发环境
npm install postcss-px-to-viewport -D

配置

我们需要在根目录添加.postcssrc.js文件

具体配置如下：

const path = require('path');

module.exports = ({ file })=> {
  const designWidth = file.dirname.includes(path.join('node_modules', 'vant')) ? 375 : 750;
  return {
    plugins: {
      autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      "postcss-px-to-viewport": {
        unitToConvert: "px", // 要转化的单位
        viewportWidth: designWidth, // UI设计稿的宽度
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        replace: true, // 是否转换后直接更换属性值
        // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
        landscape: false // 是否处理横屏情况
      }
    }
  }
};

上面配置项的注释已经很清楚，按说明配置就可以了。因为vant的px也需要转成vw，所以exclude不能再配置node_modules或者通过正则不匹配vant

另外，viewportWidth属性需要配置UI设计稿的宽度，vant是按375的设计稿设计的，而我们一般开发时的设计稿为750，所以这个值是需要做一下判断来赋值。

webpack的plugins可以配置对象，也可以配置一个函数，函数调用时可以传入两个参数，环境对象(env)和一个map对象。该对象描述了传递给webpack的选项，可以从中获取output-filename，来判断是否是vant，从而为vant赋不同的值。

最后我们重新启动服务，看我们的样式是否已被转成vw:

03.jpg

特别注意 postcss-px-to-viewport插件不能转换行内样式 ，所以你写样式的时候尽量写外链的样式或者写到style里

未完待续

这篇先写到这，这些都是最基础的应用，基本相关官网都有更详细的文档。还是建议多看官方文档，少走弯路。

下次更新的内容：

vant实现登录页面、列表页
axios的二次封装
mock数据
接口跨域、代理
角色/权限设置

我的掘金地址：

掘金传送门