vue 移动端完整项目搭建（四）引入Vant组件库，配置less

一. 按需引入Vant

Vant组件库是由有赞团队打造的前端ui框架，我个人比较喜欢。封装层度较高，做商城类网页尤其适合。
首页自然是安装vant组件：

npm i vant -S

然后是引入，这里推荐按需引入：

# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

// .babelrc 中配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式

import { Button, Cell } from 'vant';

二. 配置less

第一步,安装less依赖:

npm install less less-loader --save

第二步,修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加:

{
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
}

最后在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域有效)，如：