vue 项目vant引入 babelrc配置 屏蔽eslint

vue.config.js

module.exports = {

  lintOnSave: false,

 

 

 1创建vue项目

vue create minemall

2 更改端口vue.config.js

module.exports = {
  devServer: {
    port: 8080,   // 端口号
  }
};

3 vant框架引入安装

cnpm i vant -S

4 .bablerc

自动引入组建

npm i babel-plugin-import -D

// 在.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 } from 'vant';
如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入

5 设置.eslint.js

  'semi': 0

6 测试vant

main.js

import { Button } from 'vant';

Vue.use(Button);

<van-button type="primary">主要按钮</van-button>

7移动端适配rem

安装postcss

npm install postcss-pxtorem --save-dev

npm i -S amfe-flexible

在 main.js 引入amfe-flexible

配置postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

 8

安装less与less-loader

npm install less less-loader

----------------------------------------------------------------

{

  "name": "vue-h5-template",

  "version": "2.0.0",

  "description": "A vue h5 template with Vant UI",

  "author": "songlk <ssllkkyy@126.com>",

  "private": true,

  "scripts": {

    "serve": "vue-cli-service serve --open",

    "build": "vue-cli-service build",

    "stage": "vue-cli-service build --mode staging",

    "lint": "vue-cli-service lint"

  },

  "dependencies": {

    "@chenfengyuan/vue-countdown": "^1.1.2",

    "axios": "^0.19.2",

    "dayjs": ">=1.7.7",

    "core-js": "^3.6.4",

    "js-cookie": "2.2.0",

    "lodash": "^4.17.15",

    "regenerator-runtime": "^0.13.5",

    "vant": "^2.4.7",

    "vue": "^2.6.11",

    "vue-router": "^3.1.5",

    "vuex": "^3.1.2"

  },

  "devDependencies": {

    "@vue/cli-plugin-babel": "~4.3.0",

    "@vue/cli-plugin-eslint": "~4.3.0",

    "@vue/cli-service": "~4.3.0",

    "@vue/eslint-config-prettier": "^6.0.0",

    "babel-eslint": "^10.0.3",

    "babel-plugin-import": "^1.13.0",

    "babel-plugin-transform-remove-console": "^6.9.4",

    "eslint": "^6.7.2",

    "eslint-plugin-prettier": "^3.1.1",

    "eslint-plugin-vue": "^6.2.2",

    "prettier": "^1.19.1",

    "node-sass": "^4.9.3",

    "sass-loader": "^7.1.0",

    "script-ext-html-webpack-plugin": "^2.1.4",

    "vue-template-compiler": "^2.6.11",

    "webpack-bundle-analyzer": "^3.7.0"

  }

}