vant使用

Npm操作:

创建vue项目:vue create 项目名称

手动配置特性:Manually select features

选择Babel和Choose Vue version

选择vue版本

文件放在单独的配置文件还是package.json

是否保存配置作为未来的项目

Rem适配:

进阶用法 - Vant 3 (youzan.github.io)里面有浏览器适配

Postcss-pxtorem：GitHub - cuth/postcss-pxtorem: Convert pixel units to rem (root em) units using PostCSS

安装:npm install postcss postcss-pxtorem --save-dev

在package.json同级目录中新建一个postcss.config.js文件，粘贴以下内容

module.exports = {

  plugins: {

    'postcss-pxtorem': {

      // 设置根元素字体大小，根据设计图设置 ，假设设计图是750，此处就设置75，假设设计图是1080，此处就设置108

      rootValue: 75,

      // propList里面写的是可以从px更改到rem的属性，*就是通配符

      propList: ['*'],

      // 排除node_modules目录下的所有文件

      exclude:/node_modules/i,

      // 过滤掉vant-开头的元素选择器，不会对vant组件进行修改了

      // .my-开头的类选择器也过滤掉

      selectorBlackList:['vant-','.my-'],

    },

  },

};

Lib-flexible:GitHub - amfe/lib-flexible: 可伸缩布局方案

安装:npm i -S amfe-flexible

在你public文件夹下的index.html中用以下代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

替换掉

<meta name="viewport" content="width=device-width,initial-scale=1.0">

在main.js文件中导入

// h5rem适配

import 'amfe-flexible/index.js'

// 也可以写成:import 'amfe-flexible'

注意:如果样式是行内样式，那么px不会更改为rem

Vant定制主题

Vantdemo：vuecli3的示例工程，GitHub - youzan/vant-demo: Collection of vant demos.

安装并使用vant

用快速上手中，安装vant的指令安装Vant

Vant 2 - 轻量、可靠的移动端组件库 (youzan.github.io)

引入组件的方式:

全局导入组件:将代码写在在main.js中

局部导入组件，将代码写在对应的vue文件内，并将Vue.use(组件名)去掉，在components中注册该组件，components: {[组件名.name]: 组件名}

方式一:导入所有组件:

注意:并不推荐，因为引入所有代码包的话会增加代码的体积

在main.js文件中粘贴下列代码:

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant);

接下来就能在vue文件中使用组件了

方式二:手动按需引入组件:

在main.js文件中引入以下代码:

注意:将所要导入的文件依次引入，其他组件也是一样的，只需要更改一下样式

全局引入组件：

import Button from 'vant/lib/button';

import 'vant/lib/button/style';

Vue.use(Button)

 

import Calendar from 'vant/lib/calendar';

import 'vant/lib/calendar/style';

Vue.use(Calendar)

import Cell from 'vant/lib/cell';

import 'vant/lib/cell/style';

Vue.use(Cell)

局部引入组件:

import Button from 'vant/lib/button';

import 'vant/lib/button/style';

 

import Calendar from 'vant/lib/calendar';

import 'vant/lib/calendar/style';

import Cell from 'vant/lib/cell';

import 'vant/lib/cell/style';

去掉Vue.use()并在components中添加以下代码

  components: {

    [Button.name]:Button,

    [Calendar.name]:Calendar,

    [Cell.name]:Cell,

  },

方式三:自动按需引入

需要安装插件babel-plugin-import 

安装:npm i babel-plugin-import -D

在你的babel.config.js文件内的module.exports中添加以下代码

  plugins: [

    ['import', {

      libraryName: 'vant',

      libraryDirectory: 'es',

      style: true

    }, 'vant']

  ]

接下来在你的main.js文件内导入组件

全局导入组件

import { Button } from 'vant'

Vue.use(Button)

import { Calendar } from 'vant'

Vue.use(Calendar)

import { Cell } from 'vant'

Vue.use(Cell)

局部导入组件

import { Button,Calendar,Cell } from 'vant'

  components :{

    [Button.name]:Button,

    [Calendar.name]:Calendar,

[Cell.name]:Cell,

},

Vant定制主题样式：

安装Less：npm install -–save-dev less less-loader

具体配置：定制主题，样式变量，配置文件

定制方法：

