vue-cli4+vant+rem+sass+vuex+axios封装+webpack搭建移动端项目

▲ 回顶部

✅ vm 适配方案

本项目使用的是 rem 的 适配方案，其实无论你使用哪种方案，都不需要你去计算 12px 是多少 rem 或者 vw, 会有专门的工具去帮你做

。如果你想用 vw，你可以按照下面的方式切换。

1.安装依赖

npm install postcss-px-to-viewport -D

2.修改 .postcssrc.js

将根目录下 .postcssrc.js 文件修改如下

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {

plugins: {

autoprefixer: {

overrideBrowserslist: [‘Android 4.1’, ‘iOS 7.1’, ‘Chrome > 31’, ‘ff > 31’, ‘ie >= 8’]

},

‘postcss-px-to-viewport’: {

viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750

unitPrecision: 3, // 指定px转换为视窗单位值的小数位数（很多时候无法整除）

viewportUnit: ‘vw’, // 指定需要转换成的视窗单位，建议使用vw

selectorBlackList: [‘.ignore’, ‘.hairlines’], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名

minPixelValue: 1, // 小于或等于1px不转换为视窗单位，你也可以设置为你想要的值

mediaQuery: false // 允许在媒体查询中转换px

}

}

}

3.删除原来的 rem 相关代码

src/main.js 删除如下代码

// 移动端适配

import ‘lib-flexible/flexible.js’

package.json 删除如下代码

“lib-flexible”: “^0.3.2”,

“postcss-pxtorem”: “^5.1.1”,

运行起来，F12 元素 css 就是 vw 单位了

▲ 回顶部

✅ VantUI 组件按需加载

项目采

用Vant 自动按需引入组件 (推荐)下

面安装插件介绍：

babel-plugin-import 是一款 babel 插件，它会在编译过程中将

import 的写法自动转换为按需引入的方式

安装插件

npm i babel-plugin-import -D

在babel.config.js 设置

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置

const plugins = [

[

‘import’,

{

libraryName: ‘vant’,

libraryDirectory: ‘es’,

style: true

},

‘vant’

]

]

module.exports = {

presets: [[‘@vue/cli-plugin-babel/preset’, { useBuiltIns: ‘usage’, corejs: 3 }]],

plugins

}

使用组件

项目在 src/plugins/vant.js 下统一管理组件，用哪个引入哪个，无需在页面里重复引用

// 按需全局引入 vant组件

import Vue from ‘vue’

import { Button, List, Cell, Tabbar, TabbarItem } from ‘vant’

Vue.use(Button)

Vue.use(Cell)

Vue.use(List)

Vue.use(Tabbar).use(TabbarItem)

▲ 回顶部

✅ Sass 全局样式

首先 你可能会遇到 node-sass 安装不成功，别放弃多试几次！！！

每个页面自己对应的样式都写在自己的 .vue 文件之中 scoped 它顾名思义给 css 加了一个域的概念。

目录结构

vue-h5-template 所有全局样式都在 @/src/assets/css 目录下设置

├── assets

│ ├── css

│ │ ├── index.scss # 全局通用样式

│ │ ├── mixin.scss # 全局mixin

│ │ └── variables.scss # 全局变量

自定义 vant-ui 样式

现在我们来说说怎么重写 vant-ui 样式。由于 vant-ui 的样式我们是在全局引入的，所以你想在某个页面里面覆盖它的样式就不能

加 scoped，但你又想只覆盖这个页面的 vant 样式，你就可在它的父级加一个 class，用命名空间来解决问题。

.about-container {

/* 你的命名空间 */

.van-button {

/* vant-ui 元素*/

margin-right: 0px;

}

}

父组件改变子组件样式 深度选择器

当你子组件使用了 scoped 但在父组件又想修改子组件的样式可以 通过 >>> 来实现：

全局变量

vue.config.js 配置使用 css.loaderOptions 选项,注入 sass 的 mixin variables 到全局，不需要手动引入 ,配

置$cdn通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量：

const IS_PROD = [‘production’, ‘prod’].includes(process.env.NODE_ENV)

const def