技术栈
Vue + Vuex + axios + Vue-router + Vant + fastclick + vue-scroller + lib-flexible + reset.css + postcss-pxtorem + sass
github地址：vue_vant_cli3
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({
overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
}),
pxtorem({
rootValue: 37.5,
propList: ['*','!font*'],// !不匹配属性（这里是字体相关属性不转换）
unitPrecision: 3, // 最小精度，小数点位数
minPixelValue:2 // 替换的最小像素值
})
]
}
}
}
};
3.使用vw实现移动端适配
1.安装
npm install postcss-px-to-viewport --save-dev
2.在package.json中引用
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px-to-viewport": {
"unitToConvert": "px",
"viewportWidth": 375,
"unitPrecision": 3,
"viewportUnit": "vw",
"minPixelValue": 1
}
}
},
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