步骤一：引入样式源文件

手动引入：

引入全部样式：import 'vant/lib/index.less';

引入单个组件样式： import 'vant/lib/button/style/less';

按需引入：在babel.config.js中配置按需引入样式源文件，注意babel6不支持按需引入样式，在babel.config.js中的代码如下，只需要将原有的style:true替换成style:(name)=>`${name}/style/less`就行了

module.exports = { plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', // 指定样式路径 style: (name) => `${name}/style/less`, }, 'vant', ], ], };

步骤二：修改样式变量

如果 vue-cli 搭建的项目，可以在 vue.config.js 中进行配置。以下部分为代码:

// vue.config.js

module.exports = {

  css: {

    loaderOptions: {

      less: {

        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。

        lessOptions: {

          modifyVars: {

            // 直接覆盖变量

注意:此处需要按照配置文件中的样式修改，如果引入的是全部样式或者是按需引入，那么所有的组件内的同一样式都会被修改，如果引入的是单个组件样式，那么只有这个组件内的样式会被修改。例如源文件中的样式白色@white: #fff;你想将原本是白色的地方改为黑色，则在此处写:white: ‘#000‘，变量名如果有-需要用引号包裹，否则就不需要包裹

            'text-color': '#111',

            'border-color': '#eee',

            // 或者可以通过 less 文件覆盖（文件路径为绝对路径）

注意:在你的src目录下，新建一个styles文件，在其内部新建less文件，注意在你的less文件中修改样式时，变量名前需要用@,变量名和变量值都不需要引号包裹，用分号分隔，由于导入的时候需要的是绝对路径，所以我们在vue,config.js中需要使用path模块，const path = require(‘path’)

const 自定义名称= path.resolve(__dirname,’./src/styles/文件名.less’)__dirname表示当前目录，即为项目的根目录，然后将hack: `true; @import "your-less-file-path.less";`,替换成hack: `true; @import "${自定义名称}";`,

            hack: `true; @import "your-less-file-path.less";`,

          },

        },

      },

    },

  },

};

容易报错:

执行  npm install --save less less-loader

安装完less 后 ，在style 中使用less 时会报error

这种情况是less-loader版本过高引起的，可以在package.json 中查看当前less 的版本

所以针对这种情况我们可以先把现有的less-loader 卸载掉,然后去安装低版本的less-loader

npm uninstall less-loader（卸载当前less-loader）

npm install less-loader@4.1.0 –save

scoped代表只在当前组件中生效

lang='less'表示使用了less

浏览器适配

在vue项目中，使用autoprefixer为项目中的css自动添加浏览器前缀，autoprefixer是postcss的一款插件，要先安装postcss-pxtorem

安装插件: 

npm install postcss postcss-pxtorem --save-dev

npm install --save-dev autoprefixer

安装好后，在package.json同一层目录下创建postcss.config.js文件，并在postcss.config.js中添加以下代码:

module.exports = {

  plugins: {

    "autoprefixer":{

      "overrideBrowserslist":[

        "ie >= 8",//兼容ｉｅ７以上的浏览器

        "Firefox >= 3.5",//兼容火狐版本号大于３.５的浏览器

        "chrome >= 3.5",//兼容谷歌版本号大于３５的浏览器

        "opera >= 11.5",//兼容欧朋版本号大于１１.５的浏览器

        // 注意:以上兼容只适用于ＰＣ端开发,如果做的是移动端项目,你可以在ｖａｎｔ官网,进阶用法中,找到ｒｅｍ布局适配,用以下代码

        // 'Android >= 4.0',

        // 'ios >= 8'

// 来替换以上适配

      ]

    },

    "postcss-pxtorem":{

      rootValue:75,//设置ｒｏｏｔ元素的字体大小，值为移动端页面宽度／１０

      propList:['*'],//可以设置ｐｘ更改到ｒｅｍ的属性

      selectorBlackList:['van-','.my-'],//过滤掉ｖａｎ－开头的元素选择器和．ｍｙ－开头的类选择器

      exclude:/node_modules/i,//排除ｎｏｄｅ＿ｍｏｄｕｌｅｓ目录及目录下的文件

    }

  }

}

容易报错

postcss-pxtorem版本过高

运行报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

npm i postcss-pxtorem@5.1.1