vue-cli3+Vant，打造webapp的项目脚手架

技术栈

Vue + Vuex + axios + Vue-router + Vant + fastclick + vue-scroller + lib-flexible + reset.css + postcss-pxtorem + sass

1.通过vue-cli3.0新建项目

Vue CLI 3.0指南
新建项目

vue create vue_vant_cli

选择项目需要的一些特性（根据自身需求）

QQ截图20190617154806.png

Babel: es6转es5
TypeScript:支持ts
Progressive Web App (PWA) Support:渐进式web应用
Router:路由
Vuex:管理状态
CSS Pre-processors：CSS预处理
Linter / Formatter：代码规范
Unit Testing：单元测试
E2E Testing：端到端测试

2.安装Vant

npm i vant -S

按需引入组件

# 安装插件
npm i babel-plugin-import -D
//babel.config.js增加下面配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

在组件中按需引入vant的组件和在vue中注册组件使用了

import { Button } from 'vant';
export default {
  components:{
    [Button.name]:Button
  }
}

3.Rem 适配

• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
• lib-flexible 用于设置 rem 基准值

npm i lib-flexible -S
npm i postcss-pxtorem -D

//main.js中增加
import 'lib-flexible'
//修改vue.config.js文件，没有这个文件就新建一个
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer({
            browsers: ['Android >= 4.0', 'iOS >= 7']
          }),
          pxtorem({
            rootValue: 37.5,
            propList: ['*','!font*'],// !不匹配属性（这里是字体相关属性不转换）
            unitPrecision: 3,        // 最小精度，小数点位数
            minPixelValue:2          // 替换的最小像素值
          })
        ]
      }
    }
  }
};

4.添加Fastclick移除移动端点击延迟

安装fastclick

npm i fastclick -S

在main.js中引用

import FastClick from 'fastclick'
FastClick.attach(document.body)

5.安装vue-scroller刷新组件

npm i vue-scroller -S

在main.js中引用

import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

5.安装axios

npm i axios -S

6.初始化浏览器样式

下载地址：cssreset