创建vue项目并引入vantui

一、在创建文件的目录中，输入cmd，回车

 

1. npm install --global @vue/cli   安装vuecli(mac系统在命令最前方加sudo[不加会报错无权限])
2. vue --version  检查vuecli是否安装
3. Vue create 项目名 
4. Please pick a preset: Manually select features（手动，可以选择更多的功能特性）
5. Check the features needed for your project: Choose Vue version, Babel（es6转es5）, Router, Vuex, CSS Pre-processors(css处理器), Linter（校验代码）（有校验之后，单双引号不对都一直报错，关键是VScode一保存就自动将单引号变为双引号！！！）
6. Use history mode for router?No
7. Less
8. Pick a linter / formatter config: Standard
9. Pick additional lint features: Lint on save（保存后校验代码）, Lint and fix on commit（提交仓库时校验代码）
10. Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files（生成独立配置文件，后期便于维护）（另一个是生成在package文件中）
11. 最后是否要把本次配置设为以后的默认配置

二、引入vant组件库

npm i vant -S(安装vant库)

npm i babel-plugin-import -D（按需引入组件的插件）

在.babelrc 或 babel.config.js 中添加配置：

{

  "plugins": [

    [

      "import",

      {

        "libraryName": "vant",

        "libraryDirectory": "es",

        "style": true

      }

    ]

  ]

}

局部注册后，你可以在当前组件中使用注册的 Vant 组件。

import { Button } from 'vant';

export default {

  components: {

    [Button.name]: Button,

  },

};

如果同时注册多个组件，遇到报错：是否正确注册这个组件时：

可以在子组件内部尝试下面的引入方法

打包：npm run build 需要手动先创建一个vue.config.js文件，内容是

module.exports = {

  publicPath: "./",

  outputDir: "dist",

  assetsDir: "static",

  indexPath: "index.html",

  configureWebpack: {

    externals: {

      BMap: "BMap", //百度地图配置

    },

  },

};

三、配置viewport

npm install postcss-px-to-viewport --save-dev

使用npm安装， 

// 新建postcss.config.js 。配置

module.exports = { plugins: { 'postcss-px-to-viewport': { viewportWidth: 375, }, }, };

重新运行

注：报错不是按顺序的，出现什么错误解决什么。

报错1：

Syntax Error: Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-pxtorem'

找不到这个模块npm install postcss-pxtorem，就安装上

报错2：Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.需要8.以上的版本，它最高才6.0这里降低版本

npm i postcss-pxtorem@5.1.1

报错3：找不到vant\lib\index.css这个模块了，就先全局卸载，再安装

①. npm uninstall vant -S
②. npm install vant -S